Changing the widget according to status via API Follow

First, the API to change the image on the badge:

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

Next is our API for having a function run depending on your status

$zopim.livechat.setOnStatus(s)

function s(t){

if (status=='online')

{}

if (status=='away')

{}

if (status=='offline')

{}

}

 

When we put them together, and make an actual script out of it, we get something like the following:

<script type="text/javascript">

$zopim.livechat.setOnStatus( badge );

function badge( status ) {

if ( status == 'online' )

{

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

}

else if ( status == 'away' )

{

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

}

else if ( status == 'offline' )

{

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

}

}

</script>

 

With the above script, the image on your badge will change depending your status, depending on what you set under each respective status.

 

You can have other APIs run in place of our badge.setImage API if you wanted, here are a few examples:

$zopim.livechat.badge.setColor('#AABBCC');

$zopim.livechat.badge.setLayout('text_only');

$zopim.livechat.badge.hide();

 

What's neat is that you can use multiple APIs under each respective status section, the syntax'll look something like this:

if ( status == 'online' )

{

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

$zopim.livechat.badge.setColor('#AABBCC');

}

 

Changing the Image of your Custom Chat Button

 As for changing the image you have set up as your chat button, which we talked about over here, you just need to add an ID to your image, like this:

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

 

Whatever you set in as the image above'll just be a placeholder, we'll be using the setOnStatus API to have the image change depending on your Status, it'll look something like this:

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

 

Using the above, your custom chat button/image'll now automatically change depending on what you set as the images under each respective status's section.

Have more questions? Submit a request

Please sign in to leave a comment.

Powered by Zendesk