SDK Overview

Avatarium uses an iframe-based architecture. All 3D rendering, TTS, STT, and lip-sync are handled by the hosted widget. Your app just embeds a URL and communicates via postMessage.

Integration options

Method	Best for	Install
Script tag	Any website, no build step	None
`@avatarium/react`	React / Next.js apps	`npm install @avatarium/react`
`@avatarium/js`	Vanilla JS / Vue / Svelte	`npm install @avatarium/js`
`@avatarium/react-native`	React Native / Expo mobile apps	`npm install @avatarium/react-native`
iframe	Full isolation	None
WebView (Mobile & Desktop)	iOS, Android, Flutter, desktop	None

Quick examples

Script tag (simplest)

<script src="https://avatarium.ai/widget.js"></script>
<div id="avatarium-widget" data-avatar-id="YOUR_SHORT_ID"></div>

React / Next.js

import { AvatariumEmbed } from '@avatarium/react';
 
<AvatariumEmbed
  shortId="YOUR_SHORT_ID"
  mode="voice"
  onReady={(data) => console.log('Ready:', data)}
  style={{ width: 400, height: 600 }}
/>

Vanilla JS / Vue

import { Avatarium } from '@avatarium/js';
 
const avatar = new Avatarium(document.getElementById('avatar'), {
  shortId: 'YOUR_SHORT_ID',
  mode: 'voice',
});
 
avatar.on('ready', (data) => console.log('Ready:', data));
avatar.on('state', ({ state }) => console.log('State:', state));

iframe

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

WebView (iOS / Android / Flutter)

Load this URL in any WebView:

https://avatarium.ai/a/YOUR_SHORT_ID/voice

// iOS
let webView = WKWebView(frame: view.bounds)
webView.load(URLRequest(url: URL(string: "https://avatarium.ai/a/YOUR_SHORT_ID/voice")!))

// Android
webView.settings.javaScriptEnabled = true
webView.settings.mediaPlaybackRequiresUserGesture = false
webView.loadUrl("https://avatarium.ai/a/YOUR_SHORT_ID/voice")

// Flutter
WebViewWidget(
  controller: WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse('https://avatarium.ai/a/YOUR_SHORT_ID/voice')),
)

Code examples

Full working examples for each framework:

Next steps

React SDK – <AvatariumEmbed> component reference
JavaScript SDK – Avatarium class and Widget
Flutter / WebView – Mobile and desktop WebView integration
Embedding Guide – Advanced embed options

Errors React