Install e-satisfaction

Introduction

This article will guide you through the e-satisfaction simple installation using Javascript code. It will allow the e-satisfaction collection questionnaire to appear to your site.

Before we Start

This guide will show you the main Javascript code and some examples on how to install the e-satisfaction script to your website.

However, since it's a library embedded to other websites, there are some restrictions regarding the jQuery version, the Operating System and the Browser.

jQuery Compatibility

e-satisfaction library uses jQuery to make it easier for us and the website to operate. However, restrictions and best practices exist.

Read more about our jQuery Compatibility.

OS and Browser Compatibility

Although we are trying to keep our Installation Script as clean and as tidy as possible, we cannot cover all Operating Systems and Browsers.

Read more about our OS and Browser Compatibility.

Box - Viewport Dimensions

In order for the Box Questionnaire to be displayed, the following conditions must be valid:

window width > 490px and window height > 500px, or
window width < 490px and window height > 550px

Information Needed

One final step before we start installing the e-satisfaction Library, we are going to need get the Application Id from the dashboard settings, as the screenshot displays:

Library

There are 2 cases for installing the e-satisfaction library:

Normal Script
RequireJS (Magento etc.)

In any case, to install successfully the code you should:

place the following script in the head section of your website and
replace YOUR-APPLICATION-ID with the application id that you got from the previous step

Case 1: Normal Script

(function (w, d, id, c) {
    // Define e-satisfaction collection configuration
    w.esat_config = {application_id: id, collection: c || {}};

    // Update metadata
    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;
    };

    // Setup script
    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' + (!!w.jQuery ? '' : '.jq') + '.min.js';
        r.parentNode.insertBefore(s, r);
    };

    // Attach script or run script if document is loaded
    "complete" === d.readyState ? l() : (w.attachEvent ? w.attachEvent("onload", l) : w.addEventListener("load", l, false));
})(window, document, 'YOUR-APPLICATION-ID', {});

NOTE: If your website does not have jQuery, it will be embedded with version v3.2.1

Case 2: [RequireJS] Your website works with RequireJS

There are websites (like Magento 2 etc.) that work with RequireJS and load JavaScript dependencies using the RequireJS config logic.

Although the e-satisfaction script is attached to your page after the load event is triggered, and the jQuery should be loaded by then, you might want to make sure that jQuery is already loaded before adding the script.

For this reason, you might want to use the following code:

(function (w, d, id, c) {
    // Define e-satisfaction collection configuration
    w.esat_config = {application_id: id, collection: c || {}};

    // Update metadata
    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;
    };

    require(['jquery'], function () {
        // Setup script
        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.min.js';
            r.parentNode.insertBefore(s, r);
        };

        // Attach script or run script if document is loaded
        "complete" === d.readyState ? l() : (w.attachEvent ? w.attachEvent("onload", l) : w.addEventListener("load", l, false));
    });
})(window, document, 'YOUR-APPLICATION-ID', {});

By adding the above script, any active questionnaires with a valid HTML container will automatically be displayed to your customers.

Testing your Installation

The current library has 3 type of display:

Box
Box Classic (popup)
Embed

Box Display

If you have a Questionnaire with Box display in your application, the questionnaire should be displayed to your site, like the example:

Box Classic (popup) Display

If you have a Questionnaire with Box Classic (popup) display in your application, the questionnaire should be displayed to your site, like the example:

And on click:

Embed Display

If you have a Questionnaire with Embed display in your application, the questionnaire should be displayed to your site, like the example:

And after selecting your first response:

Override Display Settings

Display settings for each questionnaire in your application is configured through your dashboard. However, you might need to customize your configuration on each page differently.

Read more about Override Web Display Settings.

Next Steps

Push Metadata

You can push your custom data (metadata) on every questionnaire, as long as the questionnaire has been appeared on a page.

Troubleshooting

In case you face any problem with the display of a questionnaire please follow our troubleshooting guides here.

e-satisfaction.com

Enabling Customer Centricity