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

**URL:** <https://community.sitejet.io/t/tutorial-how-to-trigger-an-overlay-only-once-on-page-load/513>\
**Category:** How-to\
**Tags:** cms\_presets, cms\_code\
**Created:** [July 9, 2021, 5:35am UTC](https://community.sitejet.io/t/tutorial-how-to-trigger-an-overlay-only-once-on-page-load/513 "2021-07-09T05:35:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [July 9, 2021, 5:35am UTC](https://community.sitejet.io/t/tutorial-how-to-trigger-an-overlay-only-once-on-page-load/513/1 "2021-07-09T05:35:24Z")

</div>

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

```auto
//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.

---

<div class="post-metadata">

**Author:** ![Roland\_Rossmanek](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@Roland\_Rossmanek](https://community.sitejet.io/u/Roland_Rossmanek)\
**Post date:** [July 12, 2021, 2:26pm UTC](https://community.sitejet.io/t/tutorial-how-to-trigger-an-overlay-only-once-on-page-load/513/2 "2021-07-12T14:26:31Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [July 12, 2021, 2:51pm UTC](https://community.sitejet.io/t/tutorial-how-to-trigger-an-overlay-only-once-on-page-load/513/3 "2021-07-12T14:51:03Z")

</div>

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)](https://community.sitejet.io/t/overlays-trigger-once-per-visitor-avoid-refresh-triggers/268)