Install the Anam Widget

CDN (Recommended)
npm

Include a script tag and the custom element. No build step required.

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

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

For projects with a build system, install the package and register the element in your application code.

npm install @anam-ai/agent-widget

import { registerWidget } from "@anam-ai/agent-widget";

registerWidget();

Then use <anam-agent> anywhere in your templates or JSX.

Framework-specific setup

Plain HTML
Next.js

Add the snippet before the closing </body> tag:

<!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>

Use the Script component and render the custom element in a client component:

app/components/AnamWidget.tsx

"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" />
    </>
  );
}

app/layout.tsx

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, WordPress, Wix, and Squarespace, or browse all widget cookbooks.

Domain allowlisting

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:

Open your persona in the Anam Lab editor.
Select Embed and choose Widget.
Under Allowed Domains, enter your website origin (e.g., https://example.com) and select the + button.
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.

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

​Framework-specific setup

​Domain allowlisting

Framework-specific setup

Domain allowlisting