Salesforce Docs Portal

Customize the General Branding for Your Chat Window

Select the colors and font used in your chat window to reflect your company’s brand identity.

Required Editions

View supported editions.
User Permissions Needed
To set up Embedded Chat: Customize Application AND Modify Metadata
Important
Important

Legacy Chat will be retired on February 14, 2026. To avoid service interruptions to your end users, switch to enhanced Chat (formerly Messaging for In-App and Web). Enhanced Chat offers many of the legacy Chat features that you love plus asynchronous conversations that can be picked back up at any time. Learn about migrating in Help and Trailhead.

Before you start, get the color codes for your company’s brand from the team that maintains the website. You can specify branding colors by entering their Hex code or RGB code, or by selecting a color in the color palette.

Important
Important We don’t support adding custom CSS to your embedded component. We support using only the branding options in setup and in the customizable parameters in the code snippet. If you have custom CSS in your embedded component, it’s your responsibility to test your chat window each release to ensure that it functions properly.

To customize the branding of your chat window:

  1. From Setup, enter Embedded Service in the Quick Find box, then select Embedded Service Deployments.
  2. Find the deployment that you want to work with, click the down arrow to the right and select View.
  3. In the Embedded Service configuration page, go to the Branding section and click Edit.
  4. Select the colors that you want to show in the chat window.
    Enter the color using the Hex code. To enter an RGB code or to select a color from the palette, open the color palette by clicking the down arrow in the color field.
  5. Select the font that you want to use in the chat window.
  6. Click Finish.

The screenshots show how the branding elements appear in the chat window.

Screenshots showing the branding elements in the snap-in
Brand Elements That Can Be Customized in a Chat Window
Brand Element Description
Brand Primary

Sets the color of the:

  • Pre-chat image backdrop
  • Pop message outlines
  • Loading animation
  • Loading animation when chat is minimized

By default, the color is set to hex #222222 (Night Black).

In the screenshots, brand primary elements are indicated by [1].
Brand Secondary

Sets the color of the:

  • Action buttons, such as “Start Chatting” or “Chat with an Expert”
  • Input field focus
  • Send button
  • Guest message chat payload
  • Secondary buttons
  • Chat when it is minimized and there’s a new message

By default, the color is set to #005290 (Nimbostratus Blue).

In the screenshots, brand secondary elements are indicated by [2].
Contrast Primary

Sets the color of the:

  • Chat body text
  • Chat input text

By default, the color is set to #333333 (dark gray).

The background color is white.

In the screenshots, contrast primary elements are indicated by [3].
Header

Sets the color of the:

  • Chat header bar
  • Chat button when the chat is minimized

By default, the color is set to hex #222222 (Night Black).

In the screenshots, the header element is indicated by [4].
Header Text

Sets the color of the:

  • Chat header text and icon

By default, the color is set to #222222 (Night Black).

In the screenshots, the header text element is indicated by [5].
Header Alternate

Sets the color of the:

  • Chat state waiting header
  • Chat state header and announcement area

By default, the color is set to #cb2b19 (red).

In the screenshots, the header alternate is indicated by [6].
Font

Sets the font used in the chat widget.

The following fonts are supported in mobile browsers for both iOS and Android: Georgia, Times New Roman, Arial, Courier New

The following fonts are supported in mobile browsers for iOS only: Trebuchet MS, Verdana, and Lucida Console

Note
Note If you select a font that isn’t available for a chat visitor’s mobile browser, the browser’s default font is displayed.
Important
Important Changing the branding of an existing chat window changes the code snippet for the chat window. If you update the branding for an existing window, you must update the code snippet on your web pages. If you customized the code snippet, you must add those customizations to the new code snippet.

See Also