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.badge

Customize and control the chat badge.

Summary
$zopim.livechat.badgeCustomize and control the chat badge.
Functions
setLayoutSet the layout of the chat badge.
setImageSet the image displayed on the chat badge.
setColorSet the color of the chat badge.
setTextSet the text displayed on the chat badge.
showShow the chat badge.
hideHide the chat badge.

Functions

setLayout

Set the layout of the chat badge.

Parameters

layoutName of the layout (string).

Allowed values

  • image_right (Image on right, text on left)
  • image_left (Image on left, text on right)
  • image_only (Image only)
  • text_only (Text only)

Example

Select chat badge layout:
<a href="javascript:void($zopim.livechat.badge.setLayout('image_right'))">Image right</a>
<a href="javascript:void($zopim.livechat.badge.setLayout('image_left'))">Image left</a>
<a href="javascript:void($zopim.livechat.badge.setLayout('image_only'))">Image only</a>
<a href="javascript:void($zopim.livechat.badge.setLayout('text_only'))">Text only</a>

setImage

Set the image displayed on the chat badge.

This function has no effect if chat badge layout is “text_only”.

Parameters

pathURL of image to be used (string)

setColor

Set the color of the chat badge.

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

Parameters

colorBadge color, in hexadecimal format (‘#AABBCC’)

Examples

<script>

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

</script>

setText

function setText(text)

Set the text displayed on the chat badge.

This function has no effect if the chat badge layout is ‘image_only’.

Parameters

textChat badge text (string)

Example

<script>

  $zopim(function() {
    $zopim.livechat.badge.setText('Wanna talk?');
  });

</script>

show

function show()

Show the chat badge.

Note: It is recommended to show the chat badge only when the account status is “online”.

Example

<script>

  $zopim(function() {
    $zopim.livechat.badge.show();
  });

</script>

hide

function hide()

Hide the chat badge.

Example

<script>

  $zopim(function() {
    $zopim.livechat.badge.hide();
  });

</script>
function setText(text)
Set the text displayed on the chat badge.
function show()
Show the chat badge.
function hide()
Hide the chat badge.