Show survey on demand
To trigger Website Overlay after certain user actions you should do three things:
- Set time delay to
0
in the Settings area. - Start overlay hidden by setting
Zenloop.isVisible = false;
- Call show overlay method
Zenloop.showOverlay();
Full example:
<script id="zl-website-overlay-loader" async src="https://zenloop-website-overlay-production.s3.amazonaws.com/loader/zenloop.load.min.js?survey=<survey_hash_id>"></script>
<script>
var Zenloop = window.Zenloop || {};
Zenloop.isVisible = false;
</script>
<button onclick="Zenloop.showOverlay()">Show overlay</button>
Floating button example:
<script id="zl-website-overlay-loader" async src="https://zenloop-website-overlay-production.s3.amazonaws.com/loader/zenloop.load.min.js?survey=<survey_hash_id>"></script>
<script>
var Zenloop = window.Zenloop || {};
Zenloop.isVisible = false;
</script>
<style>
.zl-wo-btn {
right: -25px;
cursor:pointer;
padding:10px 10px 15px 10px;
position: fixed;
border-style: hidden;
top: calc(50% - 15px);
color: #fff;
background-color:#53cdb5;
transition: box-shadow .3s;
transform: rotate(-90deg);
}
</style>
<button class="zl-wo-btn" type="button" onclick="Zenloop.showOverlay()">Show overlay</button>
Result:
Updated over 3 years ago