Badges
The e-satisfaction CX Badge is an embeddable widget that displays your customer experience score and metrics directly on your website. It's a way to turn the feedback you collect into social proof — visitors can see your CX score, recent comments, and headline metrics right where they're deciding whether to trust you.
Installing the badge takes one snippet, and you can shape its appearance either from the code or from the dashboard. This page walks through the install and the configuration options.
Install the badge
The badge loads from its own config object and script — separate from the collection install. Set window.esat_badge with your workspace ID, then load the badge script:
<script>
window.esat_badge = { application_id: 'YOUR-WORKSPACE-ID' };
</script>
<script async src="https://cdn.e-satisfaction.com/clients/badge/dist/js/badge.min.js"></script>
That's the whole install. The badge runtime reads your config, fetches your metrics, and renders the widget.
Builds for different stacks
A jQuery build is available at badge.jq.min.js, which embeds jQuery 2.2.4 so the badge has its own copy. A RequireJS variant works for Magento. The current badge version is 3.0.
Install walkthrough
Add the config object
Place the window.esat_badge config with your real workspace ID before the script tag.
Load the badge script
Add the async badge.min.js script (or the badge.jq.min.js jQuery build / RequireJS variant for Magento).
Pick where it renders
Set the position option to a CSS selector for the element the badge should render into, or use a mode that places it for you.
Publish and check
Deploy the change and open the page to confirm the badge appears with your metrics.
Configuration options
Add any of these keys to the window.esat_badge object to control how the badge behaves and looks:
| Option | What it does |
|---|---|
active | Turn the badge on or off. |
active_mobile | Turn the badge on or off on mobile devices. |
mode | How the badge is placed: "bar" (a bar on top of the page), "banner", or "lightbox" (embedded). |
theme | "light" or "dark". |
size | "normal" (300×250) or "small" (200×160). |
position | A CSS selector for the element the badge renders into. |
custom_style | Your own styling overrides for the badge. |
display_top_metrics | Show the headline metrics row. |
top_metrics_count | How many top metrics to show (e.g. 4). |
display_comments | Show recent customer comments. |
comments_count | How many comments to show (e.g. 3). |
data_span_months | The time window the metrics cover, in months (e.g. 12). |
A fuller config might look like this:
<script>
window.esat_badge = {
application_id: 'YOUR-WORKSPACE-ID',
active: true,
active_mobile: true,
mode: 'lightbox',
theme: 'light',
size: 'normal',
position: '#esat-badge',
display_top_metrics: true,
top_metrics_count: 4,
display_comments: true,
comments_count: 3,
data_span_months: 12
};
</script>
<script async src="https://cdn.e-satisfaction.com/clients/badge/dist/js/badge.min.js"></script>
Embed vs overlay
Use mode: "lightbox" together with a position selector when you want the badge to sit inside a specific part of your layout. Use mode: "bar" or "banner" when you'd rather it span the top of the page.
Manage the badge from the dashboard
You don't have to keep every setting in code. The badge's display settings can also be managed from the dashboard — the CX Badge configuration lives under Admin → Configuration. That's handy when you want to adjust the look or the metrics shown without editing and redeploying your site.