English (US)
  1. Zendesk help
  2. Web Widget
  3. Web Widget advice and troubleshooting

How do I change the color of the legacy Chat widget and Web Widget (Classic)?

Zendesk Team
  • Edited

Question

How do I change the color of the legacy Chat widget or the Web Widget (Classic)?

Answer

Tip: Determine if you have the legacy Chat Widget or the Web Widget (Classic) by referencing this article: Which widget do I have with my Zendesk account?

If you have the Web Widget (Classic)

  1. Go to Admin Center, navigate to Channel > Classic > Web Widget page.
  2. Under Style tab, select the color for your Web Widget (Classic) components using the Primary color setting.
  3. If you untick the Use default color based on theme option, the select the color of the text in the widget.
  4. Click Save.

For more information about both of these settings, see the article: Configuring components in the Web Widget (Classic).

If you have the legacy Chat widget

  1. In Zendesk Chat, go to Settings > Widget > Appearance.
  2. Under the Chat window, use the Theme color to select a new widget color.
  3. Click Save changes.

For more information on these settings in Chat, see this article: Customizing the appearance of the widget.

If you want to make more specific or custom changes to the color of different widget components, see the articles: Advanced customization of your Web Widget (Classic) and the developer documentation about the color property.

Return to top

7 Comments

  • Sam - Dynanet

    The syntax mentioned in the developer website of Zendesk is not right (https://developer.zendesk.com/api-reference/widget/settings/#color)

     

    This piece of code worked for me for changing the widget text colour.

    1. In Guide, click the Customize design icon ().
    2. Click the theme you want to edit to open it.
    3. Click the options menu, then select Edit Code.
    4. In the Templates section, click header.hbs to modify the code.
    5. Place the code below the first <header class="header"> line, and anywhere above the final header line.
    <script type="text/javascript">
     window.zESettings = {
       "webWidget": {
          "color": {
             "launcherText": "#ffffff"
          }
       }
    }
    </script>
    0
  • Dave Dyson

    Thanks for this feedback, Sam & Simon! I've passed this along to our developer docs team.

    0
  • Kate Ambash

    how do i change the chat widget from "support" to "chat" ?

    0
  • Sam - Dynanet

    Hey Kate,

    I have put below the piece of code that can be used to change the Chat Widget's Label Text to Chat. ( You can change it to be anything you want in the code)

    This piece of code worked for me for changing the widget label text.

    1. In Guide, click the Customize design icon ().
    2. Click the theme you want to edit to open it.
    3. Click the options menu, then select Edit Code.
    4. In the Templates section, click header.hbs to modify the code.
    5. Place the code below the first <header class="header"> line, and anywhere above the final header line.
    <script type="text/javascript">
     window.zESettings = {
       "webWidget": {
          "launcher": {
    	     "label":   {
                'en-US': 'Chat',
                 fr: "Besoin d'aide?"
            }
          }
        }
      };
    </script>
    0
  • Dave Dyson

    Thanks Sam!

    0
  • Mikhail Tyuftyaev

    Hi everybody. I want to change the text color and stroke in the widget. How do I do this?

    0
  • Sabra
    Zendesk Customer Care

    Hey Mikhail Tyuftyaev!  You can change the color of the text in the Widget by adjusting the Theme text color. You may need to uncheck the "Use default color based on theme" option (dark blue arrow) in order to see the color picker for the text color (light blue arrow). It is not possible at this time to change the stroke.

    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk