> 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: About Site Lightbox Extensions

## Article: About Site Lightbox Extensions

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-lightboxes/about-site-lightbox-extensions.md

## Article Content:

# About Site Popup Extensions

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

A site popup extension adds a popup to the user's site, enabling your app to grab site visitors' attention and showcase important announcements or information. The popup can also appear in the site's navigation menu and behaves like any other popup. You can add multiple popups to your app. Learn more about [how site owners manage popups](https://support.wix.com/en/article/studio-editor-using-popups).

The content of a popup extension is composed of one of your app's [site widgets](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/about-site-widget-extensions.md). This means that before setting up a site popup extension, your app must have at least one widget.

The popup content is surrounded by a background overlay, which blocks out the site page so that visitors can't click or interact with the site. This helps them focus on the popup.

The following example shows a site popup:

![popup](https://wixmp-833713b177cebf373f611808.wixmp.com/images/25c16cad8c70a620ec33322300558d43.png)

When setting up the popup extension, you can configure the default methods for site visitors to close the popup. The following options are available:

* Clicking the overlay background behind the popup.
* Clicking an 'X' button. When selected, an 'X' button is added to the top right corner of the popup.

When testing your popup, make sure that the 'X' does not interfere with your design, as shown in the following image:

![popup](https://wixmp-833713b177cebf373f611808.wixmp.com/images/01fb7e8f3f625877bb3b56927bd5c52c.png)

## Implementation options

Once you've created your [site widget](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/about-site-widget-extensions.md), setting up a site popup extension only requires configuration in your app's dashboard, with no coding involved.

Add a site popup extension to your app by [setting it up in your app's dashboard](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/about-site-extensions.md).

## Open and close a popup from your app's code

Your app can trigger the popup from code in its other app extensions, such as a site widget or an embedded script. To do this, use the [`openLightbox()`](https://dev.wix.com/docs/sdk/frontend-modules/window/open-lightbox.md) method. This method requires the unique extension ID of the popup. You can obtain the extension ID by clicking **Copy extension ID** in the ![more-actions](https://wixmp-833713b177cebf373f611808.wixmp.com/images/b8863ab2de70563b18ead3fb12c778dc.png) More Actions menu of your popup extensions in the **Extensions** page of you app dashboard.

To close the popup from its own code, use the [`lightbox.close()`](https://dev.wix.com/docs/sdk/frontend-modules/window/lightbox/close.md) method. For example, you can add a button inside the popup that calls the `close()` method and passes data back to the code that initially opened it.

### Code example

The following example demonstrates how to use a popup to confirm user details before submission:  

* The widget collects user details and opens a popup for confirmation.  
* The popup displays the details and provides a **Confirm** button.  
* When the user clicks **Confirm**, the popup closes and sends a confirmation response to the widget.  
* If the user cancels, the widget receives a cancellation response.  

**Widget code (opens a popup and sends user data)**

```js
import { lightbox } from '@wix/site-window';

// Function triggered when the "Open" button is clicked
export function openButton_click(event) {
  // Prepare user data to send to the lightbox (popup)
  const userData = {
    name: "John Doe",
    email: "johndoe@example.com"
  };

  // Open the lightbox (popup) and pass user data
  lightbox.open({ extensionId: "52e53dff-27eb-4b5f-b6b8-4956bcadaea1", data: { userData } })
    .then((data) => {
      if (data?.confirmed) {
        console.log("User confirmed details. Proceeding with submission...");
        // Submit the form or take further action
      } else {
        console.log("User canceled confirmation.");
      }
    });
}
```

**Popup code (displays and returns the confirmation status)**

```js
import { lightbox } from '@wix/site-window';

// Retrieve user data passed from the widget
const { userData } = lightbox.getContext() || {};
console.log("Received user data:", userData);

// Function triggered when the "Confirm" button is clicked
export function confirmButton_click(event) {
  // Close the lightbox (popup) and return a confirmation response
  lightbox.close({ confirmed: true });
}

// Function triggered when the "Cancel" button is clicked
export function cancelButton_click(event) {
  // Close the lightbox (popup) and return a cancellation response
  lightbox.close({ confirmed: false });
}
```