> ## Documentation Index > Fetch the complete documentation index at: https://docs.tavus.io/llms.txt > Use this file to discover all available pages before exploring further. # Embed > Render a Tavus conversation inline in your layout with the tavus-embed custom element - in plain HTML, React, or Next.js. ## Overview `` renders a Tavus conversation inline, inside your own layout. It uses the same managed deployment flow as the [widget](/sections/deployments/widget), but instead of a floating launcher the experience lives where you put the element - a product page, a demo section, a dashboard panel. The embed renders in a shadow DOM and adapts to its container: it maintains a `16:9` aspect ratio in wide containers and switches to a compact `9:16` portrait layout in narrow ones. PALs with a [Magic Canvas](/sections/conversational-video-interface/magic-canvas/overview) skill render cards in the embed automatically. See [Hosted embed & widget](/sections/conversational-video-interface/magic-canvas/integrations/hosted) for Canvas-specific behavior. ## Installation ```html theme={null}

``` To pin an exact version instead of tracking the latest beta, use a versioned URL such as `https://unpkg.com/@tavus/embed@0.1.0`. ```bash theme={null} npm install @tavus/embed@latest ``` Importing the package registers the `` custom element as a side effect. Use the tag directly in JSX: ```tsx theme={null} import "@tavus/embed"; export function Support() { return (

); } ``` ```bash theme={null} npm install @tavus/embed@latest ``` The element touches browser APIs at registration time, so import it in a client component: ```tsx theme={null} "use client"; import "@tavus/embed"; export function TavusEmbed() { return (

); } ``` ## Attributes | Attribute | Type | Description | | - | - | - | | `deployment-id` | string | The Tavus deployment ID. Fetches configuration from `/v2/deployments/:id/init`. | | `conversational-context` | string | Extra context injected into the conversation at start (maps to `conversational_context`). Use it to pass what the deployment should know about the current user or page. | | `custom-greeting` | string | Overrides the PAL's opening line for this conversation (maps to `custom_greeting`). If omitted, the PAL's `greeting` or `dynamic_greeting` applies. | | `memory-stores` | string | Comma-separated memory tags (maps to `memory_stores`). Optional — automatic per-visitor memory is on by default. Pass a stable per-user identifier when you want memory to follow a specific user instead. | | `expand-options` | JSON string | Lifts the embed out of the page into a modal overlay for the conversation. See [Expanded overlay](#expanded-overlay). | ## Context and greeting `conversational-context` and `custom-greeting` let you tailor a single conversation at start time: ```html theme={null}

``` `conversational-context` overrides the deployment's configured default context for this conversation; when omitted, the deployment default is used. `custom-greeting` sets the PAL's opening line. If you omit it, the PAL's `greeting` or `dynamic_greeting` applies. Empty or whitespace-only values are ignored, so an empty attribute behaves the same as not setting it. ## Persistent memory `memory-stores` lets a returning user pick up where they left off. A tag is a memory namespace: every conversation that uses the same tag shares one bucket of memories, so the PAL can remember that user across sessions and devices. Tags are global to your account, **not** scoped to a deployment. A bare `user-12345` would share the same memory across every deployment that uses it. To keep memory specific to one deployment, combine the deployment ID with your user ID: ```html theme={null}

``` Pass multiple stores as a comma-separated list (`memory-stores="YOUR_DEPLOYMENT_ID-user-12345,team-acme"`). Empty or whitespace-only values are ignored. In the [PAL Maker](https://maker.tavus.io/dev), open your deployment's **Settings** and use **Unique memory per visitor** (maps to `customization.conversation.unique_memory_tag`; on by default). When that toggle is on and you omit `memory-stores`, the widget or embed generates an anonymous per-browser ID (stored in `localStorage`, scoped to that deployment) and sends it as `memory_stores` on each conversation start. Memory persists for that visitor in the same browser, but not across devices or after storage is cleared. Set `memory-stores` to your own stable user ID when you want memory to follow a logged-in user everywhere. With the toggle off and no `memory-stores` attribute, no memory store is sent. ## Sizing `` fills its parent: the host element is `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`: ```html theme={null}

``` If the parent has no resolved height - for example a chain of auto-height flex containers - the embed cannot size itself. Give the parent an explicit height or an `aspect-ratio`, or ensure the full chain (`html`, `body`, root element, container) resolves to a real height. ## Expanded overlay `expand-options` lifts the embed out of your layout into a modal overlay for the conversation, so a small inline card can become a full call without you building a modal. The card returns to the page when the call ends. ```html theme={null}