Guides
Embedding

Embedding Avatars

Add an Avatarium avatar to any website or application. No SDK installation required.

Script Tag (Recommended)

The easiest way – no build step required:

<script src="https://avatarium.ai/widget.js"></script>
<div id="avatarium-widget" data-avatar-id="YOUR_SHORT_ID" style="width: 400px; height: 600px;"></div>

The widget handles everything: loading the 3D avatar, voice chat UI, and responsive sizing.

Widget Options

AttributeDescriptionDefault
data-avatar-idYour avatar's short ID (required)–
data-widthWidget width100%
data-heightWidget height600px

iframe Embed

For more control over isolation and styling:

<iframe
  src="https://avatarium.ai/a/YOUR_SHORT_ID/voice"
  style="width: 400px; height: 600px; border: none; border-radius: 16px;"
  allow="microphone; camera"
></iframe>
⚠️

The allow="microphone" attribute is required for voice chat to work.

Responsive iframe

<div style="position: relative; width: 100%; max-width: 400px; aspect-ratio: 9/16;">
  <iframe
    src="https://avatarium.ai/a/YOUR_SHORT_ID/voice"
    style="position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 16px;"
    allow="microphone; camera"
  ></iframe>
</div>

Framework Examples

export function AvatarWidget({ avatarId }: { avatarId: string }) {
  return (
    <iframe
      src={`https://avatarium.ai/a/${avatarId}/voice`}
      className="w-full h-[600px] border-0 rounded-2xl"
      allow="microphone; camera"
    />
  );
}

Mobile Apps (WebView)

For native mobile apps, load the avatar URL in a WebView:

PlatformComponent
iOS (Swift)WKWebView – grant microphone permission
AndroidWebView – enable JavaScript + MediaStream
Flutterwebview_flutter or flutter_inappwebview
React Nativereact-native-webview
URL: https://avatarium.ai/a/YOUR_SHORT_ID/voice
💡

Ensure your WebView grants microphone access for voice chat to work.

Desktop Apps

For Electron, Tauri, or native desktop apps:

  • Tauri – Uses native WebView (WKWebView on macOS, WebView2 on Windows)
  • Electron – Standard <webview> or BrowserWindow

Load the same URL: https://avatarium.ai/a/YOUR_SHORT_ID/voice

Finding Your Avatar ID

  1. Go to Dashboard (opens in a new tab)
  2. Click on your avatar
  3. The Short ID is shown in avatar details (e.g., abc123)

Customization

All avatar customization (voice, personality, appearance) is managed in the dashboard. Changes apply instantly to all embedded instances – no code updates needed.

Next Steps

Knowledge BaseBring Your Own Key (BYOK)