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

# Install the Anam Widget

> Install the Anam Widget from the CDN or npm, load it in popular JavaScript frameworks, and connect it to the configuration in Anam Lab.

> [tab] CDN (Recommended)
>
> Include a script tag and the custom element. No build step required.
>
> ```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 agent-id="your-persona-id"></anam-agent>
> <script src="https://cdn.jsdelivr.net/npm/@anam-ai/agent-widget" async></script>
> ```
>
> The script auto-registers the `<anam-agent>` custom element. Place it anywhere in your HTML. The `async` attribute ensures it doesn't block page rendering.

> [tab] 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>` anywhere in your templates or JSX.

## Framework-specific setup

> [tab] 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] 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>
>   );
> }
> ```

For specific website builder guides, see our integration pages for [Shopify](https://anam.ai/docs/embed/widget/shopify.md), [WordPress](https://anam.ai/docs/embed/widget/wordpress.md), [Wix](https://anam.ai/docs/embed/widget/wix.md), and [Squarespace](https://anam.ai/docs/embed/widget/squarespace.md), 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.

To allowlist your domain:

1. Open your persona in the [Anam Lab](https://lab.anam.ai) editor.
2. Select **Embed** and choose **Widget**.
3. Under **Allowed Domains**, enter your website origin (e.g., `https://example.com`) and select the **+** button.
4. Select **Publish** before testing the embed.

These persona settings apply to both **Widget** and **Iframe** embeds. To configure an iframe, choose **Iframe** in the **Embed** tab and use the same **Allowed Domains** controls.

Enter an HTTP or HTTPS origin: a scheme, hostname, and port when needed. Lab assumes `https://` if you omit the scheme and removes paths, query strings, and fragments. For example, `https://example.com/store` is saved as `https://example.com`.

Origins are matched exactly, ignoring case. Add `https://example.com` and `https://www.example.com` separately; allowing one does not allow the other or any other subdomain. HTTP and HTTPS origins differ, as do different non-default ports. Wildcard patterns do not match subdomains.

Add each production, staging, or development origin you need. Alternatively, enable **Allow everywhere** to allow embeds on any domain. Only use this if unrestricted embedding is intentional.

These are persona embed settings, not the separate origin restrictions on share-link embeds. Changing **Allowed Domains** here does not update an existing share link.

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.