Embed Survey on a Website

Embed Survey on a Website

Overview

Embedding a survey on a website means inserting your survey directly into a webpage so that visitors can fill it out without being redirected to another page or URL. This is done by copying a small snippet of code generated by Zoho Survey and pasting it into your website's HTML, making the survey visible and accessible to anyone who visits that page.
  1. Select a survey and go to the Publish tab.
  2. Click Add New Collector.
  3. Click Create under the Public Link option in the Public Access section to publish your survey.
  1. The iFrame link is displayed as below. Click Copy to copy the iFrame link and embed in your website or webpage.

Redirecting the Survey End Page to the Top Window instead of the iFrame Window      

When a survey is embedded on a website in an iFrame, you can view the survey end page in one of the following ways:
  1. A Thank You page that opens within the iFrame.
  2. A Thank You page that expands onto the whole window, (or the top window). You can get this done by appending  "?target=top" at the end of the survey URL in the embedded iFrame code.

Get Notified Once a Survey is Submitted

To get notifications for survey submissions on the website, add the following event listener code to the parent website. You will be notified on your end once the survey is submitted.

Window.addEventListener('message', (message) => {
    if (message.data && message.data['zohosurvey_respondentStatus'] === 'completed') {
      // survey is finished
    }
}) 

Fix the iFrame window and avoid scrolling        

To avoid iFrame scrolling, you will need to adjust the height and width of your survey based on your current page. For this, we will pass the actual survey height and width for you to resize it. It will be in the following format:
 

data = { zohosurvey: {

height : surveyHeight,

width : surveyWidth,

action : "surveySize"

}}


As you receive the message on your web page, you will need to customize the height and width of the iFrame so that it fits well in the window. Once it fits the iFrame, certain functionalities wouldn't work as expected and you will need to handle scroll positions in a similar manner. We will send a script in the following format for you to customize.

data = { zohosurvey: { action : "moveScroll" ,

        position : position}} 


Sample Code      

You can use this sample code to customize the size of your iFrame:
<iframe src="<survey link>" frameborder='0'
   style='height:700px;width:100%;' marginwidth='0' marginheight='0' scrolling='auto'
   allow='geolocation' id='iframe-id'></iframe>
<script>
var iframe = document.querySelector("#iframe-id"); // change the id based on iframe's id
  function setIframeSize(data){
    if(data.zohosurvey ){
if(data.zohosurvey.action == "surveySize"){
iframe.style.height = data.zohosurvey.height + 'px';
       iframe.style.width = data.zohosurvey.width + 'px'
}else if(data.zohosurvey.action == "moveScroll"){
window.scrollTo(500, iframe.offsetTop + data.zohosurvey.position);} } }
  window.addEventListener('message', function(e) {
        setIframeSize(e.data);
} ,  false);
</script>