Loading
Feature Degradation | Agentforce Voice Read More
Explore Legacy Service Features
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Customize the General Branding for Your Chat Window

            You are here:

            1. Salesforce Help
            2. Docs
            3. Legacy Service Features

            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

             
            Loading
            Salesforce Help | Article