Displaying custom image statuses

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.

You can place a customized image button on your website to show the current status of your widget.

First, you need to place the API code within the image button. The code is as follows:

<a href="javascript:$zopim.livechat.window.show()"><img id=chat\_img src="ADD IMG SRC HERE"/></a>

Place the image where it says "ADD IMG SRC HERE". Example source: www.yourdomain.com/image/btn_online.png. You can place the image anywhere on your website. 

 Next, put in a code that tells the image to change when the status changes. Be sure to place the code after the widget code. 

<script type="text/javascript">$zopim(function() {

$zopim.livechat.setOnStatus(change\_chat\_img);  
});

function change\_chat\_img(status) {

var img = document.getElementById('chat\_img');

if (status=='online')

img.src = 'ADD ONLINE IMG SRC HERE'; //place online image source here

else if (status=='away')

img.src = 'ADD AWAY IMG SRC HERE'; //place away image source here

else if (status=='offline')

img.src = 'ADD OFFLINE IMG SRC HERE'; //place offline image source here

}

</script>

 Once it's correctly set up, the image should reflect the current status of the widget, like in the example below.