What is NPS InApp Widget & how to use it?

Trigger and capture survey responses directly on your website.

NPS InApp lets you trigger and capture survey responses directly on your website. All you have to do is, set the preferred conditions, generate the HTML snippet for the survey and copy-paste the code to your website <body>. The snippet loads in the background, so it does not impact the performance of your website.

Let’s see how it works.

1. After creating your NPS Survey, navigate to the Share tab select InApp from the sharing options available below.

Screenshot 2024-11-12 at 12.23.11 PM.png

2. Edit the widget name and configure the survey conditions according to your preferences. The default time duration will be in days, but you are free to pick one from the available options in the dropdown. E.g. Days, Week, Months.

What is First Survey?

3. The First survey means triggering your NPS survey after the preferred action is called out. The selected action can be anything that is performed by the user—E.g. Contact creation, First purchase, first-order delivery, etc.

You can select the duration of when the first NPS survey has to be triggered.

Note: The action can be called out only in the HTML snippet. If you want to trigger the NPS survey to your preferred conditions, you’ll need to first generate the snippet and then work on the code. To generate the code snippet, you’ll need to click on the Generate Snippet button at the bottom right corner.

For example:

<script>(function(){var e="ss-widget",t="script",a=document,r=window;var s,n,c;
r.SS_WIDGET_TOKEN="ntt-c83d98";r.SS_ACCOUNT="templates.surveysparrow.com";
r.SS_SURVEY_NAME="GCS - NPS";if(!a.getElementById(e)){var 
S=function(){S.update(arguments)};S.args=[];
S.update=function(e){S.args.push(e)};r.SparrowLauncher=S;s=a.getElementsByTagName(t);c=s[s.length-1];
n=a.createElement(t);n.type="text/javascript";n.async=!0;n.id=e;n.src=["https://","templates.surveysparrow.com/nps/widget/",r.SS_WIDGET_TOKEN].join("");
c.parentNode.insertBefore(n,c)}})();</script>

<script> window.SparrowLauncher('popup', {
    email: '[email protected]', //add email id of user
    variables: {}, //add custom properties
    disableDebugLog: false //toggle to enable/disable console logs
}) ;</script>

There are 2 <script> tags in the above screenshot

In the 1st<script>tag, you’ll need to create the SparrowLauncher function
In the 2nd<script>tag, you’ll need to call SparrowLauncher.

SparrowLauncher has 2 arguments:

Action
Configuration object

Inside the configuration object, specify the email key, which will take the email id of the user. Variables key is to send custom variables created for the survey.

Now add the snippet inside the <body> of your website. Now you should be able to trigger your NPS survey directly on your website.

If first survey value is set, it’s important to add “createdAt” field to the SparrowLauncher function.

The createdAt timestamp will be taken as a reference time from which the surveys will be triggered based on the conditions set.

<script> window.SparrowLauncher('popup', {
    email: '[email protected]', //add email id of user
    variables: {}, //add custom properties
    createdAt: 1661508282
});
</script>

Note: createdAt should be of UNIX timestamp format (in milliseconds). Link to the UNIX timestamp for your reference:https://www.unixtimestamp.com/

What is Repeat Survey?

4. Repeat Survey means triggering the NPS Survey after the first NPS Survey is shown to the user. (Note- this is a recurring trigger)

Showing NPS after the survey has been declined

5. If the user has declined the NPS survey, you can simply enable the toggle and set the preferred duration to when you want the survey to be shown again.

6. Scroll below to add more conditions like triggering the survey by property Tags or by URL.

Note: Properties include contact property and custom variables. If you’re using custom variables, then you’ll need to add it to the variables section on SparrowLauncher.

<script> window.SparrowLauncher('popup', {
    email: '[email protected]', //add email id of user
    variables: {
                cv_number: 5
    },
    disableDebugLog: false //toggle to enable/disable console logs
}); 
</script>

7. You can also pass the customer parameters in the InApp Widget. Please take a look at the below code block to understand how the parameters are passed in the snippet.

The custom parameters that are created for this survey:

How it is passed:

<script>(function(){var e="ss-widget",t="script",a=document,r=window;var s,n,c;
r.SS_WIDGET_TOKEN="ntt-c83d98";r.SS_ACCOUNT="templates.surveysparrow.com";
r.SS_SURVEY_NAME="GCS - NPS";if(!a.getElementById(e)){var S=function(){S.update(arguments)};S.args=[];
S.update=function(e){S.args.push(e)};r.SparrowLauncher=S;s=a.getElementsByTagName(t);c=s[s.length-1];
n=a.createElement(t);n.type="text/javascript";n.async=!0;n.id=e;n.src=["https://","templates.surveysparrow.com/nps/widget/",r.SS_WIDGET_TOKEN].join("");
c.parentNode.insertBefore(n,c)}})();</script>

<script> window.SparrowLauncher('popup', {
    email: '[email protected]', //add email id of user
    variables: {
                "name": "Kane",
                "id": "ST123"
    }, //add custom properties
    disableDebugLog: false //toggle to enable/disable console logs
});
</script>

8. You can also target the group sampling by choosing the percentage of website visitors who scrolls through your website or triggering the survey based on how long a user stays on your site.

9. Enable the toggle if you want the survey to be anonymous.

10. Navigate to Design to choose how you want your NPS Survey to be displayed on your website. It can be shown either as a card or as a full-width card.

11. Customize the Height of the in-app widget. Choose the Button style and Colors to meet your application’s design standard.

Once you’re done, click on Generate Snippet button at the bottom right corner to generate the HTML snippet.

12. Copy-paste the generated snippet to your website <body>. Once you copy the snippet, click Done.

That’s it!
Now you should be able to trigger your NPS survey directly on your website.

Capture survey responses directly on your website
Gain instant insights from your respondents of the value that you provide
Get valuable feedback that helps you improve your service and drive significant results