> ## Documentation Index
> Fetch the complete documentation index at: https://anam.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Embed a conversational AI agent on any website.

<img src="https://mintcdn.com/anam/Z0NV_HNCP25rHJMP/widget-preview.png?fit=max&auto=format&n=Z0NV_HNCP25rHJMP&q=85&s=66c3759735911ced026f73f59cecd85c" alt="Anam Widget" style={{ display:"block",margin:"0 auto",maxWidth:"600px" }} width="675" height="452" data-path="widget-preview.png" />

# What is the Anam Widget?

The Anam Widget (`<anam-agent-widget>`) is a self-contained [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) that embeds a conversational AI avatar on any website. Configuration is managed through [Anam Lab](https://lab.anam.ai) and securely fetched at runtime using domain-based authentication.

## Quick Start

<Steps>
  <Step title="Create a persona in Lab">
    Go to [Anam Lab](https://lab.anam.ai), create a persona, and configure its avatar, voice, and behavior. Navigate to the **Widget** tab to customize the widget appearance.
  </Step>

  <Step title="Allowlist your domain">
    In the Widget tab, add your website's domain to the **Allowed domains** list (e.g., `https://example.com`). Alternatively, enable **Allow everywhere** for unrestricted access.
  </Step>

  <Step title="Publish your persona">
    Click **Publish** to make your configuration live. The widget fetches published settings at runtime, so unpublished changes won't appear on your site.
  </Step>

  <Step title="Paste the embed snippet">
    Copy the embed code from the Widget tab and add it to your website:

    ```html theme={"system"}
    <anam-agent agent-id="your-persona-id"></anam-agent>
    <script src="https://unpkg.com/@anam-ai/agent-widget" async></script>
    ```
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card icon="download" href="/embed/widget/installation" title="Installation">
    CDN, npm, and framework-specific setup guides.
  </Card>

  <Card icon="sliders" href="/embed/widget/configuration" title="Configuration">
    All HTML attributes, layout options, and positioning.
  </Card>

  <Card icon="shopify" href="/embed/widget/shopify" title="Shopify">
    Add the widget to your Shopify store.
  </Card>

  <Card icon="wordpress" href="/embed/widget/wordpress" title="WordPress">
    Add the widget to your WordPress site.
  </Card>
</CardGroup>