Avatar Activation with WebSDK

This documentation page will guide you through the process of activating and managing avatars using the Avaturn WebSDK. You'll learn how to initialize the SDK, connect to sessions, and interact with a

1. WebSDK initalization

Load the WebSDK

• Begin by loading the WebSDK into your project. You can include it directly in your HTML or import it as a module in your JavaScript.

  <!-- Include the WebSDK in your HTML -->
  <script src="https://cdn.avaturn.live/websdk/v1/avaturn.js"></script>

  OR

  // Import the WebSDK as a module in your JavaScript
  import Avaturn from 'avaturn-sdk';

Initialize the SDK with a Session Token

• After loading the SDK, initialize it using the session token obtained from your backend. This token is crucial for establishing a connection with the avatar session.

  // Initialize the SDK with the session token
  const avaturnHead = new Avaturn({
    sessionToken: 'your_generated_session_token'
  });

2. Connecting to a Session

Connect to the Avatar Session

• Use the WebSDK to connect to the active session. This connection allows the frontend to interact with the avatar, enabling real-time communication and control.

  // Connect to the avatar session
  avaturnHead.connect()
    .then(() => {
      console.log('Connected to the avatar session successfully.');
    })
    .catch((error) => {
      console.error('Failed to connect to the avatar session:', error);
    });

---

3. Avatar Interaction

Send Commands to the Avatar

• Once connected, you can send commands to the avatar, such as making it speak or perform certain actions. These interactions are handled in real-time through the WebSDK.

  // Command the avatar to speak
  avaturnHead.speak('Hello! I am your virtual assistant.')
    .then(() => {
      console.log('Avatar is speaking.');
    })
    .catch((error) => {
      console.error('Failed to make the avatar speak:', error);
    });

Handle Avatar Events

• Subscribe to avatar events to respond to specific actions, like when the avatar starts or stops speaking. This allows you to create a more interactive and dynamic user experience.

  javascriptCopy code// Handle the event when the avatar starts speaking
  avaturnHead.on('avatar_started_speaking', (data) => {
    console.log('Avatar started speaking:', data);
    // Additional actions based on the event
  });
  
  // Handle the event when the avatar stops speaking
  avaturnHead.on('avatar_stopped_speaking', () => {
    console.log('Avatar stopped speaking.');
  });

---

4. Disconnecting and Cleanup

Disconnect from the Session

• When the session is no longer needed, disconnect from it to free up resources. This is especially important in applications where multiple sessions or avatars might be used.

  / Disconnect from the avatar session
  avaturnHead.disconnect()
    .then(() => {
      console.log('Disconnected from the avatar session.');
    })
    .catch((error) => {
      console.error('Failed to disconnect from the session:', error);
    });

Cleanup

• Ensure that you clean up any resources associated with the SDK, especially if you’re navigating away from the page or terminating the session.

  // Cleanup resources
  avaturnHead.cleanup();

Important Considerations

• Session Token: Always ensure that the session token is valid and securely passed to the frontend to avoid unauthorized access.

• Event Handling: Utilize event listeners to create a responsive and interactive environment, providing users with real-time feedback based on the avatar’s actions.

• Resource Management: Properly disconnect and clean up sessions to optimize performance and resource usage.