​
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();