Introduction

This article will guide you through the e-satisfaction simple installation using Javascript code. It will allow the e-satisfaction Badge 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 badge 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.

Badge Configuration

IMPORTANT: In order for the badge to be displayed, you have to visit your dashboard and update all the display settings for your badge in the application profile page. All the settings will be applied immediately.

Read more about your Badge Configuration Layout and the Badge Configuration Metrics.

jQuery Compatibility

e-satisfaction Badge 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 Script as clean and as tidy as possible, we cannot cover all Operating Systems and Browsers.

Read more about our OS and Browser Compatibility.

Information Needed

One final step before we start installing the e-satisfaction JavaScript 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 badge:

1. Normal Script
2. RequireJS (Magento etc.)

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

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

Case 1: Normal Script

(function (w, d, id, o) {
    // Define e-satisfaction badge configuration
    o = o || {};
    o.application_id = id;
    w.esat_badge = o;

    // Setup script
    var l = function () {
        var r = d.getElementsByTagName('script')[0], s = d.createElement('script');
        s.async = true;
        s.src = 'https://cdn.e-satisfaction.com/clients/badge/v3.0/js/badge' + (!!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 badge 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 badge script.

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

(function (w, d, id, o) {
    // Define e-satisfaction badge configuration
    o = o || {};
    o.application_id = id;
    w.esat_badge = o;

    require(['jquery'], function () {
        // Setup script
        var l = function () {
            var r = d.getElementsByTagName('script')[0], s = d.createElement('script');
            s.async = true;
            s.src = 'https://cdn.e-satisfaction.com/clients/badge/v3.0/js/badge.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, the badge will automatically be displayed to your customers.

Override Display Configuration

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

Read more about Override Badge Display Configuration.