Install the CX Badge
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 e-satisfaction Surveys 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/v3.1/js/badge.min.js"></script>
That's the whole install. The badge runtime reads your config, fetches your metrics, and renders the widget.
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. It's self-contained — nothing else to include.
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. The badge must also be switched on in the dashboard — that's what keeps its data up to date. |
active_mobile | Turn the badge on or off on mobile devices (bar and banner modes). |
mode | How the badge is placed: "bar" (a bar at the top of the page, or inside the position element if you set one), "banner", or "lightbox" (embedded). banner and lightbox both need a position. |
theme | "light" or "dark". |
size | "normal" (300×250) or "small" (200×160). Applies to banner mode. |
position | A CSS selector for where the badge mounts (called Placeholder in the dashboard). |
custom_style | Your own inline styling overrides for the badge (bar and banner modes). |
display_top_metrics | Show or hide the headline metrics row (lightbox mode). |
display_comments | Show or hide recent customer comments (lightbox mode). |
Some settings live only in the dashboard
How many top metrics and comments the badge shows are set in the dashboard, and its scores always cover the last 12 months. Both are used to generate the badge's data in the background, so neither can be changed from the snippet. For the same reason, display_top_metrics and display_comments can hide a section in the snippet, but can't show one that's switched off in the dashboard.
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',
position: '#esat-badge',
display_top_metrics: true,
display_comments: true
};
</script>
<script async src="https://cdn.e-satisfaction.com/clients/badge/v3.1/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" when you'd rather it run across the top of the page — leave position out and the bar is added to the page itself.
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 — see CX Badge under Admin → Configuration. That's handy when you want to adjust the look or the metrics shown without editing and redeploying your site.
Related articles
CX Badge settings
Configure the badge's layout, theme and metrics from the dashboard.
Install on your website
Set up e-satisfaction Surveys so you have CX data for the badge to display.
Web integration
Configure where and how your on-site surveys appear.
Troubleshooting
Badge or survey not showing? Work through the common causes.