---
schema_version: "1"
id: af4f5e66d37cd2a1db4e5e24ca3060fc952bad215b244c4e6e6a009880bf66a1
title: Customize the General Branding for Your Chat Window
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/service/264-0-0/snapins_chat_branding.md
canonical_url: https://help.salesforce.com/s/articleView?id=service.snapins_chat_branding.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: dae87acb69135c591b06f026e19a84e01fe68520e63d7799ca888322a69ef610
description: Select the colors and font used in your chat window to reflect your company’s brand identity.
products:
  - Service Cloud
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=service.legacy_editions.htm&amp;language=en_US" target="_blank">View supported editions</a>.</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d5251e58">User Permissions
              Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e58 ">To set up Embedded Chat:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e58 ">Customize Application AND Modify Metadata</td>

          </tr>
        </tbody>
      </table>

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/images/icon_important.png)

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](https://help.salesforce.com/s/articleView?id=service.miaw_replacing_chat_considerations.htm&language=en_US) plus asynchronous conversations that can be picked back up at any time. Learn about migrating in [Help](https://help.salesforce.com/s/articleView?id=service.miaw_replacing_chat_considerations.htm&type=5&language=en_US) and [Trailhead](https://trailhead.salesforce.com/content/learn/modules/migrating-from-legacy-chat-to-enhanced-chat).

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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/images/icon_important.png)

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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/support_legacy/images/chat/snap-ins_branding_screenshots.png)

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small " summary="Brand Elements That Can Be Customized in a Chat Window">
          <caption>Brand Elements That Can Be Customized in a Chat Window</caption>
          <colgroup>
            <col style="width:33.33333333333333%">
            <col style="width:66.66666666666666%">
          </colgroup>
          <thead class="slds-text-title_caps ">
            <tr class="">
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d5251e188">Brand Element</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d5251e191">Description</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="Brand Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e188 ">Brand Primary</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e191 ">
                <div>
                  <p>Sets the color of the:</p>
                  <ul>
                    <li>Pre-chat image backdrop</li>
                    <li>Pop message outlines</li>
                    <li>Loading animation</li>
                    <li>Loading animation when chat is minimized</li>
                  </ul>
                </div>
                <p>By default, the color is set to hex #222222 (Night Black).</p>
                <p style="margin-bottom:0;">In the screenshots, brand primary elements are indicated by [1].</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Brand Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e188 ">Brand Secondary</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e191 ">
                <div>
                  <p>Sets the color of the:</p>
                  <ul>
                    <li>Action buttons, such as “Start Chatting” or “Chat with an Expert”</li>
                    <li>Input field focus</li>
                    <li>Send button</li>
                    <li>Guest message chat payload</li>
                    <li>Secondary buttons</li>
                    <li>Chat when it is minimized and there’s a new message</li>
                  </ul>
                </div>
                <p>By default, the color is set to #005290 (Nimbostratus Blue).</p>
                <p style="margin-bottom:0;">In the screenshots, brand secondary elements are indicated by [2].</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Brand Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e188 ">Contrast Primary</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e191 ">
                <div>
                  <p>Sets the color of the:</p>
                  <ul>
                    <li>Chat body text</li>
                    <li>Chat input text</li>
                  </ul>
                </div>
                <p>By default, the color is set to #333333 (dark gray).</p>
                <p>The background color is white.</p>
                <p style="margin-bottom:0;">In the screenshots, contrast primary elements are indicated by [3].</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Brand Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e188 ">Header</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e191 ">
                <div>
                  <p>Sets the color of the:</p>
                  <ul>
                    <li>Chat header bar</li>
                    <li>Chat button when the chat is minimized</li>
                  </ul>
                </div>
                <p>By default, the color is set to hex #222222 (Night Black).</p>
                <p style="margin-bottom:0;">In the screenshots, the header element is indicated by [4].</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Brand Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e188 ">Header Text</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e191 ">
                <div>
                  <p>Sets the color of the: </p>
                  <ul>
                    <li>Chat header text and icon</li>
                  </ul>
                </div>
                <p>By default, the color is set to #222222 (Night Black). </p>
                <p style="margin-bottom:0;">In the screenshots, the header text element is indicated by [5].</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Brand Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e188 ">Header Alternate</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e191 ">
                <div>
                  <p>Sets the color of the: </p>
                  <ul>
                    <li>Chat state waiting header </li>
                    <li>Chat state header and announcement area</li>
                  </ul>
                </div>
                <p>By default, the color is set to #cb2b19 (red).</p>
                <p style="margin-bottom:0;">In the screenshots, the header alternate is indicated by [6].</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Brand Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e188 ">Font</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5251e191 ">
                <p>Sets the font used in the chat widget.</p>
                <p>The following fonts are supported in mobile browsers for both iOS and Android: Georgia,
                  Times New Roman, Arial, Courier New</p>
                <p>The following fonts are supported in mobile browsers for iOS only: Trebuchet MS,
                  Verdana, and Lucida Console</p>
                <div class="slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium">
                  <div class="slds-media slds-media_responsive">
                    <div class="slds-media__figure"><span class="slds-icon_container slds-icon_container_circle slds-icon-note-note"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/images/icon_note.png" alt="Note"></span></div>
                    <div class="slds-media__body" style="padding-top:.5rem;padding-bottom:.5rem;"><span class="slds-text-title_caps">Note</span> If you select a font that isn’t available for a chat visitor’s mobile browser, the
                      browser’s default font is displayed.</div>
                  </div>
                </div>
              </td>

            </tr>
          </tbody>
        </table>

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/images/icon_important.png)

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.

- **[Customize Chat Window Branding for a Experience Site](https://help.salesforce.com/s/articleView?id=service.embedded_chat_communities_branding.htm&release=264.0.0&type=5)**  
    Select the chat window colors and font to reflect your company’s brand identity on an Experience Cloud site.

#### See Also

- [Add Your Embedded Chat to a Website](https://help.salesforce.com/s/articleView?id=service.snapins_chat_get_code.htm&release=264.0.0&type=5 "Salesforce generates a unique Embedded Service code snippet from the information you provide during setup. Copy and paste the code snippet to include chat on your web pages. Add the optional meta tag code snippet to improve performance for both mobile and desktop.")
- [Customize the Embedded Service Code Snippet](https://help.salesforce.com/s/articleView?id=service.snapins_chat_customize_code.htm&release=264.0.0&type=5 "Use a text or HTML editor to customize the optional parameters in the Embedded Service code snippet.")
- [Customize Additional Chat Branding](https://help.salesforce.com/s/articleView?id=service.snapins_customize_additional_branding.htm&release=264.0.0&type=5 "Set the base font size, width and height, and images for your Embedded Chat deployment.")