[Tutorial] How to trigger an overlay only once on page load

Community How-to
,
1

Hi!
Here is a tutorial on how to use an Overlay and make it to be triggered on page load only once.
P.S. I’ve created a small JS function that you can use on your project

Video (audio included)

JS

//Show Overlay Function
//Delay is in milliseconds
function openOverlayOnlyOnce(OverlayID, TriggerID, Delay){
    const storage = localStorage;
    const storageOverlayItem = "overlay"+OverlayID;
    if ($(OverlayID).length){
        if (!storage.getItem(storageOverlayItem)) {
            storage.setItem(storageOverlayItem, true);
            //Trigger the Overlay
            setTimeout(function(){
              $(TriggerID+" a").trigger("click");
            }, Delay);
            
        }        
    }

}



//When document is loaded
$( document ).ready(function() {
    //Open the Overlay only once
    openOverlayOnlyOnce("#ed-65140450","#ed-65140447", 1300);
});

Hope this helps.

3 Likes
2

Thank you for this solution. As a beginner I will try to integrate it. Too bad that there is no simple solution from sitejet here, where you can set your popup itself. I am used to this from wordpress and other editors. Is this technically not solvable in sitejet? There seems to be a need for it. When I think of the many websites where a popup popped up because of Corona…

3

Hi! I guess this is a temporary solution right now.
There is a feature request for this (and you can add your input there): Overlays: Trigger once per visitor (avoid refresh triggers)

1 Like