Skip to content

Popup

Framework

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. This version of the pop-up makes it possible to add more data to the respondent, has more attibutes to control your pop-up, and includes additional questions.

Showcase

Showcase of popup

Mobile showcase

Showcase of popup on mobile

Getting Started

Create a campaign in nps.today or select an existing campaign. Ensure that the setting Universal Link Campaign is enabled.

Allow duplicates

If you expect the same respondent to answer the popup survey multiple times and you are providing the popup with respondent specific information, such as an e-mail address, it is recommend to check the Allow duplicates setting on the campaign. If the same respondent e-mail is used to answer the survey and duplicates are not allowed, the second time the the same respondnet answers the survey it is ignored.

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-1ebcf680.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:

Popup code snippet - example
<nps-today-survey
    campaign-link-id="591404cc-b5d1-4ce2-ba81-1b932fb55g44"
    position="right"
    display-threshold-page-views="5"
    display-delay-milliseconds="10000"
    cookie-expiration-days="200"
    width="500px"
    margin="10px"
    padding="10px"
    close-delay-milliseconds="5000"
    force-show-after-days="15"
>
    <script id="campaignMemberConfig" type="application/json">
        {
            "respondent": {
                "firstName": "John",
                "lastName": "Doe",
                "externalId": "123"
            },
            "employee": {
                "email": "exampleEmployee@company.com",
                "firstName": "Jane",
                "lastName": "Doe"
            },
            "custom": {
                "testVal": 123,
                "isHappy": true
            }
        }
    </script>
</nps-today-survey>

Campaign Member Data

If you know the identity of the respondent, want to add a respondesible employee, or want to add custom data to the saved campaign member, you can include a script with a JSON structure (as shown in the above example).

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 display-delay-milliseconds="20000". If you want the popup to show after 99 page views, you need to write display-threshold-page-views="99".

Required attributes

Attribute Accepted values Description
campaign-link-id uuid Unique identifier for the campaign

Find the Campaign Link ID here.

Optional attributes

Attribute Accepted values Description Default Value
position "right", "left", or "center" Position of the survey on the web page "right"
display-threshold-page-views integer Number of page views after which the survey is displayed "0"
display-delay-milliseconds integer Time delay in milliseconds before the survey is displayed "0"
instance-id integer Required for cookies to function with a popup. Changing the ID ignores previously saved cookies. Ideal for multiple popups on a website with different IDs. (No default value)
cookie-expiration-days integer The time in days after which a cookie is deleted if not modified. For example, a "survey answered" cookie set 30 days ago will cause the popup to show again after 30 days. "30"
disable-animations "true" or "false" Whether animations are disabled "false"
height string (CSS value) The fixed height of the popup if specified. If left empty, the height is dynamic. (No default value)
width string (CSS value) Width of the survey element, e.g., "500px" "600px"
margin string (CSS value) Margin around the survey element, e.g., "10px" "20px"
padding string (CSS value) Padding inside the survey element, e.g., "10px" "0px"
drop-shadow string (CSS value) CSS value for the shadow around the popup. Use CSS drop-shadow format or "none" to remove the shadow. "none"
z-index string (CSS value) CSS z-index value. Set to a higher value if the popup is hidden behind other content on the webpage. (No default value)
active "true" or "false" Whether the survey is active or not "true"
active-from string The date from which the survey becomes active, in ISO 8601 standard format (e.g., "2024-01-01T00:00:00+01:00"). This should be a string that can be converted to a Date object in JavaScript. (No default value)
active-to string The date until which the survey is active, in the same format as active-from. (No default value)
close-delay-milliseconds integer Delay in milliseconds before the survey closes after being displayed "5000"
display-toggle-button "true" or "false" Whether to display a toggle button for the survey "true"
toggle-button-image-url string (URL) URL of the image to be used for the toggle button. If left empty, the nps.today logo is used. (No default value)
toggle-button-width string (CSS value) Width of the toggle button, e.g., "200px" "40px"
force-show-after-days integer Number of days after which the survey will be shown again, regardless of previous views. Useful when display-toggle-button is set to false. (No default value)

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, if no other value is provided throuh the cookie-expiration-days attribute.

The following information is stored as cookies:

  • Popup State Tracking:

    • Purpose: Stores information about whether the popup is minimized or not.
    • Use: Preserves the user's preference on the popup's state for subsequent visits.

  • Popup Load Delay Calculation:

    • Purpose: Tracks when the popup is ready to be loaded, especially when the display-delay-milliseconds attribute is used.

    • Use: Ensures the popup is displayed after the specified delay, optimizing user experience and engagement.

  • Survey Response Status:

    • Purpose: Records whether the survey has been answered.

    • Use: Prevents the survey from being repeatedly prompted to users who have already participated.

  • Webpage Load Count for Display Threshold:

    • Purpose: Keeps track of the number of times the webpage has been loaded.
    • Use: Used in conjunction with the display-threshold-page-views attribute to control when the popup is displayed based on the frequency of page visits.
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.

Limitations

This section outlines certain constraints you may encounter when working with the popup.

Styling of survey content

The customization of survey styling within popups is bound to the capabilities of the campaign editor. This means that the extent to which you can modify the appearance and design of surveys is limited to the options and tools provided in the editor itself.

Styling and Positioning of Popup

The customization options for styling and positioning the popup are confined to the HTML properties specified in the documentation. For example, you can set properties like toggle-button-image-url, position (options include right, left, or center), toggle-button-width, padding, margin, and others. However, you cannot create complex animations or apply advanced CSS effects that are not covered by these properties.