Getting Started
Your First Avatar

Your First Avatar

Build a complete avatar experience step by step.

What we're building

A customer support avatar that:

  • Greets visitors
  • Answers questions about your product
  • Works on desktop and mobile

Create the avatar in your dashboard

  1. Sign up (opens in a new tab) for a free account
  2. Click Create Avatar
  3. Set a name, personality, and greeting message
  4. Choose a voice and appearance
  5. Click Create

Copy the Short ID

Go to Dashboard → Avatars, click your avatar, and copy the Short ID.

Embed it

The fastest way – script tag:

index.html
<!DOCTYPE html>
<html>
<body>
  <h1>Need help?</h1>
  <p>Chat with our AI assistant.</p>
 
  <script src="https://avatarium.ai/widget.js"></script>
  <div id="avatarium-widget" data-avatar-id="YOUR_SHORT_ID" style="width: 400px; height: 600px;"></div>
</body>
</html>

Or with React:

SupportAvatar.tsx
import { AvatariumEmbed } from '@avatarium/react';
 
export function SupportAvatar() {
  return (
    <div style={{ width: '100%', maxWidth: 400, height: 600 }}>
      <AvatariumEmbed
        shortId="YOUR_SHORT_ID"
        mode="voice"
        onReady={(data) => console.log('Avatar ready:', data)}
        onError={(error) => console.error('Error:', error)}
      />
    </div>
  );
}

Style it

Add responsive styling:

.avatar-container {
  width: 100%;
  max-width: 400px;
  height: 600px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
 
@media (max-width: 480px) {
  .avatar-container {
    height: 100vh;
    max-width: 100%;
    border-radius: 0;
  }
}

Customize in the dashboard

All customization happens in the dashboard – no code changes needed:

  • Voice – Choose a quality tier: Basic, Standard, or Premium
  • Personality – System prompt, greeting, communication style
  • Appearance – Select a 3D avatar model
  • Brain – AI provider and intelligence level
  • Knowledge Base – Upload documents for context

Changes apply instantly to all embedded instances.

Next steps

InstallationHow It Works