# Talking avatar

> Show your agent as a lip-synced face, in a ready-made panel or in your own layout.

Source: https://voxio.in/docs/avatar · voxioagent 2.0.0 · Index: https://voxio.in/docs/llms.txt

A flow with a face can appear as a talking avatar. The face is lip-synced to the agent's voice on Voxio's GPU servers.

## Before you begin

You need:

- A flow with a face. Set one on the flow's **Avatar** tab in the dashboard.
- `environment: "gpu"` in your code: faces are rendered on the GPU servers.

## Add the avatar panel

Mount the panel with your flow key and the GPU environment:

HTML:

```html
<script src="https://cdn.jsdelivr.net/npm/voxioagent@2.0.0/dist/voxio.js"
        data-flow-key="YOUR_FLOW_KEY"
        data-widget="avatar"
        data-environment="gpu"
        data-title="Ask Asha" defer></script>
```

JavaScript:

```js
import { mountAvatar } from "voxioagent/widget";

mountAvatar({
  flowKey: "YOUR_FLOW_KEY",
  environment: "gpu",
  title: "Ask Asha",
  poster: "https://example.com/asha.jpg",
});
```

React:

```jsx
import { VoxioAvatar } from "voxioagent/react";

<VoxioAvatar flowKey="YOUR_FLOW_KEY" environment="gpu" title="Ask Asha" />
```

Replace `YOUR_FLOW_KEY` with your flow key, from the flow's **Overview** in the dashboard.

A panel appears with the poster image. When the visitor starts the call, the face replaces it and talks.

## Options

The panel takes the same session, look and placement options as the [voice button](https://voxio.in/docs/voice-button.md), and these:

- `size` (number | string): The panel width. Numbers are pixels. Default: 240.
- `shape` ("card" | "circle"): Default: `card`.
- `title` (string): The title over the panel.
- `poster` (URL): The image shown before the call starts.
- `pictureInPicture` (boolean): Shows a picture-in-picture button where the browser supports it. Default: true.
- `showCamera` (boolean): Shows the visitor’s own camera in a corner, and sends it to the agent. Default: false.

## Show the face in your own layout

To place the face yourself, ask a session for video and put the stream in your own `<video>` element:

```js
import { createSession } from "voxioagent/client";

const session = createSession({
  flowKey: "YOUR_FLOW_KEY",
  environment: "gpu",
  media: { audio: true, video: true },
});

session.on("agentVideo", (stream) => {
  const video = document.querySelector("#face");
  video.srcObject = stream;
  video.play();
});

document.querySelector("#start").onclick = () => session.start();
```

The face appears in `#face` a moment after the call connects. These media options control what is sent and received:

- `media.video` (boolean): Receives the agent’s lip-synced face.
- `media.camera` (boolean): Sends the visitor’s camera, for flows that can see.

While a call is live, `session.localStream` holds the visitor's own microphone and camera.

## Describe the participants

To decide yourself who sees and hears whom, pass `participants`. The voice server receives it as given. A participant with a `video: true` connection to the `ai_participant` gets the avatar.

This interview has the candidate and the interviewer seeing and hearing each other:

```js
createSession({
  flowKey: "YOUR_FLOW_KEY",
  environment: "gpu",
  participants: {
    ai_participant: "interviewer",
    participants: [
      { name: "candidate", connections: [{ name: "interviewer", audio: true, video: true }] },
      { name: "interviewer", connections: [{ name: "candidate", audio: true, video: true }] },
    ],
  },
});
```

## Next steps

- [Headless sessions](https://voxio.in/docs/sessions.md): see every session option and event.
- [Servers and environments](https://voxio.in/docs/environments.md): learn what the GPU environment changes.