e-satisfaction
Updated :
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 |
| mode |
string |
The badge mode can have the following values:
Bar mode: By default the bar is prepended to the body. Set the position variable to set the bar in a different position |
| theme |
string |
Badge theme can have the following values:
Default value is |
| size |
string |
Badge size applies only to banner mode and can have the following values:
|
| position |
string |
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": ""
});