In this example, we will detail the steps required to create the following NPS©:
This widget features the following elements:
- an NPS© question,
- a rating scale from 0 to 10,
- an open-ended question,
- a send button,
- a thank you message.
Accessing the NPS© widget
- Open the variation editor on the desired website,
- Click Widgets in the toolbar on the right-hand side,
- Enter NPS© in the search field,
- Click the NPS© card:
the configuration form is displayed.
You can now start configuring your widget. The Layout tab is displayed by default.
- In the Layout tab, click Modal.
- Choose to place the content Above.
- Click the Content tab.
- In the Question field, keep the default text displayed on the widget, above the rating scale: “How likely are you to recommend us to a friend or family member?”
- Check the Ask an open-ended question box.
- Enter your question: “Do you have any suggestions for improvements?”
- Keep the default text of the button you want to display: Send.
- Check the Display a thank you message box.
- Enter the message to be displayed once the visitors have given a rating: Thank you for your feedback!
- Check the Display a key box.
- Keep the key values for the lowest rating: Very low and for the highest rating: Very high.
- Click the Style tab.
- In the Notes step, select Clear appearance.
- In the Border category, set the border thickness to 0px, the border radius to 20px and leave the color as is (#1079ff).
- In the Background category, leave the background color as is (#ffffff) and the overlay color as is (#000000), keep the overlay opacity at 50%.
- In the Container category, leave the color as is (#1079ff), set the question/reply spacing to 40px, the horizontal and vertical padding to 40px, the horizontal and vertical margins to 0px.
- In the Button style category, leave the Button spacing set to 5px, select the dark contrast and the rounded button shape with an 8px border, leave the background color and the button border color as is (#1079ff) and the button font color as is (#ffffff); set the border thickness to 0px.
- For the Open-ended question step, in the Field style category, set the border thickness to 1px and set the button spacing to 30px.
- In the Send button style category, set the button background color to #1079ff and the button font color to #ffffff.
- Click the Conditions tab.
- In the Recurrence category, set the Display recurrence to Every session.
- Set the Recurrence after closing to Every session.
- Set the Recurrence after validation to Every session.
- In the Trigger category, choose Page load.
- Check the Hide automatically after validation box after 1 second.
- Click Save.