Technical web page Javascript snippet deployment

Introduction

This document describes how to deploy Toonimo inside your website.
The code snippet is generated by the Toonimo Solution Delivery team assigned to your account (the team also supports the code deployment process). This document also outlines the technical means of sending advanced parameters to the Toonimo servers, which are deployed to trigger more advanced use cases.

Why do I need to do this?

The snippet triggers the browser to “talk” to our servers in order to enable the website guidance. This forms the only real technical element of deploying the Toonimo solution. The code itself is a small code snippet that needs to be put inside all of the pages in the target area.

What does it do?

When a page that contains the Toonimo snippet is loaded by an end user’s browser, it loads Toonimo’s JS code from CDN or from the browser’s cache (if already loaded before).
Then it checks whether a walkthrough should be played on this page, and only if it should, it prepares for walkthrough execution, starts buffering the relevant sound and shows a trigger button.

How do I implement it?

Standard implementation
Toonimo snippet is a simple script tag that should be put right before the body closing tag “</body>” of your html page:
codeline_placement
The snippet should ideally be added to your global website’s footer tag in order to get better analytics.
If it’s not possible to add it to all of the pages on your website, you can add it only to the pages that you are intending to use Toonimo on.

Non standard implementations
  • It is possible to implement the snippet in Wordpress pages.
  • It is possible to implement the snippet inside your own JS file. The only thing you need to take care of, is that the file loads after the body was loaded (load your file after document.ready event or you can simply put it inside the body tag instead of the head tag).
  • It is possible to implement the snippet inside Google Tag Manager:
    codeline_placement_gtm

Advanced - some more technical details


Loading options
The Toonimo code is loaded asynchronously and has three configurable server-side options to decide how the code is loaded:
  • jQuery’s Document Ready - The Toonimo assets will only run once the page DOM is ready for JavaScript code to execute.
  • Javascript’s Window Load - The Toonimo assets included inside “window.load” will run once the entire page (images or iframes), not when the DOM, is ready.
  • Interactive mode readyState - The Toonimo assets will load once the webpage has finished parsing but still loading sub-resources.

Custom Page Events
Toonimo provides the ability to pass any custom information from the webpage to the Toonimo service. This information can be used to trigger custom use cases.
For example:
Toonimo.Loader.setApiVar('age', 33);
Toonimo.Loader.setApiVar(gender', ‘MALE’);

API
Toonimo provides an API in order to be able to control the walkthrough execution and to receive events about the walkthrough progression, which can be used to send self-analytics or to make an advanced integration of the walkthrough to the page’s behavior.
For more details, ask your success manager about it.

Example snippet:
Notice, this is just a demo snippet.
Each customer/project has a different snippet.
<script>
var TMO_dec=decodeURIComponent||unescape; var TMO_scr = document.createElement('script'); TMO_scr.async = true; var TMO_scrT = TMO_dec('%0A%2F%2A%20Powered%20by%20Toonimo%20%2A%2F%0A%28function%28i%2Cs%2Co%2Cmp%2Crv%2Cc1%2Cc2%2Cg%2Ca%2Cm%2Cf%2Ct1%2Ct2%2Crvcdn%29%7Bi.TMO_jsFetchTimeStart%3D%2Bnew%20Date%28%29%3Bi.TMO_mp%3Dmp%2Brv%3Bm%3Ds.getElementsByTagName%28o%29%5B0%5D%3Brv%3Frvcdn%3D%27%3F%27%2Brv%3Arvcdn%3D%27%27%3B%0Ac1%3D%27%2F%2Fcdn.toonimo.com%2Fdcode%2Fprod%2Flatest.js%27%2Brvcdn%3Bc2%3D%27%2F%2Fserver.toonimo.com%2Ftoonimo_loader.php%3Ftype%3Dcode%27%2Bmp%2Brv%3Bd1%3D%27%2F%2Fcdn.toonimo.com%2Fdsettings%2Fprod%2F192f712c-2e06-4dea-9152-ddcd12f3712e%2Fdomain_2848.js%27%2Brvcdn%3Bd2%3D%27%2F%2Fserver.toonimo.com%2Ftoonimo_loader.php%3Ftype%3Ddomain_settings%26toonimo_token%3D192f712c-2e06-4dea-9152-ddcd12f3712e%26domain_id%3D2848%27%2Bmp%2Brv%3Bt1%3D%27toonimo_obf%27%3Bt2%3D%27toonimo_server%27%3B%0Af%3Dfunction%28ar%29%7Ba%3Ds.createElement%28o%29%3Ba.async%3D1%3Ba.src%3Dar%3Bm.parentNode.insertBefore%28a%2Cm%29%7D%3B%0A%28%28location.search.indexOf%28t1%29%3E-1%7C%7Cc2.indexOf%28t1%29%3E-1%7C%7Clocation.search.indexOf%28t2%29%3E-1%7C%7Cc2.indexOf%28t2%29%3E-1%29%3Ff%28c2%29%3Af%28c1%29%29%3B%0A%28%28location.search.indexOf%28t2%29%3E-1%7C%7Cd2.indexOf%28t2%29%3E-1%29%3Ff%28d2%29%3Af%28d1%29%29%3B%0A%7D%29%28window%2Cdocument%2C%27script%27%2C%27%27%2C%27%27%29%3B%0A'); try{TMO_scr.innerHTML=TMO_scrT}catch(ex){try{TMO_scr.text=TMO_scrT}catch(ex){try{TMO_scr.textContent=TMO_scrT}catch(ex){}}} document.body.appendChild(TMO_scr);
</script>

If you would like any additional information about the Toonimo snippet implementation, API details or variable parameters, please contact us on: support@toonimo.com