Skip to main content
All CollectionsCollectWebsite Channels - General
Best Practices: Single Page Application (SPA)
Best Practices: Single Page Application (SPA)

In this article we'll describe 2 solutions to implementing zenloop surveys on Single Page Application websites.

L
Written by Lisa Rentrop
Updated over 2 years ago

By default, it's only possible to fire one website survey per webpage which could cause issues for Single Page Application websites.

There are some workarounds that can help with implementing more than one survey when using SPA.

Contents:

iFrame

Firstly, implement one survey as usual (whether Website Embed or Website Overlay)

Then, to implement another survey, you should use an iFrame. With this workaround, it's possible to fire more than one survey on one page.

In the example below, we have created 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. Create both surveys in zenloop and copy JavaScript codes

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

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

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

4. Add the Website Overlay survey to your main code

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

...
<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=SURVEY_HASH_ID">
</script>
...

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

...
<BODY>

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

Please note: Throttling and Time Delay setting of the Website Overlay surveys will work without any issues, even when embedded in the iFrame.

Google Tag Manager

It is possible to fire multiple surveys when using GTM, but the triggers have to be based on the History Change trigger type.


For every "History Change", you can check the current step of the Customer Journey (especially with the URL change) and based on that, fire a matching survey.


Many manuals can be found online, such as this one.

Did this answer your question?