> ## Documentation Index
> Fetch the complete documentation index at: https://docs.liveavatar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed your avatar

> Drop an interactive LiveAvatar onto your website with a few clicks — no frontend code required.

## What you'll build

This guide walks you through adding a working LiveAvatar to your site using only the LiveAvatar dashboard and a single `<iframe>` snippet. No build step, no SDK install, and no backend are required.

By the end of this guide, you'll have an embedded avatar on your page that can answer questions about your product, grounded in your own website content.

## Requirements

Before you start, make sure you have:

* A **LiveAvatar account** — sign up at [app.liveavatar.com](https://app.liveavatar.com) if you don't have one yet.
* Somewhere you can paste an `<iframe>` — your own HTML page, a CMS block, a Webflow embed, a Notion page, etc.
* *(Optional)* **URL(s)** for the avatar to use as reference materials. This includes your docs, product page, FAQ, or landing page. The avatar will generate answers from these pages.

<Tip>
  You can follow this guide entirely in [Sandbox Mode](/docs/sandbox-mode) without consuming credits while you iterate.
</Tip>

## Create a high-quality voice agent

A [**voice agent**](/docs/core-concepts/voice-agents) defines your avatar's persona — a [context](/docs/core-concepts/contexts) (what the avatar knows and how it responds) paired with a [voice](/docs/core-concepts/voices) (how it sounds). The quality of the context directly determines the quality of the avatar's answers.

Head to [app.liveavatar.com/voice-agent](https://app.liveavatar.com/voice-agent) to get started.

### Create a voice agent from scratch

Click **Create New** to start a voice agent from scratch. You'll then be able to create a context for your voice agent — the knowledge and personality that drive its responses. The steps below walk through building that context.

### Create a context

Build the [context](/docs/core-concepts/contexts) that powers your voice agent — its opening line, reference materials, and prompt. The next steps walk through each piece.

<Frame>
  <img src="https://mintcdn.com/liveavatar/vfJAvw2HUY1rnwmY/images/docs/guides/embed-avatar/contexts-dashboard.png?fit=max&auto=format&n=vfJAvw2HUY1rnwmY&q=85&s=b53f537938e4e7d7f03f4c7a181d5ec3" alt="LiveAvatar Contexts dashboard" style={{ maxWidth: '420px', margin: '0 auto' }} width="752" height="532" data-path="images/docs/guides/embed-avatar/contexts-dashboard.png" />
</Frame>

### Add an opening line

Give your context a **Name** and write an **Opening Intro** — the greeting the avatar speaks when a session starts. Something like *"Hi — I'm the Acme assistant. Ask me about pricing, setup, or troubleshooting"* primes users on what the avatar can help with before they have to guess.

### Add your website as reference material

Under **Additional context via URL**, paste your links **one at a time** — your docs homepage, pricing page, FAQ, or any URL that represents what you want the avatar to know about.

<Frame>
  <img src="https://mintcdn.com/liveavatar/vfJAvw2HUY1rnwmY/images/docs/guides/embed-avatar/context-editor.png?fit=max&auto=format&n=vfJAvw2HUY1rnwmY&q=85&s=f49e1c826cc3c0bf9247d93cf833d133" alt="Context editor with Name, Opening Intro, URL, and Full prompt fields" width="1200" height="1398" data-path="images/docs/guides/embed-avatar/context-editor.png" />
</Frame>

For each URL you add, LiveAvatar fetches the page and generates an AI summary of its contents, which gets attached to the context as knowledge the avatar can draw from.

<Frame>
  <img src="https://mintcdn.com/liveavatar/vfJAvw2HUY1rnwmY/images/docs/guides/embed-avatar/url-summary.png?fit=max&auto=format&n=vfJAvw2HUY1rnwmY&q=85&s=f82383732cc72340993068e17597eea5" alt="AI-generated summary preview for a submitted URL" width="1198" height="1402" data-path="images/docs/guides/embed-avatar/url-summary.png" />
</Frame>

<Tip>
  The generated summary isn't always perfect — review it before saving. You can edit the text directly in the modal to fix inaccuracies, trim noise, or add detail the model missed.
</Tip>

### Write a specific prompt

The **Full prompt** is the system instructions. A strong prompt is the difference between "a helpful assistant" and "a billing support agent for Acme Corp who only answers questions about our product, in a friendly but concise tone."

A few guidelines:

* **Be specific about the role and company.** Don't leave identity up to the model.
* **Set topic boundaries.** Say what the avatar *should not* answer — this prevents drift onto unrelated subjects.
* **Define the tone.** Formal, casual, technical, playful — pick one and name it.
* **Add guardrails.** Explicit "never do X" rules protect you and your users.

See [Contexts → Tips for writing good prompts](/docs/core-concepts/contexts#tips-for-writing-good-prompts) for more.

### Selecting a voice

Choose the [voice](/docs/core-concepts/voices) your avatar speaks with. Browse the voice library, preview options, and pick the one that fits the persona — tone, accent, and pacing all shape how the avatar comes across.

Once you're ready, click **Save**. You can always come back and make edits.

## Get your embed script

With your context saved, you can generate the embed code directly from the dashboard.

### Select an avatar

Navigate to the [avatar selection screen](https://app.liveavatar.com/home) and pick the avatar you want to use. For this guide, we'll use **Ann Therapist**.

<Frame>
  <img src="https://mintcdn.com/liveavatar/vfJAvw2HUY1rnwmY/images/docs/guides/embed-avatar/avatar-selection.png?fit=max&auto=format&n=vfJAvw2HUY1rnwmY&q=85&s=bd33d38547d437ae07fd97f2e78f5652" alt="Selecting the Ann Therapist avatar from the preset avatars list" width="1496" height="604" data-path="images/docs/guides/embed-avatar/avatar-selection.png" />
</Frame>

### Open the embed modal

In the top right of the avatar page, click the **Embed** button.

<Frame>
  <img src="https://mintcdn.com/liveavatar/vfJAvw2HUY1rnwmY/images/docs/guides/embed-avatar/embed-button.png?fit=max&auto=format&n=vfJAvw2HUY1rnwmY&q=85&s=eeeafd10a03f4764c8a50f640e341987" alt="Embed button in the top right of the avatar detail page" width="2376" height="1350" data-path="images/docs/guides/embed-avatar/embed-button.png" />
</Frame>

### Configure the embed

Select the context you created earlier. Adjust the voice, default language, or time limit if needed — the defaults work for most cases.

<Frame>
  <img src="https://mintcdn.com/liveavatar/vfJAvw2HUY1rnwmY/images/docs/guides/embed-avatar/embed-modal.png?fit=max&auto=format&n=vfJAvw2HUY1rnwmY&q=85&s=0d1cfda9434354618144665d93978a30" alt="Embed your avatar modal with context, voice, language, and time limit fields" width="998" height="1012" data-path="images/docs/guides/embed-avatar/embed-modal.png" />
</Frame>

### Copy the embed code

Click the copy icon next to the HTML snippet at the bottom of the modal. Paste it into your site's HTML, and the avatar will render on the page.

<Tip>
  Prefer to generate embeds programmatically? The same embed can be created via [this endpoint](/api-reference/embeddings/create-embed-v2) with your API key, `avatar_id`, and either a `context_id` or a `voice_agent_id` from a stored [voice agent](/docs/core-concepts/voice-agents).

  Set `is_sandbox` while iterating to avoid credit consumption.
</Tip>

## Improving and iterating

### Understand your users

Every live session produces a transcript, which can be retrieved via [this endpoint](/api-reference/sessions/get-session-transcript) using the session ID. Review transcripts to identify:

* **Questions the avatar answered incorrectly or incompletely** — the prompt or reference URLs are likely missing the relevant information.
* **Topics you didn't anticipate** — add them to the prompt or extend your reference URLs.
* **Off-topic responses** — tighten the topic boundaries in your prompt.
* **Tone mismatches** — adjust the tone instructions in your prompt.

Update your context to fill in these gaps over time.

Contexts update in place, so you don't need to regenerate the embed. Edit the prompt or reference URLs in the dashboard and the changes apply to new sessions immediately.

### Expand your integration

When you're ready to go further, consider:

* Building a reusable [voice agent](/docs/core-concepts/voice-agents) that bundles voice and context into one persona.
* Swapping in a different [avatar](/docs/core-concepts/avatars) or [voice](/docs/core-concepts/voices) to match your brand.
* Exploring [FULL Mode](/docs/full-mode/overview) configurations such as [Push-to-Talk](/docs/full-mode/push-to-talk) or a [custom LLM](/docs/full-mode/custom-llm).
* Building a custom UI with the [Web SDK](https://github.com/heygen-com/liveavatar-web-sdk) for deeper control over rendering and interaction.