{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":5227,"path":"conversational-interfaces/virtual-agent/va-catalogs-branding.md","title":"Set up catalog branding","bundle":null,"doc_type":null,"release":"australia","body":"\n# Set up catalog branding\n\nCustomize the appearance of catalogs in Virtual Agent to match your business' branding.\n\n## Before you begin\n\nRole required: admin, virtual\\_agent\\_admin\n\nDownload Theme Builder from the ServiceNow Store and activate the plugin \\(sn\\_theme\\_builder\\). For more information, see [Activate a plugin](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-administration/t_ActivateAPlugin.md).\n\n## About this task\n\nVirtual Agent uses the Branding Setup \\[sys\\_cs\\_branding\\_setup\\] table to define branding colors, but catalogs don't inherit branding colors. Instead, catalogs use cascading style sheets \\(CSS\\) variables defined in the UX Themes \\[sys\\_ux\\_theme\\] record on the instance.\n\n## Procedure\n\n1.  Navigate to **All** > **Themes** > **Theme Builder**.\n\n2.  Create a new theme by providing primary and secondary colors.\n\n    **Note:** You can match your colors to the Chat Header Background and Chat Background colors in the branding record of your choice. For more information creating themes, see [Create a theme with Theme Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-user-interface/tb-create-theme.md).\n\n3.  Save your theme.\n\n4.  Add your theme to the portal configuration.\n\n    1.  Navigate to **All** > **Now Experience Framework** > **Themes**.\n\n    2.  Select the record for the theme you want to import.\n\n    3.  Under the Additional Actions icon \\[Omitted image \"additional-actions-icon.png\"\\] Alt text: Additional actions icon., select **Copy sys\\_id**.\n\n    4.  Navigate to **All** > **Service Portal** > **Agent Chat**.\n\n    5.  Select the portal configuration where you want to add your branding theme, and add the following line to the server script, including the sys\\_id from Step 4c.\n\n    For example, if your sys\\_id is `0be48eb1eba0011090fa99602a522843`, you add:\n\n    ```\n    macroponent_theme: '0be48eb1eba0011090fa99602a522843'\n    ```\n\n5.  Add a variant theme to the portal configuration if desired.\n\n    1.  Repeat Steps 4a and 4b.\n\n    2.  Under the **Compositional: App theme** tab, open your desired **Style** whose **Type** is `Variant`.\n\n    3.  Repeat Steps 4c and 4d.\n\n    4.  Select the portal configuration where you added your branding theme, and add the following line to the server script, including the sys\\_id from Step 5c.\n\n    For example, if your variant theme's sys\\_id is `1df59fc2fcb1122101gb00713b633954`, you add:\n\n    ```\n    macroponent_theme_variant: '1df59fc2fcb1122101gb00713b633954'\n    ```\n\n6.  Select **Update** to save the configuration.\n\n7.  Navigate to the portal where the configuration is used.\n\n    For example, if you updated the **ESC Chat** portal configuration, navigate to Employee Service Center.\n\n8.  Run the catalog topic in the portal chat to load its configuration and reveal any elements that need branding.\n\n    \\[Omitted image \"catalog-branding-01.png\"\\] Alt text: Virtual Agent chat window, with highlighted links and buttons to be updated.\n\n9.  Navigate to **All** > **Now Experience framework** > **Themes** > **Theme Builder**.\n\n10. From the drop-down menu, select **Manager**, then select your created theme.\n\n11. Under the **Component styles** tab, select **Edit**.\n\n    \\[Omitted image \"catalog-branding-02.png\"\\] Alt text: Update the color hex codes in Theme Builder to match your branding colors.\n\n12. Select one of the elements needing branding found in Step 8.\n\n13. In the palette sidebar, set the element's hex code color to match the color from your branding record.\n\n14. Repeat Steps 12 and 13 until you update all elements.\n\n    \\[Omitted image \"catalog-branding-03.png\"\\] Alt text: Virtual Agent chat window, with highlighted links and buttons updated after changing hex color codes in Theme Builder.\n\n\n## Result\n\nCatalog color themes now match your branding.\n\n**Parent Topic:**[Using catalogs and autopilot in Virtual Agent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/va-catalogs.md)\n\n"}}