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
Post a survey on your website as a pop-up 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. The pop-up survey also supports recording data from a URL parameter, a cookie, or a script variable with the help of custom variables. Also, single click submit has been added for radio button questions in the pop-up survey.
To create a pop-up survey:
-
Go to the Launch tab.
-
Click
Pop-up Survey
in the
Website Insert
section.
-
Select from the following in the Pages with pop-up section to decide the pages that will show the pop-up:
-
Show on all pages
: To show the pop-up on all the pages
-
Show on chosen pages
: To show the pop-up only on selected pages
-
URL
: Enter the URL starting with '/'
-
Click the
Data from the dropdown list and select one of the following:
-
URL Param
-
Cookie Value
-
Script Variable
-
Type the name of the variable in the
Variable name
field.
-
Click the
Custom variable
dropdown list to choose the custom variable you want to use. If you haven't created any custom variables yet, click
Create Custom Variable
to create new ones.
-
Select from the following in the
Pop-up timing
section to assign a time for the pop-up to occur:
-
Immediately after the page loads
-
After __ seconds on the page
-
After an exit intent
-
After scrolling __ % of the page
-
Select from the following in the
Pop-up position
section to set an alignment for the pop-up:
-
Top left
-
Top right
-
Center
-
Bottom left
-
Bottom right
-
Select one of the following options in the
Pop-up height
section to set up the height (between 350px and 700px) of the pop-up:
-
Always keep the height fixed
-
Enter the height in the
Fixed height
field.
-
Adjust the height based on the question size
-
Enter the minimum and maximum height required in the
Minimum height
and
Maximum height
fields respectively.
-
Select one of the following options in the
Minimize pop-up
section to choose the view when the pop-up is minimized:
-
Minimize the pop-up only on the current page
-
Always keep the pop-up minimized until the user maximizes the survey
-
Select one of the following options in the
Close pop-up
section to choose the view when the pop-up is closed:
-
Close the pop-up only on the current page
-
Do not show this again
-
Select the checkbox in the
Pop-up options
section if you want to hide the pop-up when the survey is redirected to a custom end page based on a restriction that has been set up.
-
Click
Generate Code
. You can use the generated script on all the pages of your website after the <body> tag.
-
Click Reconfigure to generate the code again.
Sample Script
<script>(function(w,d,s,u,f,m,n,o){o=' https://survey.zohopublic.com ';w[f]=w[f]||function()(w[f}.p=w{f}.p||[]).push(arguments);};m=d.createElement(s),n=d.getElementsByTagName(s)[0];m.async=1;m.src=o+u;n.parentNode.insertBefore(m,n);zs_intercept(o,'LKzzHm',{});})(window, document, 'script', '/api/v1/public/livesurveys/LKzzHm/popup/script', 'zs_intercept');</script>
As Embed
To embed your survey on a website:
- Go to the Launch tab.
- Click Website Insert and select As Embed.
- Select the embed option you'd like to use, then follow the corresponding instructions:
- Click the code in the corresponding box to copy the code to the clipboard.
- Paste the code onto your website.
To redirect a 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 the following ways:
- A Thank You page that opens within the iFrame. Or,
-
A
Thank You
page that expands onto the whole window, (or the top window). You can get this done by appending
"?target=top"
at end of the survey URL in the embedded iFrame code.
To 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
}
})
To 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>
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:
Still can't find what you're looking for?
Write to us: support@zohoforms.com
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?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Bigin?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
Related Articles
Is it possible to display the survey as a popup HTML?
Javascript and pop-up embeds have now been folded into pop-up surveys. Read more on our Website Insert options.How does the insert variable feature work?
If you want to pipe in custom variables or variables from previous questions and customize the follow-up questions, you can use the Insert Variable feature, and then select the variable you want to use from the list. Read more on Piping.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.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 do I insert an introductory paragraph at the start of my survey?
You can use the Text Field (Heading/Description) question type for this.