ForeSee Hosted Code - The Embed Snippet

Below is the snippet of HTML that you’ll need to add to your website template. It needs to appear on every page of your website, ideally in the <HEAD> area. Don’t forget to include it on special areas of the site like in the checkout process and ‘logged in’ areas. This is so that we have flexibility in how the triggering behavior works across your site. Also, if at some point in the future you adopt other ForeSee products, it greatly simplifies the process of deploying them, since the code will already exist on all the pages.

Here is an example of the ForeSee embed snippet:

<script>
// Instructions: please embed this snippet directly into every page in your
// website template. For optimal performance, this must be embedded directly into
// the template, not referenced as an external file.

// Answers Cloud Services Embed Script v1.02
// DO NOT MODIFY BELOW THIS LINE *****************************************
;(function (g) {
    var d = document, i, am = d.createElement('script'), h = d.head || d.getElementsByTagName("head")[0],
            aex = {
                "src": "[PUT YOUR URL HERE]",
                "type": "text/javascript",
                "async": "true",
                "data-vendor": "acs",
                "data-role": "gateway"
            };
    for (var attr in aex) { am.setAttribute(attr,aex[attr]); }
    h.appendChild(am);
    g['acsReady'] = function () {var aT = '__acsReady__', args = Array.prototype.slice.call(arguments, 0),k = setInterval(function () {if (typeof g[aT] === 'function') {clearInterval(k);for (i = 0; i < args.length; i++) {g[aT].call(g, function(fn) { return function() { setTimeout(fn, 1) };}(args[i]));}}}, 50);};
})(window);
// DO NOT MODIFY ABOVE THIS LINE *****************************************
</script>

Asynchronous Loading

The embed snippet has a couple convenient characteristics. First and foremost, it is non-blocking (asynchronous), meaning that the browser will not wait to download the Foresee script. It will continue retrieving the page and your other images and scripts, and download the ForeSee files in the background. This is beneficial for site performance.

Payload Size

The ForeSee script that it loads is also quite small – usually around ~7Kb, depending on the customer. The ForeSee script that eventually is loaded will be larger, although this will also be an asynchronous request, having minimal impact on page load. All ForeSee resources that are loaded also provide gZip compression when supported by the browser. This results in lower overall payload size – which is particularly important for mobile or on dial-up connections.

Caching

ForeSee resources also use very aggressive caching – both in the browser and on the server. We attempt to minimize redundant requests against the CDN to maximize page load performance in all situations. Read this article for more specifics on our cache behaviour.

Browser Support

The ForeSee gateway script is built on top of an industry-standard AMD module loading utility, and has undergone browser testing across a wide array of browsers and devices. Our supported browser set for the embed snippet and gateway script is:

  • iOS 6+ Mobile Safari
  • Android 2.3+ Browser
  • Firefox 3+
  • Chrome 14+
  • IE 6+ (including IE10 Metro Mode)
  • Opera 10.6+
  • Safari 4+

API Usage

Because the ForeSee client code is loaded asynchronously, we provide a callback acsReady() that you can use to guarantee that any interaction you may have with our JavaScript API’s will wait until our modules have finished loading. You would use this the same way that you would use a DomReady callback to guarantee that code runs after the page is ready. Here’s an example:

<script>
acsReady(function() {
   // Run this function to simulate a page load
   FSR.run();
});
</script>

Other articles in this section:

  1. Security & Reliability
  2. Deployment Options
  3. The Embed Snippet (current article)
  4. Self Hosting Code
  5. Calling API Methods