> ## 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.

# Examples

> Browse six complete embed examples, run the source code, or use a prompt to build your own with a coding agent.

## Overview

Each example in [tavus-examples](https://github.com/Tavus-Engineering/tavus-examples/tree/main/examples#readme) is a complete Vite + React + TypeScript page using `@tavus/embed@latest`. Its README includes setup instructions, a screenshot, and a recording of a full call.

<Card title="Build your own with a coding agent" icon="robot" href="/sections/deployments/coding-agents#choose-a-prompt" horizontal cta="Get a prompt">
  Choose an embed or widget prompt for Cursor, Claude Code, Codex, Lovable, Replit, Bolt or v0.
</Card>

To run one: clone the repository, open the example's folder, run `npm install` and `npm run dev`, and paste your deployment id into `src/constants.ts`. Create a deployment in the [PAL Maker](https://maker.tavus.io) if you do not have one.

## The examples

<CardGroup cols={2}>
  <Card title="Landing page" icon="window" href="https://github.com/Tavus-Engineering/tavus-examples/tree/main/examples/embed-landing-page" cta="View example">
    An inline conversation in a marketing page. Start here for the simplest integration: one import, one tag, a sized wrapper.
  </Card>

  <Card title="Preview card to modal" icon="expand" href="https://github.com/Tavus-Engineering/tavus-examples/tree/main/examples/embed-preview-to-modal" cta="View example">
    An "Ask a specialist" card beside a product. `expand-options` opens the call in a modal and returns the card when it ends.
  </Card>

  <Card title="Start from your own button" icon="hand-pointer" href="https://github.com/Tavus-Engineering/tavus-examples/tree/main/examples/embed-programmatic" cta="View example">
    Your button opens a dialog and starts the call through `TavusIntegration` after `tavus:ready`.
  </Card>

  <Card title="Full-screen call flow" icon="expand" href="https://github.com/Tavus-Engineering/tavus-examples/tree/main/examples/embed-full-screen" cta="View example">
    An intake form, a call with `layout="full-screen"`, and a next-steps page. Prepares the conversation during the form.
  </Card>

  <Card title="Unattended screen" icon="tablet" href="https://github.com/Tavus-Engineering/tavus-examples/tree/main/examples/embed-unattended-screen" cta="View example">
    A portrait check-in kiosk. The embed's button starts the call, and the page resets for the next visitor.
  </Card>

  <Card title="Session flow" icon="list" href="https://github.com/Tavus-Engineering/tavus-examples/tree/main/examples/embed-session-flow" cta="View example">
    A name step, a call with a live transcript, and a summary with a transcript download. Reads `tavus:protocol-message`.
  </Card>
</CardGroup>

## Build your own with a coding agent

The [embed prompt](https://github.com/Tavus-Engineering/tavus-examples/blob/main/examples/embed-prompt.md) behind every example's "Build this" button reads the closest example and builds it in your stack. [Choose a prompt](/sections/deployments/coding-agents#choose-a-prompt) for an inline embed or a floating widget, or follow the [app builder and website builder guide](/sections/deployments/app-builders).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.