The #1 Humanized Marketing Platform

Override Badge Integration Settings


Getting Started

You can fully configure your Badge Integration Setting from your dashboard.

However, there are cases where you might want to override these settings, on demand for different pages of your website.

All the examples in this article assume that your website DOES NOT have jQuery installed.

Override Integration Settings

We have explained, in a previous article, the full Badge Integration of e-satisfaction Badge to your website.

You can override any of the following settings:

Name Type Description
active boolean Enable or disable the appearance of the badge
active_mobile boolean Enable or disable the appearance of the badge in mobile devices


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



Badge theme can have the following values:

  • light
  • dark

Default value is dark.



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

  • normal
  • small


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

More on CSS selectors and how to use them here.

custom_style string Set custom style for badge in banner and bar modes

You can read more about the Badge Configuration Layout.

Javascript Code

Change the Javascript code as explained in the Badge Integration article as follows:

(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": ""
Was this article helpful?
0 out of 0 found this helpful

Have more questions? Submit a request