Enabling Customer Centricity

Override Badge Display Settings


Getting Started

You can fully configure your Badge Display 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.

🚨 Warning 🚨

Overriding the display settings will remove the flexibility of your badge and you will no longer be able to affect its display from the dashboard. If you are sure about this, you can move on with your overrides.

Override Display Settings

We have explained, in a previous article, the full Badge Installation 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 Installation 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