Changing the color of the Web Widget/Chat Widget

Have more questions? Submit a request

12 Comments

  • Simon
    Comment actions Permalink

    Hi Rebecca,

    I just can't find the where I can adapt the colors from the widget. It's really hard to find. Why don't you post an URL? It's really strange. Thanks for helping me. 

    Cheers,

    Simon 

    0
  • Mark Hinson
    Comment actions Permalink

    hi Simon,

    Login to Zendesk Support as an Administrator.

    Go here Zendesk Settings > Channels > Widgets

    or use this link, substitute your own account.
    https://<your_account>.zendesk.com/agent/admin/widget 

    On right hand side look for Theme Color, by default it is green, so it looks like all the other buttons, so can get lost. Click on it and enter the hex values of the RGB.

    thanks, Mark

     

    0
  • Richard Garnett
    Comment actions Permalink

    Is there any way to change the font of the Widget?

    0
  • Drew
    Comment actions Permalink

    Is it possible to make this more difficult? I love thanks that waste my time!

     

    1
  • Jennifer Rowe
    Comment actions Permalink

    Hi Lee,

    Sorry about that! I've fixed the link above.

    And here is is for easy reference:

    https://developer.zendesk.com/embeddables/docs/widget/settings#color

     

    0
  • Matt
    Comment actions Permalink

    Why is this so difficult? Nothing seems to work! All I need to do is change the text color of the launcher. 

    Zendesk Settings > Channels > Widgets Does not work!

    <script type="text/javascript">
    window.zESettings = {
      webWidget: {
        color: { theme: '#78a300' }
      }
    };
    </script>

    Also does NOT work.

    Please advise.

    0
  • Devan - Community Manager
    Comment actions Permalink

    Hello Matt,

    Could you try using the color #78A301 and see if that ends up working on your end?

    0
  • Joe
    Comment actions Permalink

    Anyone have any tips on how to add a :hover/onmouseover color change? I'd love to make the widget match the branding of our site, and all of our buttons change color when you hover over or click on them.

    I can change the color of the launcher, but can't make it dynamically interact with the mouse.

    0
  • Jon Bowles
    Comment actions Permalink

    How do I make the text in the widget white?? Ive tried adding this to the "optional code for customisation" of my wordpress plugin but nothing??

    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    color: { theme: '#ffff' }
    }
    };
    </script>

    0
  • Devan - Community Manager
    Comment actions Permalink

    Hello Jon Bowles,

    It looks like we are having a bit of trouble finding you a response from the Community. I'll go ahead and add this to our next roundup so we can get a bit more visibility on your post!

    Best regards. 

    0
  • Simon Blouner
    Comment actions Permalink

    Hey Jon Bowles,

    It seems like your not using the correct syntax.
    Can I have you try the following?

    window.zESettings = {
       "webWidget": {
          "color": {
             "launcherText": "#ffffff"
          }
       }
    }

    #helpsome regards,
    Simon Blouner
    Zendesk Consultant @ helphouse.io

    0

Please sign in to leave a comment.

Powered by Zendesk