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 behaviour works across your site. Also, if at some point in the future you adopt other ACS 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 ACS 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 ACS scripts, or the Foresee script. It will continue retrieving the page and your other images and scripts, and download the ACS files in the background. This is beneficial for site performance.

Payload Size

The ACS 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 ACS 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.

Cacheing

ACS resources also use very aggressive cacheing – 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 ACS 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 ACS 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