> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://help.unicornplatform.com/en/article/how-to-create-popups-gc9ynw/)

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:

```javascript
<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:

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

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chrome9jh9acjiw9_1dojgxz.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromeyqppkf0oho_1ueqwhz.png)

# 2.2 Open popup on the blog pages

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromevveqxj7quu_d5ofoy.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromeejnloz2h9t_13nyqsm.png)

# 3. Replace the popup ID 

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2566-04-21-at-09431_s6ir8b.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2566-04-21-at-09305_1r8or3z.png)

# 4. Edit delay

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2566-04-21-at-09425_1swkzh.png)

### Done!

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