​
Embed Anam on Your Website

Get up and running in minutes by embedding Anam directly into your website. Similar to YouTube video embeds, Anam offers flexible embedding options to suit different website architectures and security requirements.

​
Quick Decision Guide

Choose Player (iframe) if you:
  • Want an out-of-the-box, full-featured interface
  • Need visual customization isolation
  • Have basic technical requirements
  • Are using platforms with iframe support
Choose SDK (JavaScript) if you:
  • Want to build your own interface
  • Need programmatic control
  • Have full access to page JavaScript
  • Want minimal initial page impact

​
Embed Options

​
Player (iframe)

The Player embed uses an iframe to display the Anam interface within your website. This option provides the most seamless visual integration.
  • Full-featured Anam interface in an embedded frame
  • Isolated from your site’s CSS and JavaScript
  • Easy to implement with a simple iframe tag
  • Responsive design that adapts to container size

​
SDK (JavaScript)

The SDK embed uses JavaScript directly to embed Anam on your page. This can be used to build your own interface.
  • Full control over the interface
  • Programmatic control over the embed
  • Minimal initial footprint on page load

​
Platform Compatibility

Different website builders and platforms have varying levels of support for embedded content. Use this compatibility matrix to determine which embed option works best for your platform.
Legend: - ✅ Supported - Works out of the box - ⚠️ Requires Configuration - Works with additional setup or workarounds - ❌ Not Supported - Cannot be implemented on this platform
PlatformPlayer (iframe)SDK (JavaScript)Notes
WordPress.org✅✅• Unrestricted code access
• Largest market share
• Primary go-to-market target
WordPress.com⚠️❌• iframe & script tags require plugin-enabled plan
• CSP blocks remote scripts
Wix❌❌• Microphone permissions denied
• DOM manipulation incompatible
Shopify✅⚠️• Requires navigation of platform security headers
Squarespace⚠️⚠️• Requires paid plan
• Limited custom code support
Webflow✅⚠️• Enterprise plan may be needed for whitelisting
GoDaddy✅❌• No JS injection capability
Jimdo Creator⚠️⚠️• Requires “Creator” mode
• Allows custom iframe and JS embeds

​
WordPress.com

WordPress.com has strict security policies that limit embed options. Consider using WordPress.org (self-hosted) for full functionality.
Player Embed:
  • Requires Business plan ($25/month) or higher
  • Add via Custom HTML block in the editor
  • May be blocked by security settings on lower-tier plans
SDK Embed:
  • Not supported due to JavaScript restrictions
  • Cannot add custom scripts on any WordPress.com plan

​
WordPress.org (Self-Hosted)

Full support for both Player and SDK embeds with complete control over your WordPress installation.
Player Embed:
  1. Add Custom HTML block in Gutenberg editor
  2. Paste the iframe code
  3. Save and preview
SDK Embed:
  1. Add to theme’s footer.php before </body>
  2. Or use a plugin like “Insert Headers and Footers”
  3. Or add via WordPress Customizer > Additional CSS/JS

​
Wix

Wix isolates custom code in sandboxed iframes, preventing the SDK mode from functioning. Only the Player mode is available.
Player Embed:
  1. Add an “HTML iframe” element from the Embed menu
  2. Click “Enter Code”
  3. Paste the iframe code
  4. Adjust sizing as needed
SDK Embed:❌ Not Supported - Wix’s architecture prevents DOM manipulation required for the SDK mode

​
Shopify

Shopify requires navigating platform-specific security headers, but both embed options are viable with proper configuration.
Player Embed:
  1. Go to Online Store > Themes > Customize
  2. Add a “Custom Liquid” section
  3. Paste the iframe code
  4. May need to adjust Content Security Policy in theme settings
SDK Embed:
  1. Go to Online Store > Themes > Actions > Edit code
  2. Open theme.liquid file
  3. Add script before </body> tag
  4. Alternative: Use a custom script app from Shopify App Store

​
Squarespace

Squarespace requires a paid plan for custom code injection. Support is limited and outside their customer service scope.
Player Embed:
  1. Add a Code Block to your page
  2. Select “HTML” mode
  3. Paste the iframe code
  4. Requires Business plan or higher
SDK Embed:
  1. Go to Settings > Advanced > Code Injection
  2. Add script to Footer section
  3. Requires Business plan or higher
  4. Test thoroughly as debugging support is limited

​
Webflow

Webflow’s “Secure Frame Headers” setting can block iframes. Enterprise plans may be needed for domain whitelisting.
Player Embed:
  1. Add an Embed element to your page
  2. Paste the iframe code
  3. Check Site Settings > Security > Secure Frame Headers
  4. May need to disable or whitelist lab.anam.ai
SDK Embed:
  1. Go to Project Settings > Custom Code
  2. Add script to Footer Code section
  3. Publish to see changes (not visible in designer)
  4. Full custom code support on all paid plans

​
GoDaddy

GoDaddy’s website builder isolates custom code in iframes, preventing the SDK mode from working.
Player Embed:
  1. Add a “Custom Code” section to your page
  2. Select “HTML” option
  3. Paste the iframe code
  4. Limited customization options available
SDK Embed:❌ Not Supported - No capability for JavaScript injection into the main page

​
Jimdo Creator

Jimdo supports custom embeds but only in “Creator” mode, not in their simplified “Dolphin” mode.
Player Embed:
  1. Ensure you’re using Jimdo Creator (not Dolphin)
  2. Add an HTML/Widget element
  3. Paste the iframe code
  4. Adjust dimensions as needed
SDK Embed:
  1. Go to Settings > Edit Head
  2. Add the script code
  3. Requires a paid plan
  4. Test across different page templates

​
Security Considerations

Both embed options require microphone access for voice interactions. Users will be prompted to grant permissions when they first interact with the embedded Anam interface.

​
Content Security Policy (CSP)

If your website uses a Content Security Policy, you’ll need to update it to allow Anam embeds: 
# For Player (iframe)
Content-Security-Policy: frame-src https://lab.anam.ai;

# For SDK (JavaScript)
Content-Security-Policy: script-src https://lab.anam.ai; connect-src https://api.anam.ai https://connect.anam.ai https://connect-us.anam.ai https://connect-eu.anam.ai wss://connect.anam.ai wss://connect-us.anam.ai wss://connect-eu.anam.ai;

# Complete example for both options
Content-Security-Policy:
  default-src 'self';
  frame-src https://lab.anam.ai;
  script-src 'self' https://api.anam.ai;
  connect-src https://api.anam.ai https://connect.anam.ai https://connect-us.anam.ai https://connect-eu.anam.ai wss://connect.anam.ai wss://connect-us.anam.ai wss://connect-eu.anam.ai;
  media-src https://api.anam.ai;

​
HTTPS Requirement

Both embed options require your website to be served over HTTPS. This is necessary for microphone access and secure API communication.

​
Browser Compatibility

Anam embeds support all modern browsers with WebRTC capabilities: - Chrome/Edge: Version 80+ - Firefox: Version 75+ - Safari: Version 14.1+ - Mobile: iOS Safari 14.5+, Chrome Android 80+

​
Performance Considerations

Player (iframe):
  • Initial load: ~2-3MB
  • Best for: Desktop-first experiences
  • Consider: Lazy loading for below-fold placements
SDK (JavaScript):
  • Initial load: ~500KB
  • Best for: Mobile-first experiences
  • Consider: Defer loading until user interaction

​
Testing Your Embed

1

Add the embed code

Choose either Player or SDK and add the appropriate code to your website.
2

Verify HTTPS

Ensure your website is accessed via https:// not http://.
3

Test permissions

Click on the Anam interface and grant microphone permissions when prompted.
4

Verify functionality

Try having a conversation to ensure audio input and output are working correctly.

​
Troubleshooting

  • Verify token: Ensure your SHARE_TOKEN is correct and active
  • Check console: Open browser DevTools (F12) and check for errors
  • Platform limits: Verify your platform plan supports custom embeds
  • HTTPS required: Confirm your site uses https:// not http://
  • Ad blockers: Disable ad blockers that might block embeds
  • Browser permissions: Click the lock icon in address bar to check permissions - HTTPS required: Microphone API only works on secure connections - Browser support: Try Chrome/Edge for best compatibility - Extensions: Disable privacy extensions that block permissions - Test microphone: Try webrtc.github.io/samples/src/content/devices/input-output/
  • Console errors: Look for “NotAllowedError” or “NotFoundError”
  • CSP headers: Add required domains to Content-Security-Policy - X-Frame-Options: Remove or set to SAMEORIGIN if blocking - Platform restrictions: Some platforms have non-configurable security - Embed URLs: Verify using exact URLs from examples
  • WordPress: Disable security plugins temporarily to test - Shopify: Check theme’s content_for_header liquid tag - Wix: Ensure using “HTML iframe” element, not “Embed a Site” - Squarespace: Use Code Block, not Embed Block
  • Slow loading: Implement lazy loading for below-fold embeds
  • Mobile performance: Use SDK mode for lighter initial load
  • Multiple embeds: Only load one Anam instance per page
  • Network speed: Embed requires stable internet connection

​
Best Practices

​
Sizing Recommendations

Player (iframe):
  • Desktop: 720x480px (minimum), 900x600px (optimal)
  • Mobile: 100% width, 400px minimum height
  • Aspect ratio: Maintain 3:2 for best experience
SDK (JavaScript):
  • Bubble size: 60x60px default
  • Expanded view: 380x600px on mobile, 450x650px on desktop

​
Accessibility

Anam embeds include built-in accessibility features: - Keyboard navigation: Full keyboard support - Screen readers: ARIA labels and announcements - Focus indicators: Clear visual focus states - Captions: Real-time transcription available

​
Implementation Checklist

Before going live, verify:
  • HTTPS enabled on your domain
  • Token correctly configured
  • Microphone permissions tested
  • Mobile responsiveness verified
  • Error handling implemented
  • Performance impact assessed
  • Accessibility tested

​
Frequently Asked Questions

No, you should only use one Anam instance per page. Choose either Player or SDK based on your needs.
Share tokens are generated in the Anam Lab. Create or select a persona, then click the share button to generate an embed token.
Player: Limited customization through iframe parameters. SDK: More customization options available through JavaScript configuration.
Anam will display a message prompting users to enable microphone access. Text input fallback is not currently available.
Contact support@anam.ai for information about trials and pricing options.

​
Next Steps

Customize Appearance

Learn how to customize colors, position, and behavior of your embed.

JavaScript API

Control the embed programmatically with our JavaScript API.

Analytics

Track user interactions and conversation metrics.

Advanced Integration

Integrate with your existing authentication and user systems.