AskNicely now has the ability to display your Customer Experience program metrics on public facing websites.
The first step is to contact the AskNicely Support Team to enable it for your account - they will need to enable NPS js widget on the back-end of AskNicely.
Once this is done, the badge can be enabled by embedding a small snippet of HTML on the website where the NPS score will be displayed. This piece of HTML code will need some slight tweaks made to it for your account: step-by-step instructions are below.
HTML Snippet
Unformatted in its entirety (you can safely copy and paste this version):
<div id="an_nps" class="an_nps"
data-company="asknicely" data-question-type="nps"
data-time-unit="month" data-time-value="1">
data-filters='[{"column":"country_c","operator":"in","value":["Canada"]}]'</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:
1. Set the Tenant
Replace asknicely with the tenant domain in the data-company line. Your tenant domain is the part of the URL for your AskNicely instance that comes before "asknice.ly."
2. Choose the metric
Use nps, csat, or fivestar in the data-question-type line, depending on what metric you wish to display.
3. Set the timeframe
To set the timeframe, the customer will need to decide the unit (day or month) and the value (1, 2, 3, etc). So they can show an NPS for the previous 1 week, 2 weeks, 1 month, 3 months, etc.
Use day or month in the data-time-unit line.
Use a single number in the data-time-value line.
4. Add a filter (optional)
To set a filter on the widget, add a data-filters parameter with your chosen custom field, operator, and value. This filter format follows the same style as our API filtering, please reach out to us if you need help with building the filter.
Styling
If you go ahead and publish your site, you will notice that the output of the code is an unformatted/unstyled number.
Use the help of your Web Developer to style the number using CSS selectors to match your Style Guide.