Embedding

Embedding uses one script tag. You paste it into your site once, and every form you have set to embed shows up — you do not add a new snippet each time you build a form.

Getting your snippet

Go to Settings → Embed.
Copy the snippet shown there. It already has your key in it.
Paste it into your site's HTML, before the closing </body> tag.

The snippet looks like this:

<script
  src="<the loader URL shown on the Embed page>"
  data-api-key="YOUR_CLIENT_API_KEY"
  async
></script>

Always copy the snippet from Settings → Embed rather than typing this example — it carries your own key and the right loader URL for your account.

It works on any site that lets you add HTML: WordPress, Webflow, Shopify, Squarespace, or your own app.

How a form gets picked

The script asks Poplitu which of your forms should appear, and applies the targeting rules you set on each one — which pages it shows on, which devices, what time, after how long, on exit intent, and how often the same person sees it. You set those under Targeting Rules on the form's card in the dashboard.

Display modes

An embedded form can appear as a popup, a slide-in, a banner, a sidebar, or inline in the page.

Installing with npm

If you would rather bundle it than use a script tag:

pnpm add @poplitu/client-sdk

import { PopupSDK } from '@poplitu/client-sdk';

const sdk = new PopupSDK({ apiKey: 'YOUR_CLIENT_API_KEY' });
await sdk.initialize();

Using an iframe instead

If you only want one specific form in one specific place, you can point an iframe at its public link. You lose targeting rules and the display modes, but it needs no key.

<iframe
  src="https://poplitu.com/f/YOUR_FORM_ID"
  width="100%"
  height="600px"
  frameborder="0"
></iframe>