The #1 Humanized Marketing Platform

e-satisfaction Badge v3 Integration Guidelines


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

Latest update: 2nd March, 2018

version: 3.0

1. Integration Code

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

   window.esat_badge = {
       application_id: 'YOUR-APPLICATION-ID'

The Badge script requires jQuery to work but it does not include it by default.

// Choose one of the following options, based on your jquery library installed:

// **Without jquery**:
<script src="https://cdn.e-satisfaction.com/clients/badge/v3.0/js/badge.min.js"></script>

// **With jquery (The jQuery version that is embedded: jquery-2.2.4.js):**
<script src="https://cdn.e-satisfaction.com/clients/badge/v3.0/js/badge.jq.min.js"></script>


2. Badge Configuration

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

3. Override Configuration 

Override Configuration

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:

var esat_badge = {
    application_id: "YOUR-APPLICATION-ID",
    "active": true,
    "active_mobile": false,
    "mode": "bar",
    "theme": "dark",
    "size": "normal",
    "position": "",
    "custom_style": "",
    "display_top_metrics": true,
    "top_metrics_count": 4,
    "display_comments": false,
    "comments_count": 3,
    "data_span_months": 12


Variable Values

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 display mode
theme The badge theme color mode
size The badge size
position The position holder (css selector) where the badge is going to reside
custom_style Set custom style for badge in banner and bar modes
display_top_metrics Enable or disable the appearance of top metrics in the lightbox
top_metrics_count The number of top metrics to be displayed
display_comments Enable or disable the appearance of last comments in the lightbox
comments_count The number of last comments to be displayed


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

More on CSS selectors and how to use them here.

Badge 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

Badge Theme

Badge theme can have the following values:

  • light and
  • dark

Default value is dark.

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



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