Installation

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 Anam Lab and navigate to your persona
Go to the Widget tab
Under Allowed domains, add your website origin (e.g., https://example.com)
Click Publish

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

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

Overview

Anam Widget

Installation

Framework-specific setup

Domain allowlisting

​Framework-specific setup

​Domain allowlisting

Framework-specific setup

Domain allowlisting