NPS Widget

This article references all widget options specifically in reference to the NPS Widget and how best to implement the widget alongside the Post Idea Widget.  For basic set up instructions, see Getting Started with the Widget. 

Using Multiple Widgets on the Same Page

You can have more than one widget on a page, but there are a couple of things to keep in mind when setting this up.

You can only use the default trigger once on a page

If you have two widgets on a page, only one can be opened with the default trigger icon. The other needs to be opened from a custom link/trigger you set up.

This is also true if you're using the UserVoice and Classic Widget on the same page. One of them must use a custom link/trigger to open.

You only need the full widget code once on the page

If you're using the UserVoice widget multiple times on a page, you only need the main code once.

Simply add the custom trigger element to open the other widget (you can even specify what part of the widget that trigger is supposed to open).

Custom Trigger Option

Add the data-uv-trigger HTML attribute to your element.  For Example:

<a href="https://back-up-url-goes-here.com" data-uv-trigger="satisfaction">How are we doing?</a>

Alternatively you can use a JS approach:

UserVoice.push(['addTrigger', '#custom-trigger-element', {
  mode: 'satisfaction'
}]);

To choose which widget mode is used when the user clicks on the link, add the following to the HTML attribute:

data-uv-trigger="satisfaction"

This means you can swap it out what is between the quotation marks to these options:

• post_idea
• satisfaction 

Embed the Widget

Add your widget code into the HTML of your page inside this div tag:

<div data-uv-embed=""satisfaction"">Widget code goes here!</div>

The text between quotation marks is what determines which widget is displayed regardless of your widget settings when you generated the code. This means you can swap it out for these options:

• post idea
• satisfaction 

Enabling Autoprompt for NPS 

To enable Autoprompt, you will need to edit the Widget script that resides in your web site/application, and enable Autoprompt from within the Admin Console.

1. In your widget script, Identify the user (the script must run after the SDK has loaded). To ensure that users don’t get autoprompted too often, Autoprompt will only work if you have identified the user with an email or email and ID using the identify method.
2. Add the Autoprompt script. It must be added after the SDK, and below the Identify script. When this method is called, it verifies that the identified user should be prompted at this time, and then prompts the user for a NPS®.

   // UserVoice Autoprompt for NPS
   UserVoice.push(['autoprompt', {}]);

3. Enable Autoprompt in the Admin Console:
   1. Navigate to Settings → Widgets → Scroll down to Advanced setup → Autoprompts → Click Edit.
   2. Check the box and click Save.

If you’ve added the default trigger to your page, Autoprompt will appear as a popover targeted to that trigger. If there is no default trigger, then Autoprompt will appear as a toast since they do not have a default object to anchor themselves to. However, you can specify your own target HTML element:

// UserVoice Autoprompt for NPS with custom trigger
UserVoice.push(['autoprompt', {
  target: '#custom_target',
  position: 'bottom'
}]);

Alternatively, you can specify a particular HTML element the autoprompt will target as a popover by adding the data-uv-autoprompt attribute to the element:

<span id="custom_target" data-uv-autoprompt>Custom target</span>

Note: If multiple data-uv-autoprompt attributes are found on the page, the last one will be used.

Autoprompt in Javascript-Based Applications

If you use ajax to update your website rather than page loads, you can call the autoprompt method multiple times. Each time it is called, it checks if there are any new server-side prompts to display. If a new one is found, it will be displayed to the user.

Some examples include prompting after a simple ajax login, prompting after the user scrolls to the bottom of the page, or waiting 10 seconds after the page loads to prompt them.

Customizable Text