Installation

Choose the integration method that fits your stack.

Option 1: Script tag (no install)

Drop this into any HTML page:

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

No build step. No package manager. Works everywhere.

Option 2: React / Next.js

npm install @avatarium/react

Provides the <AvatariumEmbed> component. Works with React 18+ and Next.js (App Router and Pages Router).

import { AvatariumEmbed } from '@avatarium/react';
 
<AvatariumEmbed shortId="YOUR_SHORT_ID" mode="voice" />

Option 3: Vanilla JS / Vue / Svelte

npm install @avatarium/js

Framework-agnostic. Creates an iframe and communicates via postMessage.

import { Avatarium } from '@avatarium/js';
 
const avatar = new Avatarium(document.getElementById('avatar'), {
  shortId: 'YOUR_SHORT_ID',
  mode: 'voice',
});

Or load from CDN without a bundler:

<script type="module">
  import { Avatarium } from 'https://cdn.avatarium.ai/sdk.js';
  // ...
</script>

Option 4: iframe (manual)

Embed the avatar URL directly:

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

Option 5: Flutter / Mobile WebView

For Flutter, iOS, Android, and other native apps, load the avatar URL in a WebView. No native SDK required.

Avatar URL:

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

Add webview_flutter to pubspec.yaml:

dependencies:
  webview_flutter: ^4.0.0

import 'package:webview_flutter/webview_flutter.dart';
 
final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setMediaPlaybackRequiresUserGesture(false)
  ..loadRequest(Uri.parse('https://avatarium.ai/a/YOUR_SHORT_ID/voice'));
 
// In build:
WebViewWidget(controller: controller)

See Flutter SDK guide for full setup including microphone permissions.

Option 6: React Native (Native SDK)

Install the React Native package and react-native-webview peer dependency:

npm install @avatarium/react-native react-native-webview

Expo users: Use expo install react-native-webview instead to ensure compatibility with your Expo SDK version.

import { useRef } from 'react'
import { View } from 'react-native'
import { AvatariumEmbed, type AvatariumEmbedHandle } from '@avatarium/react-native'
 
export default function MyScreen() {
  const ref = useRef<AvatariumEmbedHandle>(null)
 
  return (
    <View style={{ flex: 1 }}>
      <AvatariumEmbed
        ref={ref}
        shortId="YOUR_AVATAR_ID"
        style={{ width: '100%', height: 600 }}
        onReady={() => console.log('Ready')}
      />
    </View>
  )
}

See the full React Native example → (opens in a new tab)

Requirements

Browser: Chrome 90+, Firefox 90+, Safari 15+, Edge 90+
React: 18.0+ (for @avatarium/react)
React Native: 0.70+ with react-native-webview 13.0+ (for @avatarium/react-native)
Flutter: Any recent stable version with webview_flutter ^4.0.0
iOS: 14.0+ (WKWebView)
Android: API 21+ (WebView with JavaScript enabled)
Permissions: Microphone access required for voice chat

The SDK uses iframes for rendering – no WebGL, WebSocket, or heavy dependencies in your app.

TypeScript

All official packages include TypeScript types out of the box.

import type { AvatariumEmbedProps } from '@avatarium/react';
import type { AvatariumConfig, AvatariumEvents } from '@avatarium/js';
import type { AvatariumEmbedHandle, AvatariumEmbedProps as RNEmbedProps } from '@avatarium/react-native';

Quick Start Your First Avatar