Website survey widget
A website survey allows you to gather feedback directly from website visitors, via an easy-to-implement widget. This article presents you with some advanced settings for your website widget. Below is what the widget might look like on your site:
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.
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 Widget survey distribution is included in some Netigate licenses, but it can also be acquired separately as an add-on. If you do not see the Widget distribution and would like to add this feature to your package, please contact your account manager.
Widget settings
Supported question types:
- Radio button
- Net Promoter Score (NPS)
- Open text answer
Note: Other question types, such as checkbox, matrix questions may render incorrectly as radio buttons. Other question types than the 3 listed above are not supported.
The widget settings are split into three parts: Display, Configuration and Activation.
Display settings
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, it will render the survey in the parent container of the script, OR in the element provided in the position option (needs a valid html selector string). 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.
Background colour: The background colour of the survey button.
Text colour: The text colour of the survey button.
Configuration
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.
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 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 enclosed in HTML tags. Copy the whole script to paste it as HTML at the end of <body> in your website’s HTML document.
Reminder: Make sure the survey end date has not already happened, that the start date is in the past, and the survey is Activated. Otherwise, the widget will not appear on your site.
Using Google Tag manager with the Feedback Widget
After installation onto your site, you have the option to configure how the Widget displays based on logic created in Google tag manager. This means that you can choose to display the widget when actions are taken like:
-
- Downloading a file
- Inputting text into a field
- Landing on a certain page
- Only displaying to certain users
- And more…
Using Google Tag manager to create these rules would be customer specific. Meaning, the way that a trigger is setup for you might be different than how it gets setup for someone else. Due to this, it is difficult for us to create examples on how you might create rules.
Instead, we recommend you work with a developer on your side, or even with Google Tag Managers Help Center, to determine how best to create these triggers for your specific sites code base.
Override options
Customers can modify various aspects of the widget using their own CSS, such as the following examples:
- Changing the font style by applying custom font rules.
- Adjusting padding, margins, or spacing to better fit their design
- Setting widget borders, including border color, thickness, and rounding
Important Notes:
- These changes will apply to all versions of the widget on the site.
- Modifications are done via the website’s CSS.
- While customers can customize styles freely, these changes are not officially supported by Netigate.
If these customizations are needed, customers will have to have their internal development team to implement and manage those changes.
Any widget settings in the tool can be overridden. There are two main properties
-
data-config (optional):
you can change these properties after copying the script.
All available overridable options:
-
buttonColor: any valid css color E.g. #ffffff -
textColor: any valid css color E.g. #0000 -
display:it should only be button or inlinedisplay=buttondisplay=inline
-
position: in case of button it should be left or right. In case of inline, the page element the widget is to be embedded in should be specified. It should be a valid html element selector, under copy selector.- Button (left or right)
position=rightposition=left
- Button (embedded/inline)
position=#page > div > div > div.subnavigation
- Button (left or right)
-
buttonText: define the text to display on the button (max 40 characters)
-
data-widgetId (mandatory)
valid widget id is required (pre-populated from distribution page)
Overriding options, example:
Button example:
<!-- Netigate Widget -->
<netigate-widget-config data-config="buttonColor=#ffffff,textColor=#006699,display=button,position=left,buttonText=Feedback" data-widgetId="418cbc43-13e4-4f44-b82e-73741dab733f">
<script type="module" async crossorigin src="https://netigate.se/modules/feedback-widget/netigate-feedback-widget.js?v=2023-12-11T08:52:43:0197"></script>
</netigate-widget-config>
<!-- End Netigate Widget --><!-- End Netigate Widget --><!-- Netigate Widget -->
<netigate-widget-config data-config="buttonColor=#ffffff,textColor=#006699,display=inline,position=#page > div > div > div.subnavigation,buttonText=Feedback" data-widgetId="418cbc43-13e4-4f44-b82e-73741dab733f">
<script type="module" async crossorigin src="https://netigate.se/modules/feedback-widget/netigate-feedback-widget.js?v=2023-12-11T08:52:43:0197"></script>
</netigate-widget-config>
<!-- End Netigate Widget --><!-- End Netigate Widget -->
Can you please provide more feedback so we can make this article better?