e-satisfaction

The #1 Humanized Marketing Platform

Web Integration

Follow

Introduction

This article will guide you through the e-satisfaction simple integration 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 integrate 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 Integration 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 Integration 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 integrating the e-satisfaction Integration Library, we are going to need get the Application Id from the dashboard settings, as the screenshot displays:

Library

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

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

In any case, to integrate 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, 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 integration 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 integration has 3 type of integration:

  • Box
  • Box Classic (popup)
  • Embed

Box Integration

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

  

Box Classic (popup) Integration

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

classic_box.png

And on click:

classic_box_open.png

Embed Integration

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

embed.png

And after selecting your first response:

embed_open.png

Override Integration Configuration

Integration 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 Integration 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.

Read more on how to Push Metadata.

Troubleshooting

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

Was this article helpful?
0 out of 0 found this helpful

Have more questions? Submit a request