Website survey widget
Table of contents
A website survey allows you to gather feedback directly from website visitors, via an easy-to-implement javascript widget.
How to create a website widget
To get started, go to the Distribution area for your selected survey and click on Website survey.
You will be redirected to a Widget distribution method page with all settings set to their default values.
Note: The Website survey feature is included in Netigate’s Enterprise license, but it can also be acquired separately as an add-on. If you would like to add this feature to your package, please contact your account manager.
Widget settings
The widget settings are split into four parts: Display, Configuration, Advanced Settings and Activation.
Display settings
Width: Adjust the width of the survey widget popup, in px or %. maximum 1200 px, minimum 350 px
Height: Adjust the height of the survey widget popup, in px or %. maximum 1200 px, minimum 350 px
Note: The widget’s popup width and height is responsive to different screen sizes and devices, and will only ever appear at a maximum of 100% of the viewport.
Survey button: Toggles the visibility of the survey button.
The survey button is positioned at the edge of the browser window, and follows the visitor as they scroll. It is visible above all other content. Clicking it triggers the survey widget. If this option is disabled, a JavaScript function can be used to trigger the survey popup programmatically (see ‘Get code’ section below). The following button options are available when the survey button is enabled:
Button text: Define the text on the survey button. max 40 characters
Button placement: Define the position of the survey button. Available options: Left, Right, Bottom.
Background color: The background colour of the survey button.
Text color: The text color of the survey button.
Configuration
Specified domains (white-listed domains): Add the domain(s) where the survey widget should appear. If this list is empty, all domains will be allowed. This can be used for extra security or for specifying which subdirectories the survey should be displayed on. Example : www.netigate.net/articles/* .
Devices to display on: Determines which devices the widget will appear on. Available options: All devices , Desktop , and Mobile and tablet . This will be assumed from the browser information.
Single answer per respondent: Turn this option on to prevent visitors from answering the same survey multiple times (on the same device). This is based on a cookie that lasts for 365 days. If a visitor has already answered the survey, the widget will not initiate again.
Display rate: Set the probability each visitor has of seeing the widget. If set to 100%, all visitors will see it.
Advanced settings
Custom variables (AKA Background Data labels): Custom variables allow you to gather additional, peripheral information about your respondents, e.g. the email addresses of customers who are logged in to your site. Once defined here, you can pass values of these variables for each respondent by passing a JSON object after initiating the survey widget.
There are two types of Custom variable available:
● Ordinal: Will present the background data as a dropdown question type in the report. This allows you to filter on aggregated answers. It is good for information types such as ‘Country’.
● Textbox: Will present the background data as open-text answers in the report. This is good for information types such as ‘Comments’.
In the list of Custom variables you can see all background data labels for this survey even if they have been added via other distribution methods.
Note: If a custom variable is imported into the survey as a background data question, it’s impossible to delete it until you remove it from the survey.
Example
Case: You want to know which page the visitor is answering the survey on because the feedback you are getting is only relevant to it. To do this you might want to save the page title as additional information to what the respondent is already answering.
Solution: Add a Custom Variable named ‘Page’ and set it as ‘ordinal’. Next, use the custom variable ID provided in the list, and use it in a JSON object after the widget’s main code snippet, like below:
// Your Widget’s main code snippet would be here // Read more about the widget’s main code snippet further down in this document // Then you apply your custom variables (background data labels) ntgtWidget("bgData", { 788290: "landing-page-133" // Probably used a JS variable });
Activating your website survey widget
Activation: Turn this off to temporarily deactivate the widget independently of the rest of the distribution methods. This setting is activated by default.
Get the widget code and integrate it on your website
After saving your changes, take the Javascript (JS) code snippet and run it on your website.
To do so, click Get code at the bottom of the Widget page after saving your changes. You can also find a Get code button for each widget distribution method in the distributions list of the survey.
There you can find the Widget’s main code snippet (Javascript) enclosed in HTML tags. Copy the whole script to paste it as HTML in your website’s HTML document. Alternatively, disregard the <script> and </script> HTML tags to use it as Javascript.
Reminder: Make sure the survey end date has not passed, that the start date is in the past, and the survey is Activated. Otherwise, the widget will not initiate.
Example of Netigate’s Widget main snippet:
<!-- Netigate Widget --> <script> (function(w, d, s, o, f, js, fjs) { w["NetigateWidget"] = o; w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments); }, js = d.createElement(s), fjs = d.getElementsByTagName(s)[0], js.id = o, js.src = f, js.async = 1, fjs.parentNode.insertBefore(js, fjs); })(window, document, "script", "ntgtWidget", "https://widget.netigate.se/test/widget.min.js"); ntgtWidget("widgetId", "XXXXXXXX-XXXXX-XXXX-XXXX-XXXXXXXXXXXX"); </script> <!-- End Netigate Widget -->
Initiation function (Javascript): Use this when you want to trigger the widget programmatically. It’s ideal for if you have hidden the survey button and you want to ask for feedback after a specific action a visitor has taken on your website. You can find this Javascript function in Get code modal. Example cases: exit-intent by visitor, or, successful item purchase.
Initiation function:
ntgtWidgetTrigger();
Advanced Widget settings
Note: All code snippets provided in this document are always meant to be used and run after the main Widget snippet and as Javascript code.
Override options
Any widget settings in the tool can be overridden the moment you are running the Javascript widget script with a JSON object. This gives you more flexibility on custom solutions for the segmentation of target groups. You can’t change specified (white-listed) domains or add new Custom variables (BGD labels).
Overriding options, example:
(function(w, d, s, o, f, js, fjs) { w["NetigateWidget"] = o; w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments); }, js = d.createElement(s), fjs = d.getElementsByTagName(s)[0], js.id = o, js.src = f, js.async = 1, fjs.parentNode.insertBefore(js, fjs); })(window, document, "script", "ntgtWidget", "https://widget.netigate.se/test/widget.min.js"); ntgtWidget("widgetId", "5bc8f5fa-1e17-XXXX-XXXX-b607f5b3b38e"); ntgtWidget("overrideOptions", { height: 50, buttonText: "We ♥ feedback" });
All available overridable options:
ntgtWidget("overrideOptions", { activateSideButton: true, buttonBackground: "#006699", buttonText: "#ffffff", buttonTextColor: "Give us feedback!", displayRate: 50, height: 100, heightMetric: "%", placement: "Left", showOnDesktop: true, showOnMobile: true, singleAnswerPerVisitor: false, width: 132, widthMetric: "px" });
Create a new respondenton load (hidden setting)
By default this option is true. This can only be changed by manually setting the option to false after initiating the widget.
When true, a new respondent (and thus a new answer set) is created on every survey load. When false, the same respondent is recognised via a cookie and continues answering only if they haven’t finished the survey before.
Create a new respondent on every load, example:
ntgtWidget("overrideOptions", { createNewRespondentOnLoad: false });
Disable flag
You can use the following function if you intend to hide the survey for a specific target group or user.
How to disable a widget for some or all visitors, example:
ntgtWidget("disable", !successfulPurchase);
Debug flag
Use this flag if you want to log informative warning messages in the console of the website where you are integrating the widget. This might be helpful the first time you are integrating a widget for test purposes.
Debug flag, example:
ntgtWidget("debug", true);
Can you please provide more feedback so we can make this article better?