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:

<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>

2.1 Open popup on the site pages

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.



- In the "</body> custom HTML code" section to show the popup on every page of your site.

2.2 Open popup on the blog pages

- In the "Blog home page </body> code" to show the popup on the blog's homepage.



- In the "Each blog post </body> code" to show the popup on each blog post page.

3. Replace the popup ID

In the code replace the popup ID with the ID of your popup (without #)



You can locate the popup's ID at the top of the popup editor

4. Edit delay

Castomize the delay after which the popup will appear (in milliseconds)

Done!

Your blog posts will now feature a popup with the delay you've configured.

Updated on: 22/07/2024