Popup

Note

Our popup is presented as an isolated web-component using the Lit framework developed by Google.

Introduction

The nps.today popup is an easy to use solution to collect nps-answers from any website with just a small code snippet. The popup comes with a basic default styling.

Mobile ready

Getting Started

Create a manual campaign on nps.today dashboard or select an existing campaign.

Allow duplicates

When creating the campaign it is recommend to check the "allow duplicates" setting, if the same mail is used to answer te survey and duplicates are not allowed, the second time the user answers the survey it is ignored. Be sure to keep this in mind when designing the popup.

Load the popup by adding this to the header of your site:

Script to load popup

<script type="module" src="https://static.nps.today/popup/nps-today-survey-d3147ea7.js"></script>

Add the following snippet to the body of your site where you want the popup to be, and replace the attribute values to fit your needs:

Full popup snippet

<nps-today-survey
    campaignid="<campaignId>"
    showpopupaftermilliseconds="20000"
    showpopupafterpageviews="10"
    showlogo="true"
    position="right"
    respondentemail="johndoe@example.com"
    respondentfirstname="John"
    respondentlastname="Doe"
    respondentphoneno="+4512345678"
    respondentexternalid="987654EXT"
>
</nps-today-survey>

HTML attributes

The survey requires some HTML attributes to work correctly and some are optional, but will make sure the survey works as intended.

HTML attributes only accepts strings

The HTML attributes only accepts strings, so if you want to use a number, you need to convert it to a string. For example, if you want to show the popup after 20 seconds, you need to write showpopupaftermilliseconds="20000". If you want the popup to show after 99 page views, you need to write showpopupafterpageviews="99".

Required attributes

Attribute	Accepted values	Description
campaignid	uuid	Value is retrieved from nps.today dashboard on the specific campaign
showlogo	"true" or "false"	Whether or not the nps.today logo should be rendered
position	"right" or "left"	Position of the survey on the web page
respondentemail	string	Mail for the respondent, can be omitted if respondentphoneno is present
respondentphoneno	string	Phone number for the respondent, can be omitted if respondentemail is present

Optional attributes

Attribute	Accepted values	Description
respondentfirstname	string	First name of the respondent
respondentlastname	string	Last name of the respondent
respondentexternalid	string	External ID of the respondent e.g. to later link with your crm system
showpopupaftermilliseconds	integer	Delays the popup from showing before x milliseconds
showpopupafterpageviews	integer	Delays the popup from showing before x page clicks

The popup uses cookies to store information about the user, the cookies are used to make sure the popup is not shown to the same user multiple times. The cookies are set to expire after 30 days.

When using the attribute showpopupaftermilliseconds a cookie will be set in the browser to make sure the popup is not shown before the specified time has passed.

When using the attribute showpopupafterpageviews a cookie will be set in the browser to make sure the popup is not shown before the specified amount of page views has been reached.

When the survey in the popup is answered, a cookie will be set in the browser to make sure the popup is not shown to the same user again.

Styling

The popup inherits the fonts from the body-tag of website it is embedded on. The popup is designed to be as unobtrusive as possible, so it is not recommended changing the styling of the popup. However, aspects of the popup can be changed by adding the following CSS to the website, that the popup is embedded on. Change the values to fit your specific need, but beware that it might come with some unexpected consequences.

Custom styling

nps-today-survey {
    font-family: "Times New Roman", Times, serif; /* Overrides the font family */
    --popup-width: 30rem; /* Width of the popup */
    --popup-z-index: 100; /* z-index of the popup */
}

Integrating popups into your WordPress site may initially encounter JavaScript limitations.

A solution to effectively integrate JavaScript for popups on WordPress can be found here.