Articles on: Popup

How to automatically open a popup after N seconds

In this guide, we'll walk you through the steps to set up an automatic popup to appear N-seconds after opening a page.

Our popups function globally, meaning they exist on all pages regardless of whether they're utilized or not.
You might find this guide useful: How to create popups

Once you've created the popup you want, you can then configure it to open on your blog after a specified number of seconds have elapsed.

1. Custom code

Copy this code if you want the popup to show up every time for the same user:

<script>
const time = 3000;
const popupId = "popup-01-00000";

window.onload = () => {
  const openAutoPopup = ($popup) => {
    $popup.fadeIn(150);
    $(".js-custom-popup-mask").fadeIn(200);
    const popupExists = $popup.length !== 0;
    if (popupExists) {
      $("body").addClass("state-fixed-body_popup");
    }
  }
  const $autoPopup = $(`#${popupId}`);
  setTimeout(()=>openAutoPopup($autoPopup),time);
}
</script>

Or copy this code if you want the__ popup to display only once__ for the same user:

<script>
const time = 3000;
const popupId = "popup-01-00000";
window.onload = () => {
  const openAutoPopup = ($popup) => {
    $popup.fadeIn(150);
    $(".js-custom-popup-mask").fadeIn(200);
    const popupExists = $popup.length !== 0;
    if (popupExists) {
      $("body").addClass("state-fixed-body_popup");
    }
    localStorage.setItem('popupShown', 'true');
  }
  const $autoPopup = $(`#${popupId}`);
  const popupAlreadyShown = localStorage.getItem('popupShown');
  if (!popupAlreadyShown) {
    setTimeout(() => openAutoPopup($autoPopup), time);
  }
}
</script>

Depending on where you want the popup to show, you can add the code:

- In a custom component on the page to show the popup only on that specific page.