Talking avatar

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:

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

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, and these:

sizenumber | string

The panel width. Numbers are pixels. Default: 240.

shape"card" | "circle"

Default: card.

titlestring

The title over the panel.

posterURL

The image shown before the call starts.

pictureInPictureboolean

Shows a picture-in-picture button where the browser supports it. Default: true.

showCameraboolean

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:

1import { createSession } from "voxioagent/client";
2
3const session = createSession({
4  flowKey: "YOUR_FLOW_KEY",
5  environment: "gpu",
6  media: { audio: true, video: true },
7});
8
9session.on("agentVideo", (stream) => {
10  const video = document.querySelector("#face");
11  video.srcObject = stream;
12  video.play();
13});
14
15document.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.videoboolean

Receives the agent’s lip-synced face.

media.cameraboolean

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:

1createSession({
2  flowKey: "YOUR_FLOW_KEY",
3  environment: "gpu",
4  participants: {
5    ai_participant: "interviewer",
6    participants: [
7      { name: "candidate", connections: [{ name: "interviewer", audio: true, video: true }] },
8      { name: "interviewer", connections: [{ name: "candidate", audio: true, video: true }] },
9    ],
10  },
11});

#Next steps

• Headless sessions: see every session option and event.
• Servers and environments: learn what the GPU environment changes.