The #1 Humanized Marketing Platform

e-satisfaction Badge v.3 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'
<script type="text/javascript" async src="https://cdn.e-satisfaction.com/clients/badge/v3.0/js/badge.min.js"></script>

2. Integration Configuration

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

All the settings will be applied immediately.

Keep in mind that there is a cache mechanism, which keeps data in browser’s cache for one week.


Custom Integration

In case you want to add a custom configuration for your badge, you can set all the variables in here.

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
data_span_months Set the number of months for getting data for displaying the metrics


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

Badge Position

To set the badge position, you have to define the placeholder where the badge will reside, as a css selector.
You have to make sure that the element exists and it’s in the page before running the integration code.

More on CSS selectors and how to use them here.

Integration Script - Versions

The integration code includes a simple script that has to be loaded to the client to allow the e-satisfaction badge.

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

Without jqueryhttps://cdn.e-satisfaction.com/clients/badge/v3.0/js/badge.min.js

With jqueryhttps://cdn.e-satisfaction.com/clients/badge/v3.0/js/badge.jq.min.js

Embedded jQuery versionjquery-2.2.4.js

If your web application or website includes already a jQuery, you should choose the integration without jQuery embedded.

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