Set up catalog branding

Customize the appearance of catalogs in Virtual Agent to match your business’ branding.

Before you begin

Role required: admin, virtual_agent_admin

Download Theme Builder from the ServiceNow Store and activate the plugin (sn_theme_builder). For more information, see Activate a plugin.

About this task

Virtual 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.

Procedure

1. Navigate to All > Themes > Theme Builder.

2. Create a new theme by providing primary and secondary colors.

   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.

3. Save your theme.

4. Add your theme to the portal configuration.

   1. Navigate to All > Now Experience Framework > Themes.

   2. Select the record for the theme you want to import.

   3. Under the Additional Actions icon [Omitted image "additional-actions-icon.png"] Alt text: Additional actions icon., select Copy sys_id.

   4. Navigate to All > Service Portal > Agent Chat.

   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.

   For example, if your sys_id is 0be48eb1eba0011090fa99602a522843, you add:

   macroponent_theme: '0be48eb1eba0011090fa99602a522843'

5. Add a variant theme to the portal configuration if desired.

   1. Repeat Steps 4a and 4b.

   2. Under the Compositional: App theme tab, open your desired Style whose Type is Variant.

   3. Repeat Steps 4c and 4d.

   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.

   For example, if your variant theme's sys_id is 1df59fc2fcb1122101gb00713b633954, you add:

   macroponent_theme_variant: '1df59fc2fcb1122101gb00713b633954'

6. Select Update to save the configuration.

7. Navigate to the portal where the configuration is used.

   For example, if you updated the ESC Chat portal configuration, navigate to Employee Service Center.

8. Run the catalog topic in the portal chat to load its configuration and reveal any elements that need branding.

   [Omitted image "catalog-branding-01.png"] Alt text: Virtual Agent chat window, with highlighted links and buttons to be updated.

9. Navigate to All > Now Experience framework > Themes > Theme Builder.

10. From the drop-down menu, select Manager, then select your created theme.

11. Under the Component styles tab, select Edit.

    [Omitted image "catalog-branding-02.png"] Alt text: Update the color hex codes in Theme Builder to match your branding colors.

12. Select one of the elements needing branding found in Step 8.

13. In the palette sidebar, set the element's hex code color to match the color from your branding record.

14. Repeat Steps 12 and 13 until you update all elements.

    [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.

Result

Catalog color themes now match your branding.

Parent Topic:Using catalogs and autopilot in Virtual Agent