Create different Virtual Agent branding configurations for the various organizations that use your instance. These configurations apply to the web-based chat and mobile clients only.

Before you begin

If you're using ServiceNow® mobile, make sure you set up Virtual Agent for mobile chat. For details, see Configure Virtual Agent for a ServiceNow mobile application.

Check for updates and improvements to the Omni-Experience Standard Feature Set application on the ServiceNow Store.

Note: Branding for bots in the Conversational Integration with Microsoft Teams is available through the Microsoft Teams app customization feature. For details, see MS Teams branding for the conversational integration in Now Community. Branding for bots in Slack is available as well. For details, see Configure branding for your Virtual Agent bot in Slack.

Role required: virtual_agent_admin or admin

Procedure

  1. Navigate to All > Conversational Interfaces > Settings.
  2. Under the Display Options section, select View All next to Branding.
  3. Select New to create a branding configuration or select the branding configuration record to be updated.
  4. On the form, fill in the fields.
    LabelDescription
    Branding name Name of the branding configuration.
    Create a new branding configuration or select one of the available choices. For the Vancouver release, the choices include:
    • Polaris-Dark
    • Polaris-Light
    Chat Header Text string that identifies your company or organization in the chat window. For example: Acme Support.
    Minimum delay between bot messages (ms) Minimum delay, in milliseconds (ms), that occurs between bot responses. The default delay is 500 ms.
    Minimum delay before displaying typing animation (ms) Minimum delay, in milliseconds (ms), that occurs before showing the animation ellipsis indicating the bot is processing user input.
    Menu Title Name of the support menu. The default title is Contact Support.
    Branding key Read-only sys_id of the configuration, which reflects the Branding name you entered. The key is in lower case letters with spaces replaced by underscore characters.
    Bot Profile List that opens the Live Profile form to select or create a new bot user profile, which includes the bot picture (avatar).
    • To review and edit the Virtual Agent bot profile, click the information icon.
      • To change the Virtual Agent bot photo or description, click Edit record in the message at the top of the page.
      • In the Live Profile form, modify the fields and click Update.
    • To choose or change the bot for the configuration, select the search icon and click the Bot Profile field. Choose the bot profile that you created in a previous step.
    Chat Header Logo Logo image that displays in the chat header. If live chat is run in a browser window, the logo also displays in the browser tab. The chat header logo is set to 42x42 pixels, and the chat message logo is set to 24x24 pixels. An uploaded image that is smaller than these dimensions will appear stretched. A larger image will be scaled down.
    • To add a logo, select Attach Image and use the file finder to choose the image.
    • To change the logo, select View image. From the file finder, select the new logo file and click OK. The updated logo displays below this field.
    • To remove the logo, select the trash icon. The file is immediately deleted.
  5. Select Save.
    From here, you can adjust the color, icons, and fonts of the chat client to match your brand. For example, you can:
  6. To change the color of items in the chat window, select the Colors tab.
    Chat branding colors tab
    Select an item and specify the Hex or red blue green alpha (RGBA) colors you want to use for that item. When you do so, the example chat window shows a preview of your changes.
    Table 1. Customize color for each item
    Label Description
    Chat window
    Chat Header Background Background color of the chat header.
    Chat Background Background color of the chat window.
    Menu Icon Color of the menu icon, which provides user options to end a conversation or contact customer support.
    Chat Header Font Font color of text in the chat header.
    Input Background Background color of the user input bar.
    Chat messages
    User Bubble Background Background color of the user chat bubble.
    Agent Bubble Background Background color of the live agent chat bubble.
    Bot Bubble Background Background color of the bot chat bubble.
    Link Color of links presented in the conversation.
    Button Background Background color of buttons used in the conversation.
    Notification Background Background color of Virtual Agent notifications delivered in the web chat client.
    User Bubble Font Font color of text in the user chat bubble.
    Agent Bubble Font Font color of text in the live agent chat bubble.
    Bot Bubble Font Font color of text in the bot chat bubble.
    Link turned off Color of links turned off in the conversation.
    Notification Text Font color of Virtual Agent notifications delivered in the web chat client.
    Others
    System message Color of general system messages displayed in the conversation.
    Category background Background color of the heading above a list of topics.
    Separator Color of the dashed line that separates each conversation in the Preview window.
    Time Stamp Color of the timestamp displayed when significant activity occurs during a conversation, such as a record being created.
    Category font Font color of text in the category heading.
    Loading Animation Color of the animated dots that indicate the system is processing information.
  7. To customize the chat icons in the chat window, select the Icons tab.
    Chat branding tabs
    You can customize the icons on four different chat screens: the main chat screen, the all topics screen, the support menu, and the end conversation screen. Use this tab to do the following:
    • Add a custom icon: Select Add for the icon, and then select Attach image. After choosing the image file, select Apply.
    • Replace a custom icon: Select Replace for the icon. Select the trash can icon to delete the current image, and then upload a new one.
    • Revert to the system default icon: Select Remove for the icon.
      Note: You can't remove system default icons.
    When you specify the icons during configuration, the example chat window shows a preview of your changes.
    Note: Unlike other settings on the branding page, icon changes take effect on the web client as soon as you select Apply. Other changes don't take effect until you select Save at the top of the page.

    Valid file formats are .jpg, .png, .bmp, .gif, .jpeg, .ico, and .svg.

  8. (Optional) If you don't want to use the fonts included in one of the available branding configurations (for example, Polaris-Light or Polaris-Dark), you can customize the fonts.
    Note: This feature is only available after you've installed and updated the Omni-Experience Standard Feature Set to the latest version through the ServiceNow Store.
    To customize the fonts shown in the chat, select the Fonts tab.
    Chat branding fonts tab.

    Choose one of the following methods:

    1. Select the fonts you want to use.
      From the chat header text drop-down list, select the font you want to use for the header.

      Do the same for the chat body text.

      You will see an example of the new font.
    2. Download the fonts from a URL.
      From the Add custom font drop-down list, select From URL, specify the URL, and apply the changes.
    3. Upload the fonts you want to add from an attached file.
      From the Add custom font drop-down list, select Upload font, specify the path to the file you want to attach, and apply the changes.
  9. To update the Contact support menu, scroll down to the Menu Items section.
    Chat branding menu items section.

    You can change the icons, labels, visibility, and display order of the Email, Chat, and Phone menu items. You can also add custom options to the menu.

    1. In the Menu Items section, do any of the following:
      • To edit a menu item, select the record icon.
      • To add a new menu item, select New.
      • To delete a menu item, select the record icon. In the record, select the More Actions icon , and then select Delete.

      For each menu entry, fill in the fields.

      FieldDescription
      Label Text string that describes the menu type.
      The labels for the default menu types in the Global application scope are:
      • Email - Option that opens the default email. Default label: Send Email to Customer Support
      • Chat – Option for chatting with a live agent. Default label: Contact Live Agent for Chat type
      • Phone - Option that indicates when phone support is available. Default label: Call Support—(Daily 5AM - 11PM)
      The label text can be up to 75 characters in length.
      Type Type of menu item. For example, if you're adding a menu item that is a link to specific information such as a help page, select the Link Type.
      The menu item types are:
      • Email: Option for contacting support through email.
      • Link: Option for a link to a web page
      • Chat: Option for contacting a live agent through chat.
      • Text: Option for setting a text string
      • Phone: Option for contacting support by phone
      Value The menu type value. For example, the Value for Email is the email address of the support group.
      The values for the default menu types are:
      • Email: Email address of the support group. For example: support@example.com.
      • Phone: Phone number of your call support organization.
      • Email: Email address of your support organization.
      Note: The chat menu type doesn't have a value.
      Visible

      Option that makes the item visible in the Contact support menu.

      Clear this option to hide the menu item.
      Display default icon Option that indicates the default icon for the item is visible in the menu.

      Clear this option to add, change, or delete a menu icon.

      • To add an icon for a new menu item, select View image. From the file finder, choose your icon file and select OK. The uploaded icon displays below the Icon field.
      • To change an icon, in the Icon field select Update. From the file finder, select the new logo file and click OK. The updated Icon displays below this field.
      • To remove the icon, select trash icon. The file is immediately deleted.
      Order Number that identifies the sequence in which the item appears in the Contact support menu. The number 1 indicates that the item is the first option listed in the menu.
      Application Global.
    2. When you complete the Menu Item section for a menu type, select Save..
  10. Do one of the following to apply the branding configuration:

    • Apply the branding configuration to a destination page. Enter the system parameter sysparm_branding_key with the branding key in the web client URL. For example:

      https://<your-instance-name>service-now.com/$sn-va-web-client-app.do?sysparm_branding_key=acme

      In this example, acme is the key of the branding configuration to be used.

    • Apply the branding configuration to an embedded web client. Enter the system parameter sysparm_branding_key with the branding key in the URL for the embedded web client. For example:

      https://<your-instance-name>service-now.com/$sn-va-web-client-app_embed.do?sysparm_branding_key=acme

      In this example, acme is the key of the branding configuration to be used.

    • Apply the branding configuration to a Service Portal Agent Chat Configuration. In the server script that passes page and widget data to an Agent Chat (Virtual Agent or Live Agent) conversation, specify the branding key to be used. Items passed in this script are available to all pages in the portal. For details on setting up Service Portal Agent Chat, see . Add your bot to a portal.

      For example, the following Service Portal Agent Chat Configuration for the Knowledge Portal uses the chat branding key, custom_1.

      Service Portal Agent Chat Configuration example
      Note: There are other Service Portal Agent Chat features that you can configure, such as customizing the Agent Chat button in your portal. For more information on customizing the Agent Chat widget in Service Portal, see Configure Agent Chat in Service Portal.
  11. (Optional) If you're using Conversation Autopilot with your branded bot, specify the branded bot name displayed in the chat window during Autopilot sessions by changing system properties as follows.
    1. Navigate to All > Conversational Interfaces > Settings.
    2. Under the System actions section, select View All next to System messages.
    3. Change the Value field of the com.glide.cs.autopilot.client_initiated_header system property to specify the branded bot name instead of the Virtual Agent bot name displayed in the header of the chat window.
      Figure 1. Autopilot header in chat window
      Bot name displayed in header of chat window during Conversation Autopilot session
    4. Update the com.glide.cs.autopilot.client_initiated_message system property to specify the branded bot name displayed to the requester during the conversation.
      Figure 2. Autopilot message during the conversation
      Message displayed in the chat window informing the user that the Virtual Agent bot is assisting.