Installing the widget on your website

9 min read12
Copy for AI:

The widget is your survey running inside your own website, without depending on anyone opening an email. You paste a snippet once and WiseData NPS handles the rest: when it shows up, to whom, how often and what happens after the answer.

This article follows one example from start to finish: Sanches Accounting wants to measure how satisfied its portal users are, at app.sanches.com.

Before you start

Three things must be ready, in this order:

  1. A survey created with the Website / Embed channel selected in the channels step. The code is only generated after the survey is saved β€” before that, the panel tells you to save first so the code carries the right ID.
  2. Your website domain authorized (step 1 below). Without it the widget simply does not load, and no error is shown on the page.
  3. Access to the site's HTML, or to a tag manager. If someone else maintains the site, the snippet from step 2 is what you hand them.

Embed does not work for eNPS or Competition surveys β€” the first is internal, the second is targeted, and neither makes sense open to any visitor.

Step 1 β€” Authorize your website domain

Go to Channels β€Ί Embed settings β€Ί Authorized Domains and register the site address β€” in our example, sanches.com. Type the domain only: if you paste a full URL, with https:// or a trailing slash, the field cleans it up for you.

A registered domain also covers www and its subdomains. So sanches.com already authorizes www.sanches.com and app.sanches.com β€” Sanches does not need to register all three. That is why registering the root domain beats registering a specific subdomain.

While the list is empty, nothing works. That is deliberate: a survey open to the whole internet would take answers from any page that copied your snippet, and your data would be contaminated without anyone noticing.

Step 2 β€” Copy the survey code

The code lives in two places, identical in both: in the Website / Embed settings step while creating or editing the survey (Integration code field), and on a saved survey's detail page, in the Widget code card. It looks like this:

<script src="https://cdn.wisedatanps.com/embed/widget.min.js" data-survey="YOUR_SURVEY_ID" async></script>

data-survey is what ties the snippet to that specific survey. Each survey has its own β€” do not reuse an old survey's snippet assuming it is the same.

Step 3 β€” Paste it into your site

Paste it inside <head> or right before </body>, on every page where the survey may appear. The async attribute keeps it from holding your page back.

Do not try to limit pages by choosing where to paste the snippet: that is what Page targeting in the survey settings is for, which accepts wildcards (/checkout/*) and whose deny list takes precedence over the allow list. Paste everywhere and filter in the panel β€” that is the path you can change later without touching the site.

Tell it who is answering

This is the step that changes the survey's value the most, and the only one the copied snippet does not include. As it comes, every answer arrives anonymous: you get the score, but not the person.

If your site has a logged-in area β€” like the Sanches portal β€” add the person's details to the tag itself:

<script src="https://cdn.wisedatanps.com/embed/widget.min.js"         data-survey="YOUR_SURVEY_ID"         data-user-id="8421"         data-user-email="maria@company.com"         data-user-name="Maria Andrade"         data-user-traits='{"plan":"Pro","city":"GoiΓ’nia"}'         async></script>

You get three things out of it:

  • The respondent's name shows on the feedback card and in the customer details, instead of "anonymous respondent".
  • One person answers once, even switching browsers or computers β€” the check moves to data-user-id instead of the device.
  • Traits become analysis cuts: with plan filled in, Sanches can read Pro customers' scores apart from basic ones. If a trait is named phone, its value is used as the respondent's contact number.

Traits have a ceiling: up to 10 attributes, with simple values (text, number or yes/no). Anything beyond that is discarded silently, so don't use the field as a dump of user data β€” use the few labels you will actually segment by.

In anonymous surveys none of this shows in the panel: name, email and traits stay hidden even though they were sent. The promise of anonymity outranks identification.

Single-page apps (React, Vue, Angular)

On sites that change screens without reloading, the snippet runs once, on the first load. That has three practical consequences.

Identification arrives later. On first load the visitor usually isn't even logged in yet. For that case, tell the widget as soon as you know who the person is:

window.WiseDataNPS.identify({   id: '8421',   email: 'maria@company.com',   name: 'Maria Andrade',   traits: { plan: 'Pro' } });

You can call it before the widget finishes loading β€” the call is queued and picked up. And call it again when the user changes (sign out, sign in as someone else), otherwise the second person's answer lands under the first one's name.

When someone simply signs out, say so too:

window.WiseDataNPS.reset();

Without it, the last user's identification stays in the widget's memory until the page reloads β€” and an answer given after they left arrives under the name of whoever is already gone. reset() only forgets who was identified: it does not close a survey already open on screen. That is the next item.

An open survey does not leave the screen on its own. It only disappears once the visitor answers or dismisses it β€” until then it rides along through your site's screen changes. If the survey is for logged-in people, mount the widget inside the logged-in area, not at the root of the application: at the root it stays up when the person is taken to public screens such as sign-in or password reset. And when they leave that area, take the survey with them:

document.querySelectorAll('.wdnps-container')   .forEach(function (el) { el.remove(); }); window.WiseDataNPS.reset();

Pay extra attention with the Time on page and Exit intent triggers: they can fire after the person has already moved on, and the survey shows up where you did not want it.

Page targeting and "after N pages" only see the first screen. With no reload, the evaluated URL is the entry one and the page count never advances. On these sites prefer the Immediate, Time on page or Exit intent triggers, and avoid relying on URL rules. Note that the URL recorded on the answer follows a different logic: it is the screen the person was on the moment they submitted, and it is what shows under Response Origin in the panel.

Choosing where the survey shows up

The display mode β€” Popup, Slide-in or Inline β€” is set in the survey settings and does not need repeating in the code. Popup opens centered after a few seconds; slide-in slides in at the bottom-right; inline lives inside the page itself, with no close button.

In inline mode the survey renders exactly where you pasted the snippet by default β€” no wrapper element needed. To send it elsewhere on the page, point at the element:

<script src="https://cdn.wisedatanps.com/embed/widget.min.js"         data-survey="YOUR_SURVEY_ID"         data-target="#survey-area"         async></script>

There is also data-mode, which forces a mode other than the configured one. Use it sparingly: the day someone changes the mode in the survey and nothing changes on the site, the answer will be that forgotten attribute in the HTML.

When the widget does not appear

The widget fails silently on purpose β€” it never breaks your page nor shows an error to the visitor. Check in this order, which is the order of frequency:

  • Is the domain authorized? This is cause number one. Remember a root domain covers its subdomains, but that does not extend across different domains.
  • Is the survey running? A draft, paused, finished or out-of-window survey shows nothing.
  • Have you already answered or dismissed it? Whoever answers doesn't see it again, and whoever closes it enters the configured snooze days. To test as a fresh visitor, use a private window.
  • Is the sampling rate low? At 20%, four out of five visitors see nothing β€” and that includes you.
  • Does page targeting match the current URL? The deny list takes precedence over the allow list.
  • Has the trigger fired? With exit intent on desktop, the widget only shows when the cursor leaves through the top of the screen; on mobile it waits ten seconds.

What each plan unlocks

The widget itself is available on every plan, and sends through it are unlimited β€” they don't consume the email or WhatsApp quota. What changes with the plan is:

  • How many domains you can authorize: one on Free, two on Pro, unlimited from Business up. The screen lets you type more, but the server refuses anything above your plan.
  • Frequency cap (don't repeat the survey to the same person for N days) is available from Pro up.

Where to go next

  • Sending channels β€” how embed compares to email and WhatsApp, and each one's metrics.
  • Creating and sending surveys β€” display rules, triggers and post-response actions, step by step.
  • Results and reports β€” where to read the answers, including NPS by website page.
  • Alerts β€” how to be notified the moment a detractor answers.

In short: authorize the domain under Channels, paste the survey snippet on every page of the site, add the logged-in person's details so you don't collect anonymous answers, and settle everything else β€” when it shows, to whom and how often β€” through the display rules in the panel, without touching the HTML again.

Was this article helpful?