Guides
Customization

Customization

Customize the appearance and behavior of your avatar.

Container Styling

The Avatar component accepts standard React styling props:

<Avatar
  apiKey="..."
  avatarId="aria-001"
  className="rounded-2xl shadow-xl overflow-hidden"
  style={{
    width: '400px',
    height: '400px',
    backgroundColor: '#1a1a2e',
  }}
/>

Background

Solid Color

<Avatar
  apiKey="..."
  avatarId="aria-001"
  style={{ backgroundColor: '#0f0f23' }}
/>

Gradient

<Avatar
  apiKey="..."
  avatarId="aria-001"
  style={{
    background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
  }}
/>

Transparent (for overlays)

<Avatar
  apiKey="..."
  avatarId="aria-001"
  style={{ backgroundColor: 'transparent' }}
/>

Camera Settings

Control the camera position and zoom:

<Avatar
  apiKey="..."
  avatarId="aria-001"
  cameraPosition={{ x: 0, y: 1.6, z: 2 }}
  cameraTarget={{ x: 0, y: 1.4, z: 0 }}
  fov={45}
/>

Lighting

Customize the lighting:

<Avatar
  apiKey="..."
  avatarId="aria-001"
  lighting={{
    ambient: 0.5,
    directional: {
      intensity: 1,
      position: { x: 5, y: 5, z: 5 },
      color: '#ffffff',
    },
  }}
/>

Animations

Configure idle and talking animations:

<Avatar
  apiKey="..."
  avatarId="aria-001"
  animations={{
    idle: 'idle_breathing',
    talking: 'talk_gesture',
    thinking: 'think_look',
  }}
/>

System Prompt

Customize the avatar's personality:

<Avatar
  apiKey="..."
  avatarId="aria-001"
  systemPrompt={`
    You are Aria, a friendly and knowledgeable assistant for TechCorp.
    You help customers with product questions and support issues.
    Keep responses concise and helpful.
    Always greet users warmly.
  `}
/>

Initial Message

Send a greeting when the avatar connects:

<Avatar
  apiKey="..."
  avatarId="aria-001"
  initialMessage="Hello! Welcome to TechCorp. How can I help you today?"
/>
OverviewAI Providers