Parker Software Ltd Homepage
Forum Home Forum Home > WhosOn Visitor Tracking & Live Chat > FAQ's > Advanced FAQ's
  New Posts New Posts RSS Feed: More Advanced Embedding of Code
  FAQ FAQ  Forum Search   Calendar   Register Register  Login Login

More Advanced Embedding of Code
 Post Reply Post Reply
Author
Message
  Share Topic Share Topic  Topic Search Topic Search  Topic Options Topic Options
Daniel View Drop Down
Admin Group
Admin Group
Avatar
Technical Director

Joined: 19 Dec 2006
Location: Stoke-on-Trent
Posts: 875 		Post Options Post Options   Quote Daniel Quote  Post ReplyReply Direct Link To This Post Topic: More Advanced Embedding of Code
    Posted: 19 Jul 2010 at 10:46am

Method 1, default:

Up side - easiest to use / embed

Down side - may slow page slightly due to script rendering, may cause issue if gateway unavailable.

<!-- 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://hostedusa3.whoson.com/include.js?domain=www.testing.com'></script>
<script type='text/javascript' >
      if (typeof
sWOTrackPage == 'function') sWOTrackPage();
</script>
<!-- End of embedded WhosOn -->

Method 2

Up side - nearly as easy to do as above, and as good in terms of cross browser support

Down side - image can load later, so rendering changes have to be taken into account

still can show loading ... (but after everything else is done).

<!-- Embedded WhosOn: Insert the Code below at the
point on your page where you want the Click To Chat link to appear -->
<a id='whoson_chat_link'></a>
<!-- End of embedded WhosOn -->
<!-- Embedded WhosOn: Insert the Script below at the bottom
of your page just above the </body> tag -->
<script type='text/javascript'
src='http://hostedusa3.whoson.com/include.js?domain=www.testing.com'></script>
<script type='text/javascript' >
      if (typeof
sWOTrackPage == 'function') sWOTrackPage();
</script>
<!-- End of embedded WhosOn -->

Method 2.1

Up side - as 2, but helps in case of rendering problems

Down side - still can show loading ... (but after everything else is done).

<!-- Embedded WhosOn: Insert the Code below at the
point on your page where you want the Click To Chat link to appear -->
<a id='whoson_chat_link'><img
src='/images/your-offline-image.gif' height='15px' width='180px' /></a>
<!-- End of embedded WhosOn -->
<!-- Embedded WhosOn: Insert the Script below at the
bottom of your page just above the </body> tag -->
<script type='text/javascript'
src='http://hostedusa3.whoson.com/include.js?domain=www.testing.com'></script>
<script type='text/javascript' >
      if (typeof
sWOTrackPage == 'function') sWOTrackPage();
</script>
<!-- End of embedded WhosOn -->


Method 3

Up side - as 2.1

Down Side - complex

<!-- Embedded WhosOn: Insert the Code below at the point on your page
where you want the Click To Chat link to appear -->
<a id='whoson_chat_link'><img
src='/images/your-offline-image.gif' height='15px' width='180px'
/></a>
<!-- End of embedded WhosOn -->
<!-- Embedded WhosOn: Insert the Script below at the bottom of your
page just above the </body> tag -->
<script type='text/javascript'
src='http://hostedusa3.whoson.com/include.js?domain=www.testing.com'></script>
<!-- End of embedded WhosOn -->
<!-- add this function call to your body.onload event: -->
if (typeof sWOTrackPage == 'function') sWOTrackPage();
<!-- end of function -->



Edited by Daniel - 23 Aug 2010 at 5:16pm
Daniel Tallentire
Support
Parker Software
Back to Top
Daniel View Drop Down
Admin Group
Admin Group
Avatar
Technical Director

Joined: 19 Dec 2006
Location: Stoke-on-Trent
Posts: 875 		Post Options Post Options   Quote Daniel Quote  Post ReplyReply Direct Link To This Post Posted: 23 Aug 2010 at 5:15pm
if you have jquery you can do even a little more.

<!-- Embedded WhosOn: Insert the Code below at the point on your page
where you want the Click To Chat link to appear -->
<a id='whoson_chat_link'><img src='/images/your-offline-image.gif' height='15px' width='180px' /></a>
<!-- End of embedded WhosOn -->

<!-- Add this section anywhere you like in some jquery - normally after $(document).ready -->
$.getScript('http://hostedusa3.whoson.com/include.js?domain=www.testing.com',sWOTrackPage);
<!-- end of section -->
Daniel Tallentire
Support
Parker Software
Back to Top
Daniel View Drop Down
Admin Group
Admin Group
Avatar
Technical Director

Joined: 19 Dec 2006
Location: Stoke-on-Trent
Posts: 875 		Post Options Post Options   Quote Daniel Quote  Post ReplyReply Direct Link To This Post Posted: 02 Nov 2010 at 12:01pm
The following code is fully asynchronous and doesn't require jQuery, however it is very complex.
It should go into the Head of the document.
<script type='text/javascript' lang='javascript'>
        var sWO={};
                sWO.i =  function()  {if (typeof(woAfterLoad) == 'function') {woAfterLoad(); woAfterLoad = null;}}
        sWO.o = function() { if (typeof(sWOInvite)=='undefined'||sWOInvite=='') {return;} sWOInvite='';sWOTrackPage(); 
            var iog = document.createElement('script');
            iog.type = 'text/javascript';
            iog.async = true;
            iog.onload = sWO.i;
                    iog.onreadystatechange = function () {
                                 if (this.readyState == 'loaded' || this.readyState == 'complete') sWO.i();
                                };
            iog.src='http://gateway.whoson.com/invite.js?domain=www.domain.com'
            var s = document.getElementsByTagName('body')[0]; 
            s.appendChild(iog, s); 
            }
        sWO.f = function() { var wog = document.createElement('script'); 
            wog.type = 'text/javascript'; 
            wog.async = true;
            wog.onload = sWO.o;
            wog.onreadystatechange = function () { if (this.readyState == 'loaded' || this.readyState == 'complete') sWO.o(); };
            wog.src = 'http://gateway.whoson.com/include.js?domain=www.domain.com'
            var s = document.getElementsByTagName('script')[0]; 
            s.parentNode.insertBefore(wog, s);
            };
        if (window.attachEvent) {window.attachEvent('onload', sWO.f);} else {window.addEventListener('load',sWO.f,false)}
</script>

You will have to add the HTML tag for the whoson_chat_link to place the image with this version of the code.


Edited by James Horton - 27 Oct 2011 at 12:51pm
Daniel Tallentire
Support
Parker Software
Back to Top
James Horton View Drop Down
Admin Group
Admin Group
Avatar
Technical Support

Joined: 01 Jun 2009
Location: Stoke-on-Trent
Posts: 275 		Post Options Post Options   Quote James Horton Quote  Post ReplyReply Direct Link To This Post Posted: 15 Dec 2010 at 9:26am
This can be useful when you are using a template design and only want to enter the code once in the main template of your page and reserve the chat link for specific pages, such as the Contact Us page:

Use the following link code to generate the chat link where you wish it to appear

<a id='whoson_chat_link'></a>

Embed the following code into your template or master page HTML content within the <body>

<!-- Embedded WhosOn: Insert the script below within the template or master page of your code within the body -->
<script type="text/javascript" src="http://gateway.test.com/include.js?domain=www.test.com"></script>
<script type="text/javascript">
if (document.getElementById('whoson_chat_link') == null) {
                sWOResponse='';           
} 
else {
                sWOResponse='Y';
}
if(typeof sWOTrackPage=='function')
</script>


Edited by James Horton - 14 Apr 2011 at 5:34pm
Best Regards,

James Horton
Technical Analyst
Parker Software
Back to Top
James Horton View Drop Down
Admin Group
Admin Group
Avatar
Technical Support

Joined: 01 Jun 2009
Location: Stoke-on-Trent
Posts: 275 		Post Options Post Options   Quote James Horton Quote  Post ReplyReply Direct Link To This Post Posted: 28 Apr 2011 at 5:33pm
Wish to control your own behaviour with the JavaScript depending on your operator status?

Here is a sample script so that you can do this:

Make sure that the 'Display Nothing When Offline' option is used from Options -> Site Properties -> Visitor Chat -> Graphics -> Operator Status.

<script src='http://{gateway}/include.js?domain={domain}'></script>
<script>
function overrideLoad()
{
if (sWOImage.width== 1)
 {
    // offline code
 }
 else
 {
    // online code
 }
}
sWOImageLoaded=overrideLoad;
if(typeof sWOTrackPage=='function')sWOTrackPage();</script>


For example:

<script src='http://{gateway}/include.js?domain={domain}'></script>
<script>
function overrideLoad()
{
if (sWOImage.width== 1)
{
                var sWOOffline = document.createElement('img');
                sWOOffline.src = "{offline image}";
                //sWOChatElement.appendChild(sWOOffline);
                sWOChatElement.href=sWOChatstart;sWOChatElement.target = "_blank";sWOChatElement.appendChild(sWOOffline);sWOChatElement.onclick=sWOStartChat;
                }
                else
                {
                var sWOOnline = document.createElement('img');
                sWOOnline.src = "{online image}";
                //sWOChatElement.appendChild(sWOOnline);sWOChatElement.onclick=sWOStartChat;
                sWOChatElement.href=sWOChatstart;sWOChatElement.target = "_blank";sWOChatElement.appendChild(sWOOnline);sWOChatElement.onclick=sWOStartChat;
}
}
sWOImageLoaded=overrideLoad;
if(typeof sWOTrackPage=='function')sWOTrackPage();</script>



Edited by James Horton - 10 Nov 2011 at 2:23pm
Best Regards,

James Horton
Technical Analyst
Parker Software
Back to Top
Daniel View Drop Down
Admin Group
Admin Group
Avatar
Technical Director

Joined: 19 Dec 2006
Location: Stoke-on-Trent
Posts: 875 		Post Options Post Options   Quote Daniel Quote  Post ReplyReply Direct Link To This Post Posted: 29 Sep 2011 at 11:50am
first, insert:
 
<a id='whoson_chat_link'></a>
 
In the page where you want the image to appear.
 
Then:
 
<script
type='text/javascript'> (function($) { $(document).ready(function() {
$.getScript('http://gatewaytest.whoson.com/include.js?domain=www.test.com',
function(d,t) { sWOInvite='N'; sWOTrackPage();
$.getScript('http://gatewaytest.whoson.com/invite.js?domain=www.test.com') }
); } ); } )(jQuery);</script>

 
If you don't want the click to chat, then replace the anchor link above with:
 
<a id='whoson_chat_link' style='visibility:hidden;display:none;'></a>

Edited by James Horton - 05 Oct 2011 at 3:55pm
Daniel Tallentire
Support
Parker Software
Back to Top
James Horton View Drop Down
Admin Group
Admin Group
Avatar
Technical Support

Joined: 01 Jun 2009
Location: Stoke-on-Trent
Posts: 275 		Post Options Post Options   Quote James Horton Quote  Post ReplyReply Direct Link To This Post Posted: 05 Oct 2011 at 3:48pm
We have been having requests for a floating live chat link in the browser window when a visitor is viewing your site, that follows the visitor's scrolling of the page.

This is possible using CSS and we have a sample piece of code that can be placed into the HTML's Body at the bottom of the document.

For this to work you will need to make sure that you have an image which is suitable to be presented in the side of your webpage as a floating item. Typically items that are small on width and greater in height. You will also need to make sure that you have set Display Nothing When Offline in your Visitor Chat settings of Site Properties. 

You will need to set the physical dimensions of the image here in the width and height areas:

<div id="liveHelp" style="position: fixed;right: 0px;top: 60px;width: 43px;height: 157px;"> 

Here is the code you will need:


<!-- Start of embedded WhosOn -->       
<div id="liveHelp" style="position: fixed;right: 0px;top: 60px;width: 43px;height: 157px;">
<a id='whoson_chat_link'></a>
</div>
<script type='text/javascript' src='https://gatewaytest.whoson.com/include.js?domain=www.test.com'></script>
        <script type='text/javascript' >
                    function sWOImLoadOvr() {
                                sWOChatElement.href=sWOChatstart;sWOChatElement.target = "_blank";sWOChatElement.appendChild(sWOImage);sWOChatElement.onclick=sWOStartChat;
                                if (sWOImage.width == 1) {
                                var cd = document.getElementById('liveHelp');
                                cd.style.visibility = 'hidden'; }
                    }
            sWOImageLoaded = sWOImLoadOvr;
            if (typeof sWOTrackPage == 'function') sWOTrackPage();
</script>
<!-- End of embedded WhosOn -->



Edited by James Horton - 05 Oct 2011 at 3:54pm
Best Regards,

James Horton
Technical Analyst
Parker Software
Back to Top
James Horton View Drop Down
Admin Group
Admin Group
Avatar
Technical Support

Joined: 01 Jun 2009
Location: Stoke-on-Trent
Posts: 275 		Post Options Post Options   Quote James Horton Quote  Post ReplyReply Direct Link To This Post Posted: 02 Nov 2011 at 3:42pm
The following example is for when you wish to have a timed event to happen within the tracking code. 

Say a visitor is to view a particular page for X amount of seconds you then wish for this to perhaps fire a Prospect Detection rule. This is possible by altering the sWOPage variable to something else or perhaps appending a value. 

In this example we will take the current sWOPage value and append ?timer=true as a query string value. So we are not modifying the current page that the visitor is viewing, but allowing you to then play with the combination of the On Page and Query String value to create a Prospect Rule for visitor detection or to send an invite.

This can be useful if you think that a particular page is confusing for a visitor and wish to engage with them view an invite to assist.

<script type='text/javascript' src='//gateway.domain.com/include.js?domain=www.test.com'></script>
<script type='text/javascript' >
if(typeof sWOTrackPage=='function')sWOTrackPage();
var t=setTimeout("sWOInvite='';sWOPage=sWOPage+'%3Ftimer%3Dtrue'; sWOTrackPage();", 30000);
</script>

The JavaScript timer function setTimeout is what we are using and the number of milliseconds is the length of time that is required before the function is met. 1000 milliseconds is 1 second so 30000 is 30 seconds.


Edited by James Horton - 02 Nov 2011 at 3:43pm
Best Regards,

James Horton
Technical Analyst
Parker Software
Back to Top
 Post Reply Post Reply

Forum Jump Forum Permissions View Drop Down



This page was generated in 0.094 seconds.
These are the forums for Parker Software, developers of Live Chat Software: WhosOn and Email Automation Software: Email2DB.