Embed Your Survey into Your Website with Zoho Survey - Online Help Guide

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. 
  1. Pop-up Survey
  2. As Embed

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:

  1. Go to the Launch tab.
 
  2. Click Pop-up Survey in the  Website Insert section. 
  3. 
Select from the following in the Pages with pop-up section to decide the pages that will show the pop-up:

    1. Show on all pages : To show the pop-up on all the pages
 
    2. Show on chosen pages : To show the pop-up only on selected pages
 
    3. URL : Enter the URL starting with '/' 
  4. Click the Data from the dropdown list and select one of the following:
    1. URL Param
    2. Cookie Value
    3. Script Variable
  5. Type the name of the variable in the Variable name field.
  6. 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.
  7. Select from the following in the  Pop-up timing  section to assign a time for the pop-up to occur: 
 
    1. Immediately after the page loads
 
    2. After __ seconds on the page
 
    3. After an exit intent 
 
    4. After scrolling __ % of the page
 
  8. Select from the following in the  Pop-up position  section to set an alignment for the pop-up: 
 
    1. Top left
 
    2. Top right
 
    3. Center
 
    4. Bottom left 
    5. Bottom right
 
  9. 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:
    1. Always keep the height fixed 
      1. Enter the height in the Fixed height field. 
    2. Adjust the height based on the question size
      1. Enter the minimum and maximum height required in the Minimum height and Maximum height fields respectively.
  10. Select one of the following options in the Minimize pop-up section to choose the view when the pop-up is minimized:
    1. Minimize the pop-up only on the current page
    2. Always keep the pop-up minimized until the user maximizes the survey
  11. Select one of the following options in the Close pop-up section to choose the view when the pop-up is closed:
    1. Close the pop-up only on the current page
    2. Do not show this again
  12. 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.
  13. Click Generate Code . You can use the generated script on all the pages of your website after the <body> tag. 
  14. 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,'LKzzH
m',{});})(window, document, 'script', '/api/v1/public/livesurveys/LKzzHm/popup/
script', 'zs_intercept');</script>


As Embed 

To embed your survey on a website:  

  1. Go to the  Launch tab.  
  2. Click  Website Insert and select  As Embed.   
       
  3. Select the embed option you'd like to use, then follow the corresponding instructions:  
    1. Click the code in the corresponding box to copy the code to the clipboard.  
    2. 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: 
  1. A Thank You page that opens within the iFrame. Or, 
  1. 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 CRM Training
      Redefine the way you work
      with Zoho Workplace

        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 CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION









                                    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.




                                        Manage your brands on social media

                                          Zoho Desk Resources

                                          • Desk Community Learning Series


                                          • Digest


                                          • Functions


                                          • Meetups


                                          • Kbase


                                          • Resources


                                          • Glossary


                                          • Desk Marketplace


                                          • MVP Corner


                                          • Word of the Day


                                            Zoho Marketing Automation

                                              Zoho Sheet Resources

                                               

                                                  Zoho Forms Resources


                                                    Secure your business
                                                    communication with Zoho Mail


                                                    Mail on the move with
                                                    Zoho Mail mobile application

                                                      Stay on top of your schedule
                                                      at all times


                                                      Carry your calendar with you
                                                      Anytime, anywhere




                                                            Zoho Sign Resources

                                                              Sign, Paperless!

                                                              Sign and send business documents on the go!

                                                              Get Started Now




                                                                      Zoho TeamInbox Resources



                                                                              Zoho DataPrep Resources



                                                                                Zoho DataPrep Demo

                                                                                Get a personalized demo or POC

                                                                                REGISTER NOW


                                                                                  Design. Discuss. Deliver.

                                                                                  Create visually engaging stories with Zoho Show.

                                                                                  Get Started Now









                                                                                                        Wherever you are is as good as
                                                                                                        your workplace

                                                                                                          Resources

                                                                                                          Videos

                                                                                                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                          eBooks

                                                                                                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                          Webinars

                                                                                                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                          CRM Tips

                                                                                                          Make the most of Zoho CRM with these useful tips.



                                                                                                            Zoho Show Resources