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

Placing it on a site

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

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

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

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:

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

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.