> ## 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. # Embed Anam on your website > Add an Anam avatar to any website using the Widget, Player, or SDK. Compare options and follow platform-specific setup guides. There are three ways to add an Anam avatar to your site: the Widget, the Player, or the SDK. ## Which option should I use? > [!TIP] > > **Widget** — A pre-built Web Component. The avatar loads directly on your page with its own UI. You can listen to events, handle tool calls, and control it from JavaScript. > > **Player** — A single iframe. The avatar runs inside a sandboxed frame, completely isolated from your page. The most compatible option across website builders, but you can't interact with it from your own code. > > **SDK** — A JavaScript library for building your own interface from scratch. Use this when the pre-built UIs don't fit your design and you want full control over the experience. ## Widget The Widget loads as a `` [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) on your page. It handles its own authentication, renders inside a Shadow DOM (so it won't clash with your styles), and dispatches DOM events you can listen to. > [tab] Features > > * Floating overlay or inline layout modes > * DOM events for analytics, error handling, and custom behavior > * Supports tool calls and text input > * Configure appearance from Lab or HTML attributes > [tab] Requirements > > * Your site must allow external JavaScript > * Configure your website origin under **Embed > Widget > Allowed Domains** in Lab and publish your changes; see [domain allowlisting](https://anam.ai/docs/embed/widget/installation.md#domain-allowlisting) > * Microphone access required for voice > [tab] Example code > > ```html theme={"system"} > > > ``` See the [Widget documentation](https://anam.ai/docs/embed/widget/overview.md) for configuration, events, and framework-specific setup. ## Player The Player runs inside an iframe. Your page and the avatar are fully isolated from each other — different JavaScript contexts, different stylesheets, no interaction between the two. This makes it the most broadly compatible option, especially on platforms that restrict custom JavaScript. Open your persona in the [Anam Lab](https://lab.anam.ai) editor, select **Embed**, and choose **Iframe**. Enter your website origin under **Allowed Domains**, select **+** to add the origin, select **Publish**, then copy the iframe embed code. Widget and iframe embeds use the same persona origin settings. See [origin format and matching rules](https://anam.ai/docs/embed/widget/installation.md#domain-allowlisting). > [tab] Features > > * Full Anam interface in a sandboxed frame > * Isolated from your site's CSS and JavaScript > * Works on platforms that block custom scripts but allow iframes > [tab] Requirements > > * Your site must allow iframe embedding > * Configure allowed origins in Lab, or intentionally enable **Allow everywhere** > * HTTPS required > * Microphone access required for voice > [tab] Example code > > ```html theme={"system"} > > ``` ## SDK The SDK gives you a JavaScript client and raw media streams. There's no pre-built UI — you build your own. Use this when you need complete control over how the avatar looks and behaves on your page. > [tab] Features > > * Full control over layout and appearance > * Direct access to video/audio streams > * Programmatic session management > [tab] Requirements > > * Your site must allow external JavaScript > * HTTPS required > * Microphone access required for voice See the [SDK Reference](https://anam.ai/docs/javascript-sdk/reference/basic-usage.md) for usage details. ## Platform compatibility Not every website builder supports every embed type. This depends on whether the platform lets you add custom JavaScript, iframes, or both. | Platform | Widget | Player | SDK | Notes | | - | - | - | - | - | | WordPress.org | ✅ | ✅ | ✅ | | | Webflow | ✅ | ✅ | ✅ | May need enterprise plan for script whitelisting | | Squarespace | ✅ | ✅ | ✅ | Requires paid plan | | Jimdo Creator | ✅ | ✅ | ✅ | Requires paid plan | | Shopify | ✅ | ✅ | ❌ | | | WordPress.com | ✅ | ✅ | ❌ | Requires paid plan | | GoDaddy | ✅ | ✅ | ❌ | | | Wix | ✅ | ❌ | ❌ | Requires paid plan | > [accordion] Platform-specific instructions > > ### WordPress.com > > Requires Business plan (\$25/month) or higher. Add Widget or Player code via Custom HTML block. SDK is not supported. > > ### WordPress.org (self-hosted) > > All three embed options work. Add code via the Gutenberg editor (Custom HTML block), your theme's `footer.php`, or a plugin like "Insert Headers and Footers". > > ### Shopify > > **Player:** Go to Online Store > Themes > Customize, add a "Custom Liquid" section, paste the iframe code. > > **Widget/SDK:** Go to Online Store > Themes > Actions > Edit code, open `theme.liquid`, add the code before ``. You may need to update your theme's Content Security Policy. > > ### Wix > > Requires a paid plan for custom code. Add Widget or Player code via Wix's HTML/Embed elements. SDK is not supported. > > ### Squarespace > > Requires Business plan or higher. Use a Code Block (HTML mode) for the Player, or Settings > Advanced > Code Injection for Widget/SDK. > > ### Webflow > > **Player:** Add an Embed element and paste the iframe code. Check Site Settings > Security > Secure Frame Headers if it doesn't load. > > **Widget/SDK:** Go to Project Settings > Custom Code, add to Footer Code. Changes aren't visible in the designer — publish first. > > ### GoDaddy > > **Widget/Player:** Add a "Custom Code" section and paste the embed code. SDK is not supported. > > ### Jimdo Creator > > Requires "Creator" mode (not "Dolphin"). Add an HTML/Widget element for the Player, or use Settings > Edit Head for Widget/SDK scripts. ## Security All embed options require HTTPS and microphone access. Users are prompted for microphone permissions the first time they interact with the avatar. ### Content Security Policy (CSP) If your site has a CSP, add these directives for the option you're using: ```http theme={"system"} # Widget Content-Security-Policy: script-src https://unpkg.com/@anam-ai/; connect-src https://api.anam.ai wss://connect.anam.ai wss://connect-us.anam.ai wss://connect-eu.anam.ai; # Player Content-Security-Policy: frame-src https://lab.anam.ai; # SDK Content-Security-Policy: connect-src https://api.anam.ai wss://connect.anam.ai wss://connect-us.anam.ai wss://connect-eu.anam.ai; ``` ### Browser support Use a browser that supports WebRTC and the browser APIs required by your integration. The SDK's video-element playback path uses `requestVideoFrameCallback()`. Test microphone permission, audio playback, and background/resume behavior on the devices and browser versions you deploy. See [Browser and mobile checks](https://anam.ai/docs/resources/session-performance.md#browser-and-mobile-checks); API availability is not an Anam-tested support matrix. ## Troubleshooting > [accordion] Embed not appearing > > * Check the persona ID in the embed code copied from Lab; if using an existing share-link embed, check its share token instead > * Open browser DevTools (F12) and look for errors in the console > * Confirm your site is served over HTTPS, not HTTP > * Check that your platform plan supports custom embeds > * Try disabling ad blockers > [accordion] Microphone not working > > * Click the lock icon in the address bar to check permissions > * Microphone only works over HTTPS > * Try Chrome or Edge for best compatibility > * Disable privacy extensions that might block permissions > * Look for "NotAllowedError" or "NotFoundError" in the console > [accordion] Cross-origin errors > > * Add the required domains to your Content Security Policy (see above) > * For Player: check that X-Frame-Options isn't set to DENY > * For Widget and persona iframe embeds: make sure your website origin is in **Allowed Domains** in Lab's **Embed** tab and your changes are published > * Some platforms have non-configurable security policies ## FAQ > [accordion] Can I use multiple embed options on the same page? > > No. Use one Anam instance per page. > [accordion] What's the difference between a share token and an agent ID? > > The Widget's agent ID is your persona ID. Iframe code copied from **Embed > Iframe** also uses your persona ID. Both use the persona's **Allowed Domains** settings. Existing share-link embeds use a share token instead and have separate origin restrictions; changing the persona's embed settings does not change those share links. > [accordion] Can I customize the appearance? > > **Widget:** Yes — layout, position, UI toggles, and more. Configure from Lab or with HTML attributes. See [Widget configuration](https://anam.ai/docs/embed/widget/configuration.md). > > **Player:** Limited to sizing the iframe. > > **SDK:** Full control — you build the UI yourself. > [accordion] What if users deny microphone access? > > The Widget and SDK support text input as a fallback (enable with the `ui-text-input` attribute or SDK configuration). The Player shows a message asking users to grant access. ## Next steps > [card] [Widget documentation](https://anam.ai/docs/embed/widget/overview.md) > > Configuration, events, and framework-specific setup guides. > [card] [SDK reference](https://anam.ai/docs/javascript-sdk/reference/basic-usage.md) > > Build your own interface with the JavaScript SDK. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.