e-satisfaction

The #1 Humanized Marketing Platform

e-satisfaction Badge v3 Integration Guidelines

Follow

This document contains guidelines about the integration code of e-satisfaction badge.

version: 3.0

Library

To allow your website to display the e-satisfaction Badge, you should copy and paste the following code in the pages where you wish for the badge to be displayed. Place the following script in the head section of your website.

Replace YOUR-APPLICATION-ID with the application id that you are trying to integrate, found in the application settings in the dashboard.

Case 1: Your website does not have jQuery

(function (w, d, id, jq, 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' + (!!jq ? '.jq' : '') + '.min.js';
       r.parentNode.insertBefore(s, r);
   };

   if (w.attachEvent) {
       w.attachEvent('onload', l);
   } else {
       w.addEventListener('load', l, false);
   }
})(window, document, 'YOUR-APPLICATION-ID', true, {});

NOTE: The jQuery embedded with the above script is v3.2.1.

Case 2: Your website has jQuery

(function (w, d, id, jq, 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' + (!!jq ? '.jq' : '') + '.min.js';
       r.parentNode.insertBefore(s, r);
   };

   if (w.attachEvent) {
       w.attachEvent('onload', l);
   } else {
       w.addEventListener('load', l, false);
   }
})(window, document, 'YOUR-APPLICATION-ID', false, {});

By adding the above script, the badge will automatically be displayed to your customers.

Configuration - Default Settings

To set the badge configuration, visit your dashboard and update all the integration settings for your badge in the application profile page.

All the settings will be applied immediately.

Follow this link to learn what you should set up from your dashboard! Badge Configuration

Configuration - Override Settings

In case you want to customize Badge per page, you can override the Badge settings through the javascript code. This is the complete configuration that you can manage (replace the above script with the following):

(function (w, d, id, jq, 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' + (!!jq ? '.jq' : '') + '.min.js';
       r.parentNode.insertBefore(s, r);
   };

   if (w.attachEvent) {
       w.attachEvent('onload', l);
   } else {
       w.addEventListener('load', l, false);
   }
})(window, document, 'APPLICATION_ID', true, {
   "active": true,
   "active_mobile": true,
   "mode": "bar",
   "theme": "dark",
   "size": "normal",
   "position": "",
   "custom_style": ""
});

Variables Explanation

Variable Name Used for
active Enable or disable the appearance of the badge
active_mobile Enable or disable the appearance of the badge in mobile devices
mode

The badge mode can have the following values:

  • banner: Display the banner
  • bar: Display the bar on the top of the page
  • lightbox: Display lightbox in embedded form

Bar mode: By default the bar is prepended to the body. Set the position variable to set the bar in a different position

theme

Badge theme can have the following values:

  • light
  • dark

Default value is dark.

size

Badge size applies only to banner mode and can have the following values:

  • normal: should look nice in a holder with dimensions: 300x250px.
  • small: should look nice in a holder with dimensions: 200x160px.
position

The position holder (css selector) where the badge is going to reside

More on CSS selectors and how to use them here.

custom_style Set custom style for badge in banner and bar modes

Badge Position

To set the badge position, you have to define the placeholder where the badge will reside, as a css selector. (eg. #esat_badge_container) Example:

<div id="esat_badge_container"></div>

You have to make sure that the element exists and it’s in the page before running the integration code.

Bar mode: By default the bar is prepended to the body. Set the position variable to set the bar in a different position. 

 

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

Comments