NPS® (Net Promoter Score) Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
The NPS (Net Promoter Score) widget is part of the Dynamic Content widget category. For more information on the widgets, please refer to .
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.
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)
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.
We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.
In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't find a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.
Layer Position (z-index)
If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.
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.
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.
You can decide to have a "Thank you message" by toggling this on. By default, it is untoggled.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
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 the Promotional Banner widget.
"Net Promoter®, NPS®, NPS Prism®, and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., NICE Systems, Inc., and Fred Reichheld. Net Promoter ScoreSM and Net Promoter SystemSM are service marks of Bain & Company, Inc., NICE Systems, Inc., and Fred Reichheld."
If you're digging the dimensional units in CSS, we strongly advise you read which is a good starting point.
Refer to the article for more information on all available Style options.
Once your campaign using the NPS widget is finished and you have collected enough scores and feedback, you can analyze the results in the dedicated .