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.
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
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
Are you embedding in a CMS that won't run JavaScript?
Use Hosted — share the URL or iframe-embed.
Is your site React?
Reach for NPM. Even if you start with the script tag, NPM unlocks form-filling and page-context awareness when you need them.
Anything else (WordPress, Webflow, plain HTML)?
Use the Script tag.
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