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

# Installation

> Install the Anam Widget via CDN, npm, or framework-specific methods

<Tabs>
  <Tab title="CDN (Recommended)">
    Include a script tag and the custom element. No build step required.

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

      ```html jsdelivr theme={"system"}
      <anam-agent-widget agent-id="your-persona-id"></anam-agent-widget>
      <script src="https://cdn.jsdelivr.net/npm/@anam-ai/agent-widget" async></script>
      ```
    </CodeGroup>

    The script auto-registers the `<anam-agent-widget>` custom element. Place it anywhere in your HTML. The `async` attribute ensures it doesn't block page rendering.
  </Tab>

  <Tab title="npm">
    For projects with a build system, install the package and register the element in your application code.

    ```bash theme={"system"}
    npm install @anam-ai/agent-widget
    ```

    ```javascript theme={"system"}
    import { registerWidget } from "@anam-ai/agent-widget";

    registerWidget();
    ```

    Then use `<anam-agent-widget>` anywhere in your templates or JSX.
  </Tab>
</Tabs>

## Framework-specific setup

<Tabs>
  <Tab title="Plain HTML">
    Add the snippet before the closing `</body>` tag:

    ```html theme={"system"}
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Site</title>
    </head>
    <body>
      {/*  Your page content  */}

      <anam-agent agent-id="your-persona-id"></anam-agent>
      <script src="https://unpkg.com/@anam-ai/agent-widget" async></script>
    </body>
    </html>
    ```
  </Tab>

  <Tab title="Next.js">
    Use the `Script` component and render the custom element in a client component:

    ```tsx app/components/AnamWidget.tsx theme={"system"}
    "use client";

    import Script from "next/script";

    export function AnamWidget() {
      return (
        <>
          <Script
            src="https://unpkg.com/@anam-ai/agent-widget"
            strategy="lazyOnload"
          />
          {/* @ts-expect-error -- custom element */}
          <anam-agent agent-id="your-persona-id" />
        </>
      );
    }
    ```

    ```tsx app/layout.tsx theme={"system"}
    import { AnamWidget } from "./components/AnamWidget";

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            {children}
            <AnamWidget />
          </body>
        </html>
      );
    }
    ```
  </Tab>
</Tabs>

For specific website builder guides, see our integration pages for [Shopify](/third-party-integrations/shopify), [WordPress](/third-party-integrations/wordpress), [Wix](/third-party-integrations/wix), and [Squarespace](/third-party-integrations/squarespace), or browse all [widget cookbooks](https://anam.ai/cookbook/topic/widget).

## Domain allowlisting

<Warning>
  The widget will not create sessions unless your domain is allowlisted. Without this step, users will see an "Origin not allowed" error when they try to start a conversation.
</Warning>

To allowlist your domain:

1. Open [Anam Lab](https://lab.anam.ai) and navigate to your persona
2. Go to the **Widget** tab
3. Under **Allowed domains**, add your website origin (e.g., `https://example.com`)
4. Click **Publish**

You can add multiple domains (e.g., production, staging, localhost for development). Alternatively, enable **Allow everywhere** to skip domain restrictions entirely.

<Tip>
  For local development, add `http://localhost:3000` (or your dev server port) to the allowed domains list.
</Tip>
