[Support request] Make popup show up once every 2 days per visitor

Home Forums Support [Support request] Make popup show up once every 2 days per visitor

Home Forums Support Make popup show up once every 2 days per visitor

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1572807
    Andrei

    Hi!
    So, I created this popup but I need help making it show only once every 2 days per visitor. The intent is to use a hook and display it only on specific blog posts.
    Basically, I need to somehow setup a cookie that would track the when the visitor last interacted with the popup and allow the popup to show again after the 2 days mentioned above.
    I am still a newbie when it comes to JS so any help would be greatly appreciated 🙂

    HTML Code is here:

    <h3>Ofertă Etiquette Masterclass!</h3>
    <p>
    Înscrie-te la Etiquette Masterclass folosind codul MASTERCLASS15 și te vei bucura de o reducere de 15% față de prețul de înscriere.
    </p>
    <h5>
    Locuri limitate!
    </h5>
    <button class=”popup-button”>
    MĂ ÎNSCRIU!
    </button>

    This is the CSS Code:

    /*Exit intent popup code*/
    #popup {
    position: fixed;
    width: 100%;
    visibility: hidden;
    z-index: 10002;
    top: 0;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
    position: absolute;
    margin: 50px 10%;
    text-align: center;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    width: 60%;
    background: #2e7fc1;
    padding-bottom: 100px;
    padding-top: 50px;
    padding-right: 20px;
    padding-left: 20px;
    color: #fff;
    font-size: 2rem;
    }

    .popup-button {
    color: white;
    background-color: black;
    padding: 13px 40px 10px 40px;
    border-radius: 7px;
    border-style:none;

    }
    .popup-button a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    }

    This is the JS code:

    let eventListener;

    const show = () => {
    const element = document.querySelector(“#popup”);
    element.style.visibility = “visible”;
    element.style.opacity = “1”;
    element.style.transform = “scale(1)”;
    element.style.transition = “0.4s, opacity 0.4s”;

    eventListener = document.addEventListener(“click”, function (clickEvent) {
    let el = clickEvent.target;
    let inPopup = false;
    if (el.id === “popup”) {
    inPopup = true;
    }
    while ((el = el.parentNode)) {
    if (el.id == “popup”) {
    inPopup = true;
    }
    }
    if (!inPopup) hide();
    });
    };

    const hide = () => {
    const element = document.querySelector(“#popup”);
    element.style.visibility = “hidden”;
    element.style.opacity = “0”;
    element.style.transform = “scale(0.5)”;
    element.style.transition = “0.2s, opacity 0.2s, visibility 0s 0.2s”;

    if (eventListener) {
    document.removeEventListener(eventListener);
    }
    };

    document.addEventListener(“DOMContentLoaded”, () => {
    document.addEventListener(“mouseout”, (event) => {
    if (!event.toElement && !event.relatedTarget) {
    setTimeout(() => {
    show();
    }, 100);
    }
    });

    document.onkeydown = (event) => {
    event = event || window.event;
    if (event.keyCode === 27) {
    hide();
    }
    };
    });

    #1573076
    David
    Staff
    Customer Support

    Hi there,

    you may get a better answer from a site such as stackoverflow, for example here is one method that writes variables, to the browser localStorage – which you can use to check if the user has visited the site or not, with that code it also stores the date and removes your variable after X time:

    https://stackoverflow.com/a/9147607

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.