Can I embed Survature surveys into my website?

Yes! Survature makes it easy to embed your survey into your own web page, through simple, standard iframes.

Requirements

  • Ability to add HTML to your page - A small snippet of html will be used to insert the iframe into your page
  • A wide enough page to insert a survey - The minimum width to properly display an AnswerCloud to your users is 750 pixels. It is recommended you use a page with a width of 900 pixels or greater to give your users ta more comfortable survey experience.

Getting your link

When choosing to share your survey, you’ll be presented with an option to share a link, or to embed your survey.

 

Select

Select "Embeddable iframe" under the link

 

Choosing to embed the survey will give you a snippet of html which you can place into your own page or blog. This will load the survey as a standard iframe.

Listening for events

This is an advanced use - the iframe will trigger an event when a user completes their survey. You can listen for this event in order to trigger other actions once the survey is completed.

The event itself is sent from the iframe through postMessage, with the event data as ‘complete’. The following is an example listener which you could use inside of the host page to listen for the survey iframe to be completed:

    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var handler = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

handler(messageEvent, function(event) {
if (event.data === 'complete') {
/// Your survey complete handling goes here
}
}, false);

The survey sends three events, ‘loaded’, ‘next_page’, and ‘complete’.

Mobile adaptation

If you need the embedded survey to work on mobile (i.e. the 3rd party website is mobile friendly), the best bet is to pop the survey into a new tab containing just the iframe. In that case, just set the iframe’s width and height to 100%. For example, have your webpage say “Click here to take the survey” and the link click behavior be to open a new tab.

If the iframe must appear in a frame in-page, the following embedding method will ensure consistent results on mobile.

<style type="text/css">
@media screen (max-device-width: 776px) and (-webkit-min-device-pixel-ratio: 1.5) {
#survey-wrapper {
overflow: auto;
-webkit-overflow-scrolling: auto;
}

#survey-iframe {
height: 1px;
width: 1px;
width: 100%;
max-width: 100%;
min-width: 100%;
width: 100vw;
max-width: 100vw;
min-width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
}
}
</style>

<div id="survey-wrapper">
<iframe id="survey-iframe" frameborder="0" src=[your-survey-link] scrolling="yes"></iframe>
</div>