> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/share/embed/popup-embed.md). # Popup Embed Supademo's popup embed opens a demo in a full-screen overlay when visitors click a button: add one script tag plus a trigger button to any website or web app. A popup embed is a button or link on your website that opens a Supademo in a full-screen popup overlay when clicked. Setup takes two snippets: one script tag that loads the Supademo SDK, and one trigger element that calls `Supademo.open()` with your demo's ID. The page stays lightweight because the demo only appears when a visitor chooses to open it. Both snippets are available pre-filled with your demo's ID in the Share modal: open your demo, click **Share**, go to the **Embed** section, and find **Popup Embed** — with tabs for HTML, React, Angular, Vue.js, and Svelte, plus a **Preview** button to try the popup before you install it. ## How to add a popup embed to your website Adding a popup embed takes three steps: install the SDK, add a trigger button, and test it. 1. Add the Supademo SDK script tag inside the `` or `` tags of your website: ```html ``` 2. Add a button (or any clickable element) that calls the `Supademo.open()` function when clicked: ```html ``` 3. Publish the page and click the button — your Supademo opens in a popup overlay on top of the page. That's it. Replace `YOUR_DEMO_ID` with your demo's actual ID, or copy the pre-filled snippets from **Share → Embed → Popup Embed** so you never have to look the ID up. ## How to open a Showcase in a popup To open a multi-demo Showcase instead of a single demo, pass the `type` option as the second argument to `Supademo.open()`: ```html ``` The SDK script tag is the same as for demos — only the trigger call changes. Note that Showcase embedding requires the Scale plan or above, while demo embedding works on every plan. ## Where to find your demo or Showcase ID Your ID is the last segment of the URL when viewing your demo or Showcase in Supademo: * **Demo**: `https://app.supademo.com/demo/[YOUR_DEMO_ID]` * **Showcase**: `https://app.supademo.com/showcase/[YOUR_SHOWCASE_ID]` The snippets in the Share modal's **Popup Embed** section come with the correct ID already filled in, so copying from there is the fastest and least error-prone route. ## How to use popup embeds in React, Vue, Angular, or Svelte For single-page applications, load the SDK script once (for example in your HTML template, `index.html`, or root layout) and call `Supademo.open()` from your framework's click handler after the script has loaded. The Share modal's **Popup Embed** section includes ready-to-paste trigger snippets for HTML, React, Angular, Vue.js, and Svelte — switch tabs to copy the variant for your framework. If your bundler or TypeScript setup complains that `Supademo` is not defined, it's a global added by the script tag, so reference it as `window.Supademo` or add a global declaration. ## When should you choose a popup embed? Choose a popup embed when the page has its own job to do and the demo is an optional deep dive — the button invites interested visitors in without the demo taking over the layout. Here's how the popup compares to Supademo's other embed types: | Embed type | What it does | Best for | | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | [Inline embed](https://docs.supademo.com/share/embed/website-embed) | Renders the demo directly on the page in a responsive iframe | Landing pages, blog posts, and docs where the demo is part of the content | | Popup embed (this page) | A button or link opens the demo in a full-screen overlay | "Take a tour" CTAs, navigation links, and pages that should stay lightweight | | [In-app product tours](https://docs.supademo.com/share/embed/in-app-product-tours) | Launches demos inside your own product via the Supademo SDK or a Demo Hub | User onboarding, feature announcements, and contextual help for logged-in users | Popups particularly shine in site navigation ("Product tour" links), hero sections next to a "Book a demo" CTA, and pricing pages — anywhere a full inline demo would compete with the page's primary message. If you want the demo visible with zero clicks, use the inline embed instead; if your audience is logged-in users of your product, use in-app product tours. ## Frequently asked questions ### Does a popup embed slow down my page? The popup embed adds a single script tag to your page, and the demo itself renders inside an iframe overlay only when a visitor triggers it — so the demo's content is not part of your page's initial render. This makes popups a good fit for pages where load performance matters, such as home and pricing pages. ### Why does clicking my button do nothing? The usual causes: the SDK script tag is missing or hasn't finished loading before the click, the demo ID in `Supademo.open()` is wrong, or a browser extension or Content Security Policy is blocking `script.supademo.com`. Open the browser console and check for errors, verify the ID against the demo's URL, and confirm the script tag appears in the rendered page source. For iframe-level issues, see [Embed not loading](https://docs.supademo.com/troubleshooting/embed-not-loading). ### Can I track when someone opens or completes the popup demo? Yes. Embedded Supademos emit `postMessage` events — including load, start, slide changes, progress, and completion — that your page can listen for and forward to your analytics tool. See the [Embed Events API](https://docs.supademo.com/share/embed/embed-events-api) for the event reference and code samples. ### Can I personalize the popup demo for each visitor? Embedded Supademos support dynamic variables that personalize demo text per viewer — see [Variables in Embeds](https://docs.supademo.com/customize/personalize/variables-and-tokens/variables-in-embeds) for how variables work in embeds. \[VERIFY: whether `Supademo.open()` accepts a variables option directly, or whether personalized popups should use the in-app SDK's `loadDemo()` with variables] ### What plan do I need for popup embeds? Embedding demos — inline or popup — works on every Supademo plan, including Free. Opening a Showcase in a popup requires the Scale plan or above.