Zopim is now called Zendesk Chat. All API functionality will continue to work as normal and the namespace will not change in the immediate future.

Javascript API

$zopim.livechat.theme

Customize the widget’s appearance.

Summary
$zopim.livechat.themeCustomize the widget’s appearance.
Functions
setThemeSet the widget theme.
setColorSet the color of a widget component.
setColorsSet colors for different components of the widget
setFontConfigSet the widget font.
reloadApply theme settings.
setProfileCardConfigSet display of various components of the profile card.

Functions

setTheme

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

themeName of theme to be set (string)

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>

setColor

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

colorColor to set, in hexadecimal format (‘#AABBCC’)
name(Optional) Component on which to set the specified color.  Supported values: primary, badge, bubble.  Default: primary

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>

setColors

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

objectObject containing a map of components to colors (in hexadecimal format).  See setColor for a list of supported components.

Example

<script>

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

</script>

setFontConfig

function setFontConfig(web_font_config,
font_family)

Set the widget font.  (Premium/Advanced 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 Zopim Live Chat Script.  This API also does not apply in popout mode.

Parameters

web_font_configan Object following the webfontloader format. see https://github.com/typekit/webfontloader/#modules
font_familya string to be used for the CSS font-family property.  The default Zopim fonts will be postfixed automatically, but you should specify your own preferred fallback fonts.

Example

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

reload

function reload()

Apply theme settings.

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

setProfileCardConfig

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

objectObject containing a map of components to boolean values.

Allowed keys

avatar (bool)Show or hide the avatar image on the profile card (true or false)
title (bool)Show or hide the name and title displayed on profile card (true or false)
rating (bool)Show or hide the rating (thumbs up/thumbs down) on the profile card (true or false)

Example

<script>

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

</script>
function setColor(color,
name)
Set the color of a widget component.
function setColors(colors)
Set colors for different components of the widget
function setFontConfig(web_font_config,
font_family)
Set the widget font.
function reload()
Apply theme settings.
function setProfileCardConfig(settings)
Set display of various components of the profile card.