Set the widget theme.

Supported themes: simple, classic

Note: Calling this function will reload the theme and apply any pending theme settings.  For best performance, it is recommended that you call setColor/setColors before calling setTheme.

Parameters

Example

Select theme:
<a href="javascript:void($zopim.livechat.theme.setTheme('simple'))">Simple</a>
<a href="javascript:void($zopim.livechat.theme.setTheme('classic'))">Classic</a>

function setColor( color, name )

Set the color of a widget component.  If no component is specified, sets the primary color of the widget.

For lite accounts, always sets the widget and chat badge to the same color.

Note: reload must be called after setColor for changes to take effect (see example below).

Parameters

Example

<script>

  $zopim(function() {
    $zopim.livechat.theme.setColor('#23A2CC');
    $zopim.livechat.theme.reload(); // apply new theme settings
  });

</script>

Example

<script>

  $zopim(function() {
    $zopim.livechat.theme.setColor('#23A2CC', 'badge');
    $zopim.livechat.theme.reload(); // apply new theme settings
    $zopim.livechat.badge.show();
  });

</script>

function setColors( colors )

Set colors for different components of the widget

Note: reload must be called after setColor for changes to take effect (see example below).

Parameters

Example

<script>

  $zopim(function() {
    $zopim.livechat.theme.setColors({badge: '#FFFFFF', primary: '#000000'});
    $zopim.livechat.theme.reload(); // apply new theme settings
  });

</script>

function setFontConfig( web_font_config, font_family )

Set the widget font.  (Professional/Enterprise and Advanced/Premium (Legacy) customers only)

You can either load custom fonts defined in CSS stylesheets or use one of the following webfont providers.

Webfont providers supported

• Google Fonts
• Typekit
• Fontdeck

Read more on how to specify the webfont config at https://github.com/typekit/webfontloader/#modules

Note: only the settings in the “Modules” section are respected.  “Events”, “Timeouts” and “Iframes” settings are ignored.  The “families” and “testStrings” fields for the “custom” module settings are also ignored.

Important: This function must be inserted immediately after the Zendesk Chat Script.  This API also does not apply in popout mode.

Parameters

Example

#NORUN
<script>
  $zopim(function() {
    $zopim.livechat.theme.setFontConfig({
      google: {
        families: ['Lobster']
      }
    }, 'Lobster, cursive');
  });
</script>

function reload()

Apply theme settings.

Note: For best performance, call this function once after setting all the desired theme colors.

function setProfileCardConfig( settings )

Set display of various components of the profile card.  If all the components are hidden, the whole profile will be hidden.

Parameters

Allowed keys

Example

<script>

 $zopim(function() {
     $zopim.livechat.theme.setProfileCardConfig({
         avatar: true,
         title: false,
         rating: true
     });
 });

</script>