# Avatar Activation with WebSDK

### 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.

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

  OR

  ```javascript
  // 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.

  ```javascript
  // 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.

  ```javascript
  // 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.

  ```javascript
  // 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.

  ```javascript
  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.

  ```javascript
  / 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.

  ```javascript
  // Cleanup resources
  avaturnHead.cleanup();
  ```

{% hint style="warning" %}
**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.
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://avaturn.gitbook.io/avaturn-integration/avaturn.live/integration-guide/avatar-activation-with-websdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.