Using SitePal for the WhosOn Chat Operator Status

I've had a few requests recently to show a SitePal rep when you are available to talk. You can do this with some custom javascript code. An extension to this is to make it so that if the SitePal is clicked, it opens the chat window.



You will have your standard embed code from SitePal - this will look like:

<script language="JavaScript" type="text/javascript" src="http://vhss-d.oddcast.com/vhost_embed_functions_v2.php?acc=100000&js=1"></script><script language="JavaScript" type="text/javascript">AC_VHost_Embed(100000,300,400,'',1,1, 100000, 0,1,0,'aaaaaaaaaaaaaaaaaaaaa',9);</script>


This is made up of two components - the loading of the javascript from the site, and the call to create the window. We want to create this window when the operator status is online.



You will also have your WhosOn code, which will look like this:

<!-- Embedded WhosOn: Insert the script below at the point on your page where you want the Click To Chat link to appear -->
<script type='text/javascript' src='http://yourwhosongateway.com/include.js?domain=www.domain.com'></script>
<script type='text/javascript' >
if(typeof sWOTrackPage=='function')sWOTrackPage();
</script>
<!-- End of embedded WhosOn -->



To prepare in your WhosOn, first upload your normal online and offline images into your website - these will no longer be used directly in WhosOn.

In your site properties -> Visitor Chat -> Display Nothing When Off Line

This will mean that the WhosOn code will return a 1x1 pixel when offline, and we can test for this in the javascript.


We leave the first line of WhosOn code in place:

<!-- Embedded WhosOn: Insert the script below at the point on your page where you want the Click To Chat link to appear -->
<script type='text/javascript' src='http://yourwhosongateway.com/include.js?domain=www.domain.com'></script>


but we are going to override some of the other things - this is the standard custom code for execution / override of what happens when the status is returned.

<script>
function overrideLoad()
{
if (sWOImage.width == 1)
{
// show offline image
var sWOOffline = document.createElement('img');
sWOOffline.src = "/images/offline.gif";
sWOChatElement.appendChild(sWOOffline);
}
else
{
var sWOOnline = document.createElement('img');
sWOOnline.src = "/images/online.gif";
sWOChatElement.appendChild(sWOOnline);sWOChatElement.onclick=sWOStartChat;
}
}
if(typeof sWOTrackPage=='function')
{
sWOImageLoaded=overrideLoad;
sWOTrackPage();
}
</script>



Now we need to add in the call to the SitePal.


The complete code will look like:


<script language="JavaScript" type="text/javascript" src="http://vhss-d.oddcast.com/vhost_embed_functions_v2.php?acc=100000&js=1">
<!-- Embedded WhosOn: Insert the script below at the point on your page where you want the Click To Chat link to appear -->
<script type='text/javascript' src='http://yourwhosongateway.com/include.js?domain=www.domain.com'></script>
<script>
function overrideLoad()
{
if (sWOImage.width == 1)
{
// show offline image
var sWOOffline = document.createElement('img');
sWOOffline.src = "/images/offline.gif";
sWOChatElement.appendChild(sWOOffline);
}
else
{
AC_VHost_Embed(100000,300,400,'',1,1, 100000, 0,1,0,'aaaaaaaaaaaaaaaaaaaaa',9);
var sWOOnline = document.createElement('img');
sWOOnline.src = "/images/online.gif";
sWOChatElement.appendChild(sWOOnline);sWOChatElement.onclick=sWOStartChat;
}
}
if(typeof sWOTrackPage=='function')
{
sWOImageLoaded=overrideLoad;
sWOTrackPage();
}
</script>


You can see that we have called the AC_VHost_Embed function as part of the online status call.


This will mean that your SitePal will show, and it will normally say something like "click below to chat to us" or "click the 'online' link on the right to chat to us"

You can also get the scene to directly send someone to the chat when it is clicked on.
First, we need to generate the click link in WhosOn - go to site properties -> visitor chat -> manual links, and you will get a cut & paste link like:

<a href="https://chatserver.whoson.com/chat/chatstart.htm?domain=www.domain.com" onclick="javascript:window.open('https://chatserver.whoson.com/chat/chatstart.htm?domain=www.domain.com','wochat','width=484,height=361');return false;">Click To Chat</a>


You only need the href part of this:
https://chatserver.whoson.com/chat/chatstart.htm?domain=www.domain.com

Then, when you are creating the scene in SitePal, if you go to the Scene Options, then put the href part of the link into the URL: box.

Then you need to check "clicking on the scene opens the link", and the "open in new window" option. Now when someone clicks on your new SitePal scene, it will open up the WhosOn chat window.

You can see the areas for this in the SitePal User Guide, section 2.5