How to customize the look and feel of the Chat widget using zopim APIs

Note: this applies to the chat-only widget. If you use the Web Widget, see this article: How to use Zopim chat code in the Web Widget. Find out which widget you have in this article: Which widget do I have with my Zendesk account and website?

You can use the Chat widget JavaScript API to customize a number of things about your Chat widget including color, language, text, image, and more. Use the code below as a jumping off point to get started.

<script>

  $zopim(function() {

    $zopim.livechat.setLanguage('xx');

    $zopim.livechat.badge.setColor('#000000');

    $zopim.livechat.button.setColor('#FFCC00');

    $zopim.livechat.window.setColor('#FFCC00');

    $zopim.livechat.theme.reload();

    $zopim.livechat.badge.setText('TEXT HERE');

    $zopim.livechat.badge.setImage('image source here');

    $zopim.livechat.concierge.setAvatar('image source here');

    $zopim.livechat.concierge.setName('TEXT HERE');

    $zopim.livechat.concierge.setTitle('TEXT HERE');

    $zopim.livechat.window.setTitle('TEXT HERE');

    $zopim.livechat.setGreetings({

          'online': 'TEXT HERE',

          'offline': 'TEXT HERE'
      });
  });
</script>