Examples
Introduction
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.
Restriction
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.
Layout tab
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)
Dimensions
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.
If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.
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.
Know issue: the widget configuration form not overlapping the website
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. And results can be surprising...
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
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.
Please read the dedicated article on the matter: Z-index demystified.
Content tab
Question
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.
Display legend
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.
Button text
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.
Style tab
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
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".
Conditions tab
Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget. Refer to the Widget Condition options article for more information on the available Condition options.
NPS Report
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)
If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.
Comments
0 comments
Article is closed for comments.