Website survey widget 2
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.
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 survey2.
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 CX licenses, 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 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 passed, that the start date is in the past, and the survey is Activated. Otherwise, the widget will not initiate.
Override options
Any widget settings in the tool can be overridden . There are two main properties
-
data-config (optional):
you can change these properties after coping 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?