> Lettrove docs 1.x · https://docs.lettrove.com/docs/editor/modes/popup

# Popup

A **popup** project makes popups for websites: sign-up boxes, offers, notices. Your users design
the box and choose when it appears; you place the result on any site.

## What your users choose

| Setting | Choices |
|---|---|
| **Position** | Nine places: the four corners, the middle of each side, or the centre |
| **Size** | Width (up to 1200px) and, if wanted, a fixed height; on a phone it keeps a margin and its columns stack |
| **Overlay** | The colour behind it, see-through for none (then the page behind stays usable), and whether a click on it closes the popup |
| **Close button** | Shown or not, and its colours |
| **Opens** | When the page loads (after a delay in seconds), when the visitor scrolls past a share of the page, when they move to leave (desktop), or only when your code opens it |
| **How often** | Every page view, once per browser session, or once ever |

A popup can hold any block a landing page can, [forms](/docs/editor/forms) included.

## Placing it on a site

`exportHtml()` gives a whole HTML document; for a site, use its pieces:

```ts
const { designId, chunks } = await editor.exportHtml();
// chunks.body — the popup's markup     chunks.css — its styles
// chunks.js   — the script that opens it on its trigger, closes it, and keeps focus inside it
```

```html
<!-- anywhere in your site's pages -->
<style>/* chunks.css */</style>
<!-- chunks.body -->
<script>/* chunks.js */</script>
```

Everything is scoped to the popup: its styles reach nothing else on your page, and two popups on
one page never clash. Until its trigger, it is hidden.

## Opening and closing it from your code

Each popup on the page registers itself under its `designId`:

```js
window.lettrovePopups['01J9ZQ3W8D2K7M5T1V4XG6HB0R'].open();
window.lettrovePopups['01J9ZQ3W8D2K7M5T1V4XG6HB0R'].close();
```

For a popup set to open **only when your code opens it**, that is how it opens — from a button, say:

```html
<button onclick="lettrovePopups['01J9ZQ3W8D2K7M5T1V4XG6HB0R'].open()">Get 10% off</button>
```

## Hearing it

The popup fires a `lettrove:popup` event on `document` when it opens and when it closes:

```js
document.addEventListener('lettrove:popup', (event) => {
  const { id, action } = event.detail; // id: the designId; action: 'open' | 'close'
  analytics.track(`popup ${action}`, { id });
});
```

## What a visitor gets

- **Keyboard and screen readers**: when it opens, focus moves into it and stays inside while it is
  open; **Escape** closes it; on close, focus returns to where it was.
- **"How often"** is remembered in the visitor's browser. If the browser refuses storage (a private
  window), the popup simply follows its trigger.

## Downloads

| Format | From the page | From your server | In the Download menu |
|---|---|---|---|
| HTML (whole, or chunks) | `exportHtml()` | `designs.export(id, { user })` | yes |
| ZIP | `exportZip()` | `format: 'zip'` | yes |
| PNG (the popup drawn open) | `exportImage()` | `format: 'png'` | yes |

A popup has no PDF.