How to Embed a 3D Avatar on Your Website in 5 Minutes

Want to add a stunning, interactive 3D avatar to your website? Whether you're building a portfolio, a virtual storefront, or an AI chatbot interface, JoyAvatar's embed widget makes it effortless.

Why Add a 3D Avatar to Your Website?

• Increase engagement — interactive 3D elements boost time-on-page by up to 60%
• Build brand personality — a custom avatar gives your brand a unique digital face
• Enhance AI interactions — pair avatars with chatbots for more natural conversations
• Stand out — most websites are flat. 3D avatars make yours memorable

Method 1: HTML Embed (No Framework Required)

The simplest way to add a JoyAvatar to any website — just paste this snippet:

<!-- JoyAvatar Embed Widget -->
<div id="joy-avatar" style="width: 300px; height: 400px;"></div>
<script src="https://cdn.joyavatar.com/embed/v1.js"></script>
<script>
  JoyAvatar.embed({
    container: '#joy-avatar',
    avatarId: 'your-avatar-id',
    background: 'transparent',
    autoRotate: true,
  });
</script>

Method 2: React Component

import { AvatarEmbed } from '@joyavatar/react';

function ProfileCard() {
  return (
    <div className="profile-card">
      <AvatarEmbed
        avatarId="your-avatar-id"
        width={300}
        height={400}
        autoRotate
        background="transparent"
        cameraPreset="portrait"
      />
      <h2>John Doe</h2>
      <p>Full Stack Developer</p>
    </div>
  );
}

Method 3: Vue Component

<template>
  <div class="avatar-container">
    <JoyAvatarEmbed
      :avatar-id="avatarId"
      :width="300"
      :height="400"
      auto-rotate
      background="transparent"
    />
  </div>
</template>

<script setup>
import { JoyAvatarEmbed } from '@joyavatar/vue';
const avatarId = 'your-avatar-id';
</script>

Customization Options

Performance Tips

1. Lazy load — use loading="lazy" to defer 3D rendering until the avatar is in viewport
2. Optimize model quality — use the quality="medium" option for mobile devices
3. Cache aggressively — avatar models are served with long cache headers by default

Use Case: AI Chatbot with Avatar

Combine JoyAvatar with your favorite LLM to create an AI assistant with a face:

function AIChatbot() {
  const [expression, setExpression] = useState('neutral');

  const handleAIResponse = (response) => {
    // Analyze sentiment and set avatar expression
    if (response.sentiment === 'happy') setExpression('smile');
    if (response.sentiment === 'thinking') setExpression('pondering');
  };

  return (
    <div className="chatbot">
      <AvatarEmbed
        avatarId="chatbot-avatar"
        expression={expression}
        width={200}
        height={250}
        cameraPreset="portrait"
      />
      <ChatInterface onResponse={handleAIResponse} />
    </div>
  );
}

Create Your Avatar Now →