To use a custom trigger, first go to the 'delivery' section of the survey editor and select custom trigger. The needed Javascript and survey ID will be displayed.
This code can be combined with some Javascript to create all kinds of unique triggers.
Some examples of how to do this follow. Please be aware you must have the ability to edit the HTML source of your website to use these. If you do not, you will need to contact your webmaster or developer.
When using the examples you will need change the element classes, and triggerDisplay code as needed for these examples to function on your website.
Example: Displaying a survey when clicking a link
<a href="javascript:asklayer.triggerSurvey('tpJ3q30jOmnUoNtucrtZ')">MyLink</a>
Example: Displaying a survey when clicking a button (that has the class name "my-button")
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.my-button');
button.onclick = function(e){
e.preventDefault();
// Replace the following with your unique custom trigger code copied from the editor
asklayer.triggerSurvey('kBbharRQbmM2rDKw2wUA');
};
});
</script>
Example: Displaying a survey when scrolling the website and the top edge of a specific image (class name: my-image) reaches the center of the window.
<script>
document.addEventListener('DOMContentLoaded', () => {
const element = document.querySelector('.my-image');
const offset = window.innerHeight / 2;
let fired = false, ticking = false;
document.addEventListener('scroll',()=>{
if(ticking || fired || !element || typeof asklayer === 'undefined') return;
window.requestAnimationFrame(() => {
const top = element.getBoundingClientRect().top;
if(top < offset){
// Replace the following with your unique custom trigger code copied from the editor
asklayer.triggerSurvey('kBbharRQbmM2rDKw2wUA');
fired = true;
}
ticking = false;
});
ticking = true;
});
});
</script>