# Popup Embed

***

### Installation

#### Step 1: Add the Supademo SDK

Add this script tag inside the `<head>` or `<body>` tags of your website:

```html
<script src="https://script.supademo.com/supademo.js"></script>
```

#### Step 2: Add a Trigger Button

Create a button that calls the `Supademo.open()` function when clicked:

```html
<button onclick="Supademo.open('YOUR_DEMO_ID')">
  Take a tour
</button>
```

That's it! When clicked, your Supademo will open in a popup overlay.

***

### Opening a Showcase

To open a Showcase instead of a Demo, pass the type option:

```html
<button onclick="Supademo.open('YOUR_SHOWCASE_ID', { type: 'showcase' })">
  Take a tour
</button>
```

***

### Finding Your Demo/Showcase ID

Your ID can be found in the URL when viewing your Demo or Showcase:

* **Demo**: `https://app.supademo.com/demo/[YOUR_DEMO_ID]`
* **Showcase**: `https://app.supademo.com/showcase/[YOUR_SHOWCASE_ID]`

***

### Single-Page Applications

For React, Vue, Angular, or Svelte applications, call `Supademo.open()` from your click handler after the SDK script has loaded.
