Skip to main content

🌐 Web Badge Setup Instructions

Jomar
Updated

🧩 Introduction

AskNicely allows you to publicly showcase your Customer Experience metrics—like NPS, CSAT, or 5-Star scores—on your website using a customizable Web Badge. This empowers organizations to highlight customer satisfaction directly on landing pages, footers, or anywhere HTML can be embedded.

To get started, you’ll need support to enable the widget, then a bit of HTML to get it live. Let’s walk through the process!

✉️ 1. Contact Support

Before anything else, contact AskNicely Support and request that they enable the NPS JS Widget on your account.

🔧 2. Embed the HTML Snippet

Copy and paste the following HTML snippet into your website code, in the section where you want your score to display:

html
<div id="an_nps" class="an_nps" data-company="asknicely" data-question-type="nps" data-time-unit="month" data-time-value="1"> </div> <script src="https://static.asknice.ly/dist/standalone/nps.js"></script>

This is what it looks like in a paragraph:

 

<div id="an_nps" class="an_nps" data-company="asknicely"
data-question-type="nps" data-time-unit="month"
data-time-value="1"></div> <script src="https://static.asknice.ly/dist/standalone/nps.js"></script>

 

The values in purple may need to be edited - follow the instructions below.

This will display the metric in plain form—read on for how to customize it for your brand and data.

🛠️ Configuration Options

🏢 Set Your Tenant

Replace asknicely in the data-company line with your tenant domain (e.g. acmeco if your URL is acmeco.asknice.ly):

data-company="acmeco"

📊 Choose the Metric Type

Update the data-question-type depending on which metric you'd like to show:

  • nps – Net Promoter Score

  • csat – Customer Satisfaction

  • fivestar – 5-Star Rating

data-question-type="csat"

🗓️ Set the Timeframe

Choose how far back you want the score to reflect:

  • Use day or month for the data-time-unit

  • Use a number for the data-time-value (e.g. 1, 3, 7)

Examples:

data-time-unit="day" data-time-value="7"

This shows scores from the past 7 days.

🧪 (Optional) Add a Filter

You can filter results based on a custom field, using the data-filters attribute:

data-filters='[{"column":"country_c","operator":"in","value":["Canada"]}]'

📌 Need help creating your filter? Contact AskNicely Support—we'll guide you.

🎨 Styling the Output

By default, the badge will appear as a plain number.

🧑‍🎨 Work with your Web Developer to apply custom styling with CSS classes such as:

.an_nps { font-size: 2rem; color: #009688; font-weight: bold; }

This ensures the badge matches your company’s website style and branding.

❓FAQs & Common Issues

Q: Can I show metrics other than NPS?
A: Yes! You can show csat or fivestar scores using the data-question-type parameter.

Q: My badge isn't showing anything—why?
A: Make sure:

  • The widget is enabled by Support

  • Your data-company matches your domain

  • You have qualifying data in the date range and filters

Q: Can I add multiple filters?
A: Yes. Filters must be passed as JSON in the data-filters parameter. Reach out if you need help constructing them.

🔗 Next Steps & Related Articles

Related articles