> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Create a One-Time Popup

## Article: Tutorial | Create a One-Time Popup

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-create-a-one-time-popup.md

## Article Content:

# Tutorial | Create a One-Time Popup

> **Note:** The terms popup and lightbox refer to the same element. While the editor and dashboard now refer to it as a [popup](https://support.wix.com/en/article/studio-editor-using-popups), the API methods continue to use the term lightbox for backward compatibility. The documentation uses both terms accordingly.

In this tutorial, we demonstrate how to create a popup that appears only on a visitor's first page load during a browser session. We'll create the popup element and use the [Storage API](https://dev.wix.com/docs/sdk/frontend-modules/storage/storage/introduction.md) to track whether a visitor has already seen the popup in their current session.

One-time popups are perfect for displaying important announcements, special offers, or welcome messages without repeatedly annoying visitors during their session.

We'll use the following steps to build the one-time popup:

- [Tutorial | Create a One-Time Popup](#tutorial--create-a-one-time-popup)
  - [Before you begin](#before-you-begin)
  - [Step 1 | Set up the popup](#step-1--set-up-the-popup)
  - [Step 2 | Implement the popup display and storage functionality](#step-2--implement-the-popup-display-and-storage-functionality)
  - [Complete code example](#complete-code-example)
  - [See also](#see-also)

> **Note:** The code in this article was written using the following module versions:
>
> - @wix/site-storage (v1.0.0)
> - @wix/site-window (v1.0.0)
>
> Learn how to install npm packages [in the editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-in-the-editor.md) or [using the CLI](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-with-the-cli.md).

## Before you begin

It's important to note the following points before doing this tutorial:

- This tutorial uses session storage, but you can optionally switch to [local storage](https://dev.wix.com/docs/sdk/frontend-modules/storage/introduction.md).
- The code should be added to your site's **masterpage.js** file so that it works across all of your site pages.

## Step 1 | Set up the popup

In this step, you'll configure the popup element that will serve as the popup on your site.

To set up your popup:

1. Add a popup to your site through the **Add** menu if you haven't already.
2. Select the popup element and click the **Set Triggers** button.
3. In **Popup Settings**, configure the popup so that it doesn't automatically display on pages.
4. Give your popup a meaningful name, such as **Announcement**. We'll use this name in the code.
5. Design the popup content to fit your needs. You can add, delete, and modify any elements within the popup.

## Step 2 | Implement the popup display and storage functionality

In this step, you'll implement the code for tracking and displaying the popup.

1. Add the following import statements at the top of your **masterPage.js** file:

   ```javascript
   import { session } from "@wix/site-storage";
   import { window } from "@wix/site-window";
   ```

   > **Note:** Adding our code to the **masterPage.js** file ensures the popup appears immediately when a visitor first arrives at your site, regardless of which page they land on. To show the popup only on specific pages, add the code to those individual page files instead.

2. Add the main popup logic using the `onReady()` event handler.

   When the page is ready, check session storage for `firstTimePopupShown`. If it's missing, open the "Announcement" popup and set the key so that the popup doesn't open again.

   ```javascript
   $w.onReady(async function () {
     if (!(await session.getItem("firstTimePopupShown"))) {
       window.openLightbox("Announcement");
       session.setItem("firstTimePopupShown", "yes");
     }
   });
   ```

   > **Note:** This tutorial uses session storage, so the popup appears once per browsing session. To display the popup only once ever, use local storage instead. Change the import statement from `session` to `local` and update all instances of `session` to `local` in your code.

## Complete code example

```javascript
import { session } from "@wix/site-storage";
import { window } from "@wix/site-window";

$w.onReady(async function () {
  // Check if the lightbox (popup) has been shown before
  if (!(await session.getItem("firstTimePopupShown"))) {
    // Open the lightbox (popup)
    window.openLightbox("Announcement");
    // Mark that the lightbox (popup) has been shown
    session.setItem("firstTimePopupShown", "yes");
  }
});
```

## See also

- [Using Popups](https://support.wix.com/en/article/studio-editor-using-popups)
- [Storage API](https://dev.wix.com/docs/sdk/frontend-modules/storage/introduction.md)
- [Window API](https://dev.wix.com/docs/sdk/frontend-modules/window/introduction.md)