Displaying custom image statuses via API Follow

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 (stats=='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. 

Have more questions? Submit a request

Please sign in to leave a comment.

Powered by Zendesk