-
Notifications
You must be signed in to change notification settings - Fork 6
VOC Survey Widgets
There are two mechanisms by which a survey can be embedded into a web page: via an IFrame or via a javascript widget.
To embed a survey onto a web page using an IFrame, add the following HTML markup:
<iframe src=http://[Public App URL]/surveys/[Survey ID]></iframe>- Replace [Public App URL] with the URL of the public application.
- Replace [Survey ID] with the numeric ID of the survey to display.
A working HTML snippet with the [Public App URL] and the [Survey ID] correctly specified can be found in the survey tool admin interface at the bottom of the survey versions page
There are two JavaScript widgets available to add a survey to a content page. The embeddable widget will load the survey directly into the HTML. This will load the survey into the page as a visible element of the page content.
The invitation widget will load the survey through an invitation style pop-up window. This will show an invitation pop-up to the user on page load asking them whether they wish to take the survey. If the user accepts the invitation a new window is opened with the survey content.
To add an embeddable survey widget onto a web page, add the following HTML markup:
- Add an empty DIV element to the page to act as a placeholder for the survey content.
<div id=”survey_target”></div>- Immediately after the placeholder DIV created in the previous step, add the following HTML markup in order to fallback to the IFrame version for users without JavaScript.
<noscript>
<iframe src=http://[Public App URL]/surveys/[SurveyID]> </iframe>
</noscript>- Add the following HTML markup to the bottom of your content page.
<script type=”text/javascript” src=”http://[Public App URL]/widget/widget.js?survey_id=[Survey ID]&target_id=[Placeholder DIV ID]”></script>- Replace [Public App URL] with the URL of the public application.
- Replace [Survey ID] with the numeric ID of the survey to display.
- Replace [Placeholder DIV ID] with the ID of the placeholder DIV created in step 1.
To add an invitation survey widget onto a web page using the JavaScript widget, add the following HTML markup:
- Add an empty DIV element to the page to act as a placeholder for the survey content.
<div id=”survey_target”></div>- Immediately after the placeholder DIV created in the previous step, add the following HTML markup in order to fallback to the IFrame version for users without JavaScript.
<noscript>
<iframe src=”http://[Public App URL]/surveys/[SurveyID]”> </iframe>
</noscript>- Add the following HTML markup to the bottom of your content page.
<script type=”text/javascript” src=”http://[Public App URL]/widget/invitation.js?survey_id=[Survey ID]&target_id=[Placeholder DIV ID]”></script>- Replace [Public App URL] with the URL of the public application.
- Replace [Survey ID] with the numeric ID of the survey to display.
- Replace [Placeholder DIV ID] with the ID of the placeholder DIV created in step 1.
The following required URL parameters must be passed to the invitation.js script:
- Survey_id: ID number of the survey to load.
- Target_id: CSS ID of the container into which the survey will be loaded.
The following optional URL parameters may be passed to the invitation.js script:
- Modal=[true/false] (default: false) Controls whether the survey is loaded into a new window or replaces the invitation contents in the modal window when the user accepts the invitation.
- skip_invitation=[true/false] (default: false) Controls whether the user is shown an invitation to take the survey or whether the survey is loaded directly.
- stylesheet=[stylesheet_url]: Load the specified stylesheet into the page with the survey.
- Content_id: CSS ID of the main content container. This will be used to target ARIA tags when the invitation and survey are shown.
- Mobile_target_id: CSS ID of the mobile survey link container.