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.
How to create an embed link
- Select a survey and go to the Publish tab.
- Click Add New Collector.
- Click Create under the Public Link option in the Public Access section to publish your survey.
- 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 or Thank You 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 or thank you page in one of the following ways:
- A Thank You page that opens within the iFrame.
- 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'
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> |
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho FSM Video Tutorials
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Create a Hyperlink for Your Survey
Overview A hyperlink allows you to embed your survey link behind a clickable word or phrase, making it more visually appealing than displaying a plain URL. You can insert the hyperlink into emails, blog posts, documents, or web pages so respondents ...Embedding a SAML Survey Link as a Hyperlink
How to embed survey for SAML respondents as a hyperlink Select the required survey and click the Builder option from the left pane. Click the Publish tab at the top of the page. Click Continue below the Org Group Members Signed in via SAML collector. ...Website Insert
Post a survey on your website as an embedded survey by inserting the code into your website's code. Javascript and pop-up embeds have been folded into pop-up surveys with the introduction of this feature. Pop-up Survey As Embed Pop-up Survey Post ...Is there a way to add a survey to emails, where it automatically sends a feedback survey to someone after they have used Zoho Chat on our website?
In Zoho Survey, you can embed a survey with the help of any email marketing tool. However, we do not support any feature that automatically sends feedback surveys, since it is based on the functionality of websites. We would suggest you contact Zoho ...How can I add a question that pops up, but gets redirected to a website?
You can use the pop-up survey for this, and embed the survey questionnaire on your website. You can also use the final page of your survey to redirect to a URL that you specify.
New to Zoho LandingPage?
Zoho LandingPage Resources