How do I change the color of the Web Widget (Classic)?

image avatar

Zendesk Team

Edited Apr 11, 2025

0

7

7 comments

Date
    Newest
      image avatar

      Sabra

      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

      image avatar

      Mikhail Tyuftyaev

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

      0

      image avatar

      Dave Dyson

      Thanks Sam!

      0

      image avatar

      Sam Livingstone

      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

      image avatar

      Kate Ambash

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

      0

      image avatar

      Dave Dyson

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

      0

      image avatar

      Sam Livingstone

      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

      Sign in to leave a comment.

      Account details

      Sign in to see details

      Sign in to see your account details at a glance

      Sign in

      ADDITIONAL CONTENT