# Develop

There are three ways to put a live-layer agent in front of your visitors. Pick based on how much control you need over the experience and how much code you want to write.

> [!TIP]
> **Not sure which one?** Default to **script tag** — it works on any page, takes one line of HTML, and gets you 90% of the way there. Move to **NPM** only when you need React-native integration or programmatic control.

## The three paths

**1. Hosted:**

The agent lives at a public URL on `livelayer.app`. Share the link, embed it in an iframe, or print it as a QR code.

```text
https://livelayer.app/a/your-agent-slug
```

**Best for:** Marketing landing pages · Standalone dedicated agent pages · Print/QR · Email · Slack/Discord links · Embedding in a CMS that won't run scripts.

**Tradeoff:** Zero code. Zero customization beyond what the dashboard exposes. The agent runs in our environment, not yours — it can't read your page's content or fill your forms.

[Learn more →](/docs/develop/hosted/overview)

**2. Script tag:**

One `<script>` tag plus one `<livelayer-widget>` element. The widget self-installs as a floating bubble, an inline embed, or a fullscreen takeover.

```html title="index.html"
<script src="https://livelayer.app/v1.js"></script>
<livelayer-widget agent-id="agt_abc123"></livelayer-widget>
```

**Best for:** WordPress, Webflow, Shopify, Squarespace, plain HTML, any CMS · Marketing sites · Adding an agent without touching your build pipeline.

**Tradeoff:** Lives in shadow DOM, isolated from your styles. Configurable via HTML attributes. Capability allowlist (`navigate`, `scroll`, `click`) lets the agent do basic page actions.

[Learn more →](/docs/develop/script-tag/overview)

**3. NPM:**

Two packages: `@livelayer/react` for React apps, `@livelayer/sdk` for everywhere else. Full programmatic control — the agent sees your React state, fills your forms, and runs as a first-class component in your app.

```bash title="install.sh"
npm install @livelayer/react @livelayer/sdk
```

```tsx title="app.tsx"
import { AvatarWidget } from "@livelayer/react";
import "@livelayer/react/styles.css";

export default function App() {
  return <!-- omitted: AvatarWidget -->;
}
```

**Best for:** Next.js, Vite, Remix, any React app · SPAs where the agent should follow the user across routes · Apps where the agent fills forms, navigates, or reads page state · Custom UX (your own avatar layout, your own controls).

**Tradeoff:** You manage the dependencies. You wire the router (`onNavigate`, `pathname`). You unlock the full feature surface in exchange.

[Learn more →](/docs/develop/npm/overview)

## Capability comparison

| Capability                            | Hosted | Script tag | NPM |
|---|---|---|---|
| Voice + avatar                        | ✓ | ✓ | ✓ |
| Knowledge bases                       | ✓ | ✓ | ✓ |
| Slides / fullscreen experiences       | ✓ | ✓ | ✓ |
| Floating bubble                       | —  | ✓ | ✓ |
| Inline embed at a specific size       | iframe | ✓ | ✓ |
| Fullscreen takeover                   | ✓ | ✓ | ✓ |
| Custom branding (colors, logo)        | partial | partial | ✓ |
| Capability allowlist (navigate/scroll/click) | — | ✓ | ✓ |
| Agent fills forms in your app         | — | — | ✓ |
| Agent reads visible DOM context       | — | — | ✓ |
| Show/hide on specific routes          | — | partial | ✓ |
| Custom display modes (your own layout) | — | — | ✓ |
| Direct access to `LiveKitSession`     | — | — | ✓ |
| Bring your own session endpoint       | — | — | ✓ |
| Team switching (multiple agents in one widget) | — | — | ✓ |
| Hosted / SSO into your own auth       | — | — | ✓ |

## Decision flow

1. **Are you embedding in a CMS that won**

   Use [Hosted](/docs/develop/hosted/overview) — share the URL or iframe-embed.

2. **Is your site React?**

   Reach for [NPM](/docs/develop/npm/overview). Even if you start with the script tag, NPM unlocks form-filling and page-context awareness when you need them.

3. **Anything else (WordPress, Webflow, plain HTML)?**

   Use the [Script tag](/docs/develop/script-tag/overview).

## Mix and match

These paths aren't exclusive. Common combinations:

- **Marketing site (Webflow) + product (Next.js)** → Script tag on marketing, NPM in the app
- **Demo page + main app** → Hosted URL for the demo (so a single link from email goes straight to a working agent), NPM in the app
- **Same agent everywhere** → all three surfaces point to the same `agentId`; conversations and analytics flow into the same dashboard