Integration Guide

​

Step 1: Install Dependencies

Install the SDK.

npm install @avaturn-live/web-sdk

​

Step 2: Initialize

Create an instance of the AvaturnHead class and initialize it with an optional configuration.
You need to pass a session token obtained from this endpoint (it must be used in the backend).

Make sure to correctly pass a reference to the DOM element (domElement) depending on your framework (e.g., use ref in React or Vue, @ViewChild in Angular, etc.).

import { AvaturnHead } from "./AvaturnHead";

const domElement = document.querySelector("#avaturn-video");

const avaturnHead = new AvaturnHead(domElement, { sessionToken: "[session token obtained from backend]" });
await avaturnHead.init();

​

Step 3: Send Tasks

Use the task method to send speech requests. If the avatar is already speaking, the text fragment is queued to be spoken at a later time. Nothing is said while you’re disconnected.

const response = await avaturnHead.task("Some text to say");
console.log(response);

​

Step 4: Subscribe to Events

Register event listeners to handle specific events during the session.

avaturnHead.on("avatar_started_speaking", (data) => {
  console.log("Avatar started speaking:", data);
});

If you no longer need to listen to an event, you can remove the event listener.

avaturnHead.off("avatar_started_speaking", callback);

​

Step 6: Dispose

When you are done with the session, make sure to call the dispose method to clean up resources.

avaturnHead.dispose();