Branding your chat client

  • Release version: Washingtondc
  • Updated February 1, 2024
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Branding your chat client

    This guide outlines how to customize the chat interface within ServiceNow by incorporating your company's branding elements such as logos, color schemes, fonts, and support menus. It applies to both web chat and mobile clients, while noting that certain integrations, like Microsoft Teams and Slack, follow different branding protocols.

    Show full answer Show less

    Key Features

    • Multiple Branding Configurations: You can create various branding configurations for different bots and instances.
    • Customization Options: Adjust organization images, colors, fonts, and chat menu items to match your brand identity.
    • User Profile Creation: For branded bots, create unique user profiles in the User table with specific IDs and avatars.
    • Support Menu Customization: Modify contact information, visibility, and icons in the chat support menu.
    • File Format Support: Acceptable image formats include .jpg, .png, .gif, and .svg, ensuring high-resolution displays.

    Key Outcomes

    By branding your chat client, you enhance user engagement through a familiar interface that reflects your organization’s identity. Customers can expect a seamless integration of their brand within the chat functionalities, leading to improved customer support interactions. Additionally, the ability to customize visual elements allows for a tailored experience that aligns with your company's standards.

    Customize your chat interface with your own brand, including company logo and bot avatar, UI color schemes, fonts, and the chat support menu displayed to your users.

    Note:
    For new customers onboarding from Vancouver onward, the web client is only accessible to authenticated users by default. To allow unauthenticated users to access the web client, enable Public access in Conversational Interfaces > Settings > General. For more information, see Enable public access to the web client.

    Multiple branding configurations

    You can create any number of branding configurations for an instance. These branding configurations apply to the web chat and mobile clients and don't apply to the Conversational Integrations for Slack, Microsoft Teams, Workplace by Facebook, and Facebook Messenger.
    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. For information about branding bots in Slack, see Configure branding for your Virtual Agent bot in Slack.

    The default branding configuration includes the Virtual Agent bot, which has a ServiceNow avatar. If you want additional branded bots, create a user profile for each bot in the User [sys_user] table. Give your bot a unique user ID, name (for example, Acme), upload the photo (image) for your bot avatar, and make your bot active. For details on adding users to your instance, see Create a user.

    Once created, you then select the bot to be used in a configuration. A branded bot can be used in a single configuration or in multiple branding configurations.

    Supported branding items

    Conversational Interfaces provides a default branding configuration that you can customize. To change the default configuration, create other branding configurations, or modify the chat (support) menu, gather and prepare the following files and information:
    Organization images
    Images of company logos to be used in your chat windows. If you're using Virtual Agent, the images of avatars to be used for branded bots.

    Images must be in .jpg, .png, .bmp, .gif, .jpeg, .ico, or .svg file format. The images can be high resolution, but the image display is scaled based on the aspect ratio. Keep in mind that if chat is run in its own browser window, a thumbnail of the branding logo displays automatically in the browser tab.

    Colors and fonts
    Colors and fonts used for the various user interface items, such as chat bubbles, buttons, and notifications displayed.

    If you want to change the color of interface items, determine the Hex number or RGBA color for those items. When you specify the Hex or RBGA colors during configuration, you can immediately see your changes in the example chat window. To learn more about Hex numbers and RGB color specifications, see HTML Color Names (W3CSchools).

    Figure 1. UI items in the chat window
    Elements of the Virtual Agent interface including category, links, button background, menu buttons, and input background.
    Chat menu items
    Contact information for your support organization, such as support call hours, call center support phone number, and support email address. You can customize information in the support menu by adding or changing menu items, including the text and icons displayed. You can also control the visibility of the menu items (show or hide menu options).

    You can also change the default menu icons or add icons for new menu items. The icons must be in .svg file format. For better resolution, use a single-color icon.

    Figure 2. Chat menu
    Contact support information displayed in the default Contact support menu in the web chat window.