## Steps to use the VAM Chatbot

1. **Import the Package:**

   - To import the VAM chatbot package, add the following `<script>` tag to the `<head>` section of your root HTML file. This will load the package from our CDN:
     ```html
     <script src="https://cdn.jsdelivr.net/npm/@vamlabs/vam-chatbot/dist/web-component.min.js"></script>
     ```

2. **Place the Chatbot Component:**
   - Insert the chatbot component into your HTML where you want it to be displayed. Use the following code snippet, replacing the `client-id` with your specific client ID:
     ```html
     <vam-chatbot client-id="<your-client-id>"></vam-chatbot>
     ```

3. **Provide an Auth Token (Optional):**
   - For protected deployments (for example, your portal domain), pass a bearer token for `POST /chat/session`.
   - For public embeds where your backend allows unauthenticated session minting, this can be omitted.
   - Static token via attribute:
     ```html
     <vam-chatbot client-id="<your-client-id>" auth-token="<id-token>"></vam-chatbot>
     ```
   - Recommended (fresh token per request) via JS property:
     ```html
     <script>
       const bot = document.querySelector("vam-chatbot");
       bot.authTokenProvider = async () => {
         return window.getCognitoIdToken();
       };
     </script>
     ```

These steps will help you integrate the VAM chatbot into your webpage seamlessly. Ensure you replace the `client-id` with the one provided to you for proper configuration.

## Notes

- The widget uses a 2-step chat flow (`POST /chat/session` then streamed `POST /chat/stream`) and requires your site origin to be allowlisted for your tenant.
- If configured, `authTokenProvider` is called before each message stream starts so expiring tokens can be refreshed on-demand.
