@tavus/embed

Tavus experience as an inline <tavus-embed> custom element. Drop a single tag into any page and you get a fully working Tavus deployment in a shadow DOM — no React, no build step required.

Create and configure a deployment — and grab the embed snippet — in the Tavus PAL Maker.

Install

CDN (recommended for static pages)

<script src="https://unpkg.com/@tavus/embed@latest"></script>

<tavus-embed deployment-id="YOUR_DEPLOYMENT_ID"></tavus-embed>

For a pinned version, use https://unpkg.com/@tavus/[email protected].

npm (bundler / framework apps)

npm install @tavus/embed

import "@tavus/embed";

Importing the package registers the <tavus-embed> custom element as a side effect. After that you can use the tag anywhere in your app's markup — including JSX:

<tavus-embed deployment-id="YOUR_DEPLOYMENT_ID" />

Attributes

| Attribute | Type | Description | | ----------------- | --------------------------- | ------------------------------------------------------------------------------- | | deployment-id | string | The Tavus deployment ID. Fetches configuration from /v2/deployments/:id/init. | | override-config | JSON | Optional JSON object that is deep-merged over the fetched config. | | layout | "inline" \| "full-screen" | Where the preview copy sits. Defaults to inline. See Layout. |

Sizing

<tavus-embed> sets :host to width: 100%; height: 100%; max-height: 100vh; overflow: hidden. Give it a parent with a definite size, or wrap it in a container with aspect-ratio.

<div style="width: 720px; aspect-ratio: 16 / 9;">
  <tavus-embed deployment-id="YOUR_DEPLOYMENT_ID"></tavus-embed>
</div>

Layout

layout only changes how the preview screen arranges its copy — sizing stays entirely yours (the element always fills its parent, in either mode).

• inline (default): the greeting and the start button share a bar along the bottom edge. Below a container width of 56.25rem the greeting moves up to the top corner, since the bar has no room for both.
• full-screen: the greeting always sits in the top-left corner and the start button is centered above the lower edge, clear of the replica's face. Meant for a section that gives the embed the whole viewport; the in-call fullscreen toggle is dropped, since the page is already the app.

<section style="height: 100dvh;">
  <tavus-embed deployment-id="YOUR_DEPLOYMENT_ID" layout="full-screen"></tavus-embed>
</section>

License

MIT