How to make a lightbox popup only appear once per visitor?

[GiovanniLo]

Hi everyone, 

I am very new to HTML.

I am currently using this script to create a Lightbox PopUp on my website using adobe Target

<script>
// Lightbox
var att_config = {
// =========================== USER DEFINED CONFIGURATION ===========================
// Use the main title to grab attention. Try to keep it under 40 characters!
title: "adidas Campus!",
// The sub title should entice your customer. Keep it short and sweet under 80 characters.
subtitle: "Le tue sneakers preferite sono di nuovo disponibili!",
// Customize the link that closes the lightbox. Keep it under 30 characters.
declineText: "NO, GRAZIE",
// Host your image and place a link to it here. The image should be clear and concise.
// Try to keep the dimensions to 400px wide x 500px high.
imageUrl: "Insert Here",
// The button text should provide clear instructions. Keep it under 30 characters for maximum impact.
buttonText: "ACQUISTA ORA",
// Once the customer has clicked, where do you want to redirect them?
buttonLink: "Insert Here",
// Time delay before the lightbox is shown, in seconds. Put a 0 to show the lightbox immediately, false to never show.
delay: 2,
// Set to true to close lightbox when the area outside the lightbox is clicked.
clickBackgroundToClose: true
// =========================== END USER DEFINED CONFIGURATION ===========================
};
(function(){"use strict";var title=null!=att_config.title&&att_config.title?att_config.title:"",subtitle=null!=att_config.subtitle&&att_config.subtitle?att_config.subtitle:"",buttonText=null!=att_config.buttonText&&att_config.buttonText?att_config.buttonText:"",buttonLink=null!=att_config.buttonLink&&att_config.buttonLink?att_config.buttonLink:"",declineText=null!=att_config.declineText&&att_config.declineText?att_config.declineText:"",template='\n<div id="att_lightbox">\n <div class="att_lightbox_background"></div>\n <div class="att_popup">\n <div class="att_lightbox_left">\n </div>\n <div class="att_lightbox_right">\n <div class="att_lightbox_right_contents">\n <h1 class="att_lightbox_header">'+title+'</h1>\n <p class="att_lightbox_subhheader">'+subtitle+'</p>\n <a href="'+buttonLink+'" class="att_lightbox_button" rel="nofollow noopener">'+buttonText+'</a>\n <a id="att_lightbox_close" href="#">'+declineText+"</a>\n </div>\n </div>\n </div>\n</div>\n",bgImage=null!=att_config.imageUrl&&att_config.imageUrl?"background-image: url("+att_config.imageUrl+");":"",style="\n#att_lightbox {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1000;\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 0;\n}\n.att_lightbox_background {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: black;\n opacity: 0.75;\n z-index: 1000;\n margin: 0;\n padding: 0;\n}\n.att_popup * {\n font-family: Helvetica, Arial, sans-serif;\n}\n.att_popup {\n max-width: 800px;\n max-height: 500px;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n z-index: 1001;\n border-radius: 1px;\n}\n.att_lightbox_left {\n max-width: 540px;\n width: 100%;\n height: 100%;\n background-color: white;\n "+bgImage+"\n background-size: auto 100%;\n background-position: center;\n}\n.att_lightbox_right {\n background-color: white;\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.att_lightbox_right_contents {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 20px;\n height: calc(100% - 40px);\n width: calc(100% - 40px);\n}\n.att_lightbox_header {\n text-align: center;\n font-size: 32pt;\n color: #221E1F;\n margin: 0;\n padding: 1rem;\n line-height: 1.35;\n}\n.att_lightbox_subhheader {\n font-size: 14pt;\n text-align: center;\n color: #221E1F;\n line-height: 1.35;\n margin: 20px 30px;\n padding: 0;\n}\n.att_lightbox_button {\n height: 42px;\n width: auto;\n min-width: 80%;\n background-color: #4CAF50;\n color: white;\n border-radius: 2px;\n text-decoration: none;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 11pt;\n margin: 10px;\n}\n.att_lightbox_button:hover {\n background-color: #388E3C;\n text-decoration: none;\n cursor: pointer;\n}\n.att_lightbox_button:active {\n background-color: #4CAF50;\n text-decoration: none;\n cursor: pointer;\n}\n.att_lightbox_button[disabled=disabled],\n.att_lightbox_button:disabled {\n background-color: #D8D8D8;\n text-decoration: none;\n}\n#att_lightbox_close {\n font-size: 12pt;\n color: #4A4A4A;\n text-align: center;\n text-decoration: none;\n margin: 10px;\n font-weight: 300;\n}\n#att_lightbox_close:hover {\n text-decoration: underline;\n}\n@media (max-width: 801px) {\n .att_popup {\n margin: 20px;\n }\n .att_lightbox_left {\n display: none\n }\n}\n",handlers=function(){var t=null!=att_config.delay&&att_config.delay?att_config.delay:5;function n(){document.getElementById("att_lightbox").style.display="none"}!1!==att_config.delay&&setTimeout(function(){att_config.fired||(document.getElementById("att_lightbox").style.display="flex",att_config.fired=!0)},1e3*t),document.getElementById("att_lightbox_close").addEventListener("click",function(t){t.preventDefault(),n()}),document.querySelector(".att_lightbox_background").addEventListener("click",function(t){att_config.clickBackgroundToClose&&(t.preventDefault(),n())})};injector({template:template,style:style,handlers:handlers});
"use strict";function injector(e){var t=null!=e.el&&e.el?e.el:document.body,l=document.createElement("div");e.templateClass&&l.classList.add(e.templateClass),l.innerHTML=null!=e.template&&e.template?e.template.replace(/(\r\n\t|\n|\r\t)/gm,""):"",t.appendChild(l);var n=document.createElement("style");n.innerText=null!=e.style&&e.style?e.style.replace(/(\r\n\t|\n|\r\t)/gm,""):"",document.head.appendChild(n),null!=e.handlers&&"function"==typeof e.handlers&&e.handlers()}})();
function injector(e) {
var t = null != e.el && e.el ? e.el : document.body,
l = document.createElement("div");
e.templateClass && l.classList.add(e.templateClass), l.innerHTML = null != e.template && e.template ? e.template.replace(/(\r\n\t|\n|\r\t)/gm, "") : "";
t.appendChild(l);
var n = document.createElement("style");
n.innerText = null != e.style && e.style ? e.style.replace(/(\r\n\t|\n|\r\t)/gm, "") : "";
document.head.appendChild(n), null != e.handlers && "function" == typeof e.handlers && e.handlers()
}
</script>

The problem is: it keeps appearing on every single page I browse to, while I would like it to appear only once per visit.

Can it be done?

Thank you 

Gian 

[alexbishop]

There are a couple of different ways you could do this:
i) Wrap the template code in some conditional logic

if(typeof sessionStorage.displayed === "undefined"){
    sessionStorage.displayed = "true"
    //add your template code
}

ii) If you want more control (i.e. a certain number of minutes, hours) then you could instead set a cookie that expires after 30mins, 60mins etc; then use similar conditional logic to check if the cookie exists and then set the cookie & run the pop-up code if the cookie doesn't exist

[abhinavpuri · Accepted solution]

Hi @GiovanniLo ,

It seems the Goal is to show light box pop-up once per visitor, which can be achieved using either profile parameter 

Example: "profile.isPopupDisplayed= {true/false} or leveraging Profile Scripts.

Session storage is good alternative but only challenge I foresee is that it would show popup everytime user reopens the brower and won't achieve once per visitor targetting audiences.