Include a script tag and the custom element. No build step required.<anam-agent-widget agent-id="your-persona-id"></anam-agent-widget>
<script src="https://unpkg.com/@anam-ai/agent-widget" async></script>
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. 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-widget> anywhere in your templates or JSX.
Framework-specific setup
Add the snippet before the closing </body> tag:<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<!-- Your page content -->
<anam-agent-widget agent-id="your-persona-id"></anam-agent-widget>
<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-widget agent-id="your-persona-id" />
</>
);
}
import { AnamWidget } from "./components/AnamWidget";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<AnamWidget />
</body>
</html>
);
}
For specific website builder guides such as WordPress and Shopify, see the Widget cookbook.
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.