Install on your website

Installing collection on your website takes one small script. You drop an async loader into the <head> of your pages, tell it your workspace ID, and it quietly fetches the collection runtime in the background. Once it's live, your surveys can appear and you can start pushing context about each visitor — all controlled from the dashboard.

This page walks you through the standard snippet, the alternative builds for specific stacks, and how to confirm everything loaded.

Before you start

You need one thing: your workspace ID. It identifies which workspace's collection the script should load, and you grab it from the dashboard.

Where's my workspace ID?

Open the Web integration page in the dashboard and open the Code dialog on your workspace card. Your workspace ID is baked into the snippet there, so you can copy the whole thing ready to paste — no need to assemble it by hand.

The standard snippet

This is the loader you'll use in most cases. It defines the config object, sets up the updateMetadata method, and injects the collection script asynchronously so it never blocks your page from rendering.

<script>
  (function (w, d, id, jq, c) {
    w.esat_config = { application_id: id, collection: c || {} };
    w.Esat = w.Esat || {};
    w.Esat.updateMetadata = function (q, m) {
      w.esat_config.collection[q] = w.esat_config.collection[q] || {};
      w.esat_config.collection[q].metadata = m;
    };
    var l = function () {
      var r = d.getElementsByTagName('script')[0], s = d.createElement('script');
      s.async = true;
      s.src = 'https://collection.e-satisfaction.com/dist/js/integration' + (jq ? '.jq' : '') + '.min.js';
      r.parentNode.insertBefore(s, r);
    };
    'complete' === d.readyState ? l() : w.addEventListener('load', l, false);
  })(window, document, 'YOUR-WORKSPACE-ID', false, {});
</script>

That false argument near the end controls which build loads — leave it false for the standard build, or set it to true for the jQuery build described below.

Install walkthrough

Copy the snippet

Grab the snippet from the Code dialog on the Web integration page, or copy the one above.

Replace your workspace ID

Swap YOUR-WORKSPACE-ID for your actual workspace ID. If you copied from the dashboard, this is already filled in.

Paste it into the head

Add the snippet inside the <head> of every page where the survey should be able to appear. Putting it in a shared layout or template means you only do this once.

Publish your site

Deploy the change so the snippet is live on your real pages.

Verify it loads

Open an allowed page and confirm the survey appears as configured. In your browser's developer tools, you can check the network tab for a request to integration.min.js to confirm the script loaded.

The widget only runs on allowed domains

The script can be on every page, but the widget only displays on the domains you've whitelisted on the Web integration page. If your survey isn't showing, confirm the page's domain is on the allowed list before troubleshooting anything else.

The jQuery build

The standard build assumes nothing about your page. If your site doesn't already include jQuery and you'd rather not add it yourself, use the jq build instead — it bundles jQuery 3.2.1 so collection has everything it needs on its own.

To use it, set the jq argument to true:

  })(window, document, 'YOUR-WORKSPACE-ID', true, {});

That single change loads integration.jq.min.js instead of integration.min.js. Everything else about the snippet stays identical.

Which build should I use?

If your site already runs jQuery, keep the standard build (false) to avoid loading a second copy. If it doesn't, the jq build (true) is the simplest way to make sure the dependency is present.

The RequireJS / Magento variant

Some sites are built on RequireJS, which manages dependencies and can clash with scripts that expect jQuery to be globally available. Magento is the most common example. On those sites, wrap the same loader body in a require call so collection runs only after jQuery is ready:

require(['jquery'], function () {
  (function (w, d, id, jq, c) {
    w.esat_config = { application_id: id, collection: c || {} };
    w.Esat = w.Esat || {};
    w.Esat.updateMetadata = function (q, m) {
      w.esat_config.collection[q] = w.esat_config.collection[q] || {};
      w.esat_config.collection[q].metadata = m;
    };
    var l = function () {
      var r = d.getElementsByTagName('script')[0], s = d.createElement('script');
      s.async = true;
      s.src = 'https://collection.e-satisfaction.com/dist/js/integration' + (jq ? '.jq' : '') + '.min.js';
      r.parentNode.insertBefore(s, r);
    };
    'complete' === d.readyState ? l() : w.addEventListener('load', l, false);
  })(window, document, 'YOUR-WORKSPACE-ID', false, {});
});

Only reach for this variant if your site actually uses RequireJS. On a standard site, the plain snippet is the right choice.

Display settings live in the dashboard

The snippet's only job is to load collection and let you push metadata. The widget's type (box, classic box, or embedded), position, mobile behavior, language detection, and frequency caps are all configured on the Web integration page — not in the code. That means you can change how and where surveys appear without ever touching your site again.

Push metadata for richer responses

Once collection is loaded, you can tag each response with context — who the respondent is and what they just did — using Esat.updateMetadata. That's what powers targeting and segmentation later on. See Pushing metadata for the full how-to.

Pushing metadata

Tag each response with responder and questionnaire metadata to power targeting.

Google Tag Manager

Prefer not to touch your site code? Install collection through GTM instead.

Web integration

Set the widget type, position, allowed domains, and display rules from the dashboard.

Troubleshooting

Survey not showing or script not loading? Work through the common causes here.