VOC Survey Widgets 1.0

Embedding a survey on a webpage

There are two mechanisms by which a survey can be embedded into a web page: via an IFrame or via a javascript widget.

IFrame

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.

Javascript Widget

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.

Embeddable Widget

To add an embeddable survey widget onto a web page, add the following HTML markup:

1. Add an empty DIV element to the page to act as a placeholder for the survey content.

<div id=”survey_target”></div>

2. 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>

3. 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.