The NPS widget enables you to display a satisfaction survey in order to collect feedback from visitors. The NPS, or Net Promoter Score, is a customer satisfaction measuring tool based on a single question.
This functionality enables you to carry out a satisfaction survey via a form displayed on one or more pages or your website. This way, visitors can rate and comment on their experience as users.
Among other things, the NPS widget enables you to quantify promoters (9 - 10), passives (7 - 8) and detractors (0 - 6) on your website, to collect feedback and to measure the impact or your changes.
The widget then lets you:
- track the evolution potential of customer loyalty,
- find out how you are performing compared to other players in your field,
- improve the user experience.
At the moment, even if the NPS widget can be added onto a multi-pages test or a personalizations with sub-tests, the reports in such campaigns are not supported yet.
Select a layout
We offer 4 different layouts:
- modal (pop-in)
- top banner
- bottom banner
- free placement (which allows you to place the widget wherever you want in the page flow)
This is where you will be able to write your own NPS question. By default, we offer to use the most common way of asking an NPS question to the visitors: "How likely are you to recommend us to a friend or family member?".
However, you can write in many other ways, for example:
- "What is your experience so far with this product?" (for an already purchased product)
- "How is our documentation answering your questions?" (for self-service user documentation)
- "Hey, do you think these recommend products are adequate?" (for product recommendation features)
Adapt the question to what you want to know.
A well-targeted campaign properly triggered with the right level of recurrence can give you really good results in quality and volume of feedback.
Pro tip: don't offer anything in exchange of a feedback. Feedback (good and bad) is free. Free is unbiased.
You can decide to display a legend next to min and max scores by toggling this on. By default, it is untoggled. However, it makes it obvious for visitors that 0 is bad and 10 is good. No brainer.
By default, we offer "Very unlikely" as minimum score legend and "Very likely" as maximum score legend. They fit well with the default NPS question. Therefore, if you change the question, there is a good chance that you will need to adapt the legend too.
Ask an open-ended question
You can decide to have a "Ask an open-ended question" by toggling this on. By default, it is untoggled.
Most of our users use this option to get more detailed feedback with the score. Invite your users to give you detailed explanations of their bad or good score (and even average). This qualitative feedback will become a real change or growth lever.
Some of our users also use it to collect personal contact information such as phone number, email or client ID. It sure does imply a lot of manual qualification but it can be a quick-win to contact back and turn detractors into promoters.
By default, we offer "Send". Obviously, you can change it to your own needs.
This input only appears if you toggle the "Ask an open-ended question" step.
Thank you message
You can decide to have a "Thank you message" by toggling this on. By default, it is untoggled.
In the style tab, you will be able to define the size, color, border, background... of each element of the simple pop-in. Uncollapse each group and adapt the widget to your website color palette and style.
By default, the widget inherits from the font-face of your website. But you can override it with the 1,000 Google Fonts available.
Refer to the Widget Style options article for more information on all available Style options.
NPS widget Styling Specificities
In the NPS widget, you will be able to preview the different steps of the widget. Depending on if you enabled (toggled) them or not in the content tab.
The styling options will apply the same way to all components (text, button, container) in all steps. For example, if you style the scoring buttons with border-radius, it will be applied to the same way to the "Send" button in the open ended question step.
If you don't toggle open-ended question and thank you message, you will not see a "Preview" group in the Style tab. As there will remain only one step: the score step (which you will view immediately).
As you may have seen in our examples at the beginning of this article, you can customize a lot an NPS widget rendering by adding extra CSS. You can hide some scores (but this will deeply impact the reporting results/reliability), display a background image, re-order components, replace scores with images... All that through the "Add CSS" Feature.
In order to do this the most proper way, don't forget to set your default styling completely off. This will remove all the CSS we apply to the NPS widget. You can do this in the Style tab by toggling "Custom".
Select the Triggering and Recurrence options you want to apply to this widget.
Refer to the "Condition" tab article for details.
Once you have collected some scores and feedback, you can view in the dedicated report tab, your NPS report.
You will be able to access it through the Reporting, with a click on the "NPS" tab.
In this report, you will be able to:
- A top card with your global average NPS score
- View the distribution of detractors, passives, promoters (per variation (useful if you implemented an NPS widget in more than one variation)). Each block will display the NPS question (that you may have customized in each variation, just to test or the same question but in variations with different modifications).
- For each variation, you will be able to download a .CSV file of the collected NPS scores and feedback with the following columns: npsFeedback, npsScore, url, date
- View a last 10-days graph of the trend of your global NPS score (here again, variation-based). For each day, you will have a popover with the daily NPS score
- Browse (and filter) verbatims per keyword, variation and date range - the rows are orderable by date and by score (ascending and descending)