Making elements dynamic based on agent status

Note: This guide applies only to the Chat widget from Chat-only accounts, not from Chat+Support accounts. See About Chat account types in Zendesk help.

Making elements dynamic based on agent status

The livechat.setOnStatus() method lets you run an event handler when the agent status changes.

$zopim.livechat.setOnStatus(handler);

The method takes a function as an argument. The function receives the status ('online', 'away', or 'offline') as an argument when it runs.

function handler(status) {
  // use value of status
}

You can use the status argument to dynamically change elements.

Example: Making the agent badge dynamic

Suppose you want to change the agent badge when the agent status changes. The following method is used to set the badge image:

$zopim.livechat.badge.setImage('IMG_URL');

To make the badge image dynamic, define a function that conditionally sets different images, then provide the function as an argument to the setOnStatus() method. Example:

<script type="text/javascript">

  $zopim.livechat.setOnStatus(badge);

  function badge(status) {
    if (status == 'online') {
      $zopim.livechat.badge.setImage('ACTIVE_IMG_URL');
    }
    else if (status == 'away') {
      $zopim.livechat.badge.setImage('AWAY_IMG_URL');
    }
    else if (status == 'offline') {
      $zopim.livechat.badge.setImage('OFFLINE_IMG_URL');
    }
  }

</script>

The badge image changes depending on the value of status.

You can use the same approach for other badge properties. Here are a few examples:

• $zopim.livechat.badge.setColor('#AABBCC');
• $zopim.livechat.badge.setLayout('text_only');
• $zopim.livechat.badge.hide();

You can set multiple properties for each status:

if (status == 'online') {
  $zopim.livechat.badge.setImage('INSERT_IMG_URL');
  $zopim.livechat.badge.setColor('#AABBCC');
}
...

Example: Making a custom chat button dynamic

You can use the same approach to create a custom chat button that changes in response to changes to the agent status.

First, define an id attribute for the button image to be able to select it from a script:

<a href="javascript:$zopim.livechat.window.toggle()"><img id="IMAGE" src="IMG_SRC"/></a>

The default image is only a placeholder. The setOnStatus() method will change the image depending on agent status.

<script type="text/javascript">

$zopim(function() {
  $zopim.livechat.setOnStatus(change_chat_img);
});

function change_chat_img(status) {
  var img = document.getElementById('IMAGE');
  if (status=='online') {
    img.src = 'ONLINE_IMG_SRC';
  }
  else if (status=='away') {
    img.src = 'AWAY_IMG_SRC';
  }
  else if (status=='offline') {
    img.src = 'OFFLINE_IMG_SRC';
  }
}

</script>

The button image changes depending on the value of status.