> 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/ai-demo-agent/publishing-and-sharing/embed-ai-demo-agents.md).

# Embed AI Demo Agents

Put your AI demo agent right on your website. Learn how to add it as a popup that opens from your own button, or as a floating launcher that's always available in the corner of every page.

***

### **What is Embed AI Demo Agents?**

Once your demo agent is built, you can embed it directly on your website so visitors can explore your product without ever leaving the page. In addition to the **Inline embed**, Supademo now offers two new embed options: a **Popup embed**, which opens your agent whenever someone clicks a button on your site, and a **Floating embed**, which shows an always-available **launcher** in the corner of your site.

Both options run on a single **SDK snippet** that you add to your site once. From there, you just add the button code or initialization code for the embed style you want.

{% @supademo/embed demoId="cmuvgi58903siqm9zqamkpfbe" url="<https://app.supademo.com/demo/cmuvgi58903siqm9zqamkpfbe>" %}

***

### **Before you start**

You'll need:

* A demo agent that's built and ready to share
* Access to edit your website's code (including the `<head>` tag)

***

### **1. Popup embed**

1. Click the **More actions** menu next to your demo agent.
2. Click **Share** to open the sharing and embed options.
3. Select **Popup embed** to open your agent in a popup whenever someone clicks a button on your site.
4. Click **Copy** to grab the **SDK snippet**, then paste it inside your site's `<head>` tag, before the button code.
5. Click **Copy** to grab the **button code**, then paste it wherever you want the button to appear.
6. On your live site, click the button (e.g. **Talk to Supademo Onboarding Coach**) to launch the demo agent.
7. Your demo agent opens in a popup window right on your site, so visitors never have to leave the page.

***

### **2. Floating embed**

1. In the same **Share** window, select **Floating embed** to show your agent as an always-available launcher in the corner of your site.
2. Click **Copy** to grab the **SDK snippet** and add it to your site's `<head>` tag. Skip this if you already added the SDK for the popup embed.
3. Click **Copy** to grab the **initialization code** and add it to your site to turn on the launcher.
4. On your live site, click the **launcher** in the bottom-right corner to open your demo agent and start chatting.

> 💡 **Tip:** You only need to add the SDK snippet once — it powers both the popup and floating embeds.

***

### **Benefits**

* **Keep visitors on your site** — Your demo agent opens right on the page, so prospects explore your product without being sent elsewhere.
* **Two embed styles** — Trigger the agent from your own button or keep it always available as a floating launcher.
* **One-time setup** — A single SDK snippet powers every embed, so adding more is a quick copy and paste.
* **On-brand experience** — Style the popup button however you like to fit your site's design.
* **Available on every page** — The floating launcher puts your agent within one click, any time a visitor needs help.

***

### **Use Cases**

<details>

<summary><strong>"Talk to Us" and "Get a Demo" Buttons</strong></summary>

Swap a static contact form for a popup embed, so visitors who click your call-to-action button get an instant, guided conversation with your demo agent.

</details>

<details>

<summary><strong>Always-On Product Guidance</strong></summary>

Use the floating embed to keep your demo agent in the corner of every page, so visitors can get answers and see your product whenever questions come up.

</details>

<details>

<summary><strong>Pricing and Feature Pages</strong></summary>

Add a popup button next to pricing tables or feature sections so evaluators can see exactly how a feature works at the moment they're deciding.

</details>

<details>

<summary><strong>Customer Onboarding and Help Centers</strong></summary>

Embed an onboarding coach agent in your app's help center or docs, giving new users a self-serve guide that walks them through setup on their own schedule.

</details>

***

> ✨ **The Result:** Your AI demo agent lives right on your website — one click from any button or corner launcher — turning curious visitors into engaged prospects without ever leaving the page.