Skip to main content
All CollectionsCollectWebsite Channels - General
How to Include Two Website Surveys on One Page
How to Include Two Website Surveys on One Page

Use the iFrame to show two surveys at once!

L
Written by Lisa Rentrop
Updated over 2 years ago

It's possible to include two website surveys on one website with a small trick. It doesn't matter whether you want to have one website overlay and one website embedded survey or two embed ones. The important thing is that one of them should be inserted into an iFrame.

In the example below, we will create one Website Overlay and one Website Embed survey that is stored in another HTML file so we can access it using iFrame from the main file.

  1. Please create both surveys in zenloop and copy HTML codes.

  2. Create an iframe in your main code and insert it in the desired place in your main code. Please adjust the styling according to your needs:

<iframe src="script.html" style="width: 100%; height: 300px"></iframe>

3. The iframe source should point to the new HTML file that contains the script with the website embed survey.

4. Add website overlay to your main code.

5. Test your code!

Main code example with the iFrame that points to the HTML file with Website Embed Channel and the Website Overlay Channel script itself:

<HTML>
<HEAD>
<TITLE>iFrame</TITLE>
</HEAD>
<BODY>

<iframe src="script.html" style="width: 100%; height: 300px"></iframe>

<script id="zl-website-overlay-loader" async src="https://zenloop-website-overlay-production.s3.amazonaws.com/loader/zenloop-compatibility.load.min.js?survey=VWx3bFFpaGMxTEVlUm91dFhlRkg2d3h2d1FNMEFNZWRGSmRJRUZiZEwrQT0%3D">
</script>

</BODY>
</HTML>

iFrame HTML page with the script containing Website Embed Channel script survey:

<HTML>
<HEAD>
<TITLE>script</TITLE>
</HEAD>
<BODY>
โ€‹
<script id="zl-website-overlay-loader" async src="https://zenloop-website-overlay-production.s3.amazonaws.com/loader/zenloop-compatibility.load.min.js?survey=NVI0NCtXbVJET3JhMTNHbHRGaXozRFB3MDJ2RGhwU2ZPY05aeXpEdHA3UT0%3D">
</script>
โ€‹
</BODY>
</HTML>

Example:

Did this answer your question?