Examples
Embedded Widget

Example: Embedded Widget

Add an avatar chat widget to any website.

What We're Building

A chat widget that:

  • Floats in the corner of any page
  • Opens with a click
  • Works on any website
  • Requires no React knowledge

Try It Yourself

Create Your Own → (opens in a new tab)

Quick Setup (No Code)

Add this to any website:

<script
  src="https://avatarium.ai/widget.js"
  data-avatar-id="YOUR_AVATAR_ID"
  data-position="bottom-right"
  data-theme="dark"
></script>

That's it! A chat button will appear in the corner.

Customization Options

<script
  src="https://avatarium.ai/widget.js"
  data-avatar-id="YOUR_AVATAR_ID"
  data-position="bottom-right"
  data-theme="dark"
  data-button-text="Chat with AI"
  data-greeting="Hi! How can I help?"
  data-primary-color="#6366f1"
></script>
OptionValuesDefault
data-positionbottom-right, bottom-leftbottom-right
data-themedark, light, autoauto
data-button-textAny textChat
data-greetingAny textAvatar's default
data-primary-colorHex color#6366f1
data-button-iconchat, avatar, customchat

JavaScript API

Control the widget programmatically:

<script src="https://avatarium.ai/widget.js" ...></script>
<script>
  // Wait for widget to load
  window.addEventListener('avatarium:ready', () => {
    // Open the widget
    Avatarium.open();
 
    // Close the widget
    Avatarium.close();
 
    // Toggle the widget
    Avatarium.toggle();
 
    // Send a message
    Avatarium.send('Hello!');
 
    // Listen for events
    Avatarium.on('message', (msg) => {
      console.log('New message:', msg);
    });
 
    Avatarium.on('open', () => {
      console.log('Widget opened');
    });
 
    Avatarium.on('close', () => {
      console.log('Widget closed');
    });
  });
</script>

Custom Build

For full control, build your own widget:

// Widget.jsx
import { useState } from 'react';
import { Avatar, AvatariumProvider } from '@avatarium/react';
 
export function ChatWidget({ avatarId, position = 'bottom-right' }) {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div className={`widget-container ${position}`}>
      {/* Chat Button */}
      {!isOpen && (
        <button
          onClick={() => setIsOpen(true)}
          className="widget-button"
        >
          💬
        </button>
      )}
 
      {/* Chat Window */}
      {isOpen && (
        <div className="widget-window">
          <div className="widget-header">
            <span>Chat with us</span>
            <button onClick={() => setIsOpen(false)}>×</button>
          </div>
 
          <AvatariumProvider apiKey={process.env.NEXT_PUBLIC_AVATARIUM_KEY}>
            <Avatar avatarId={avatarId} />
          </AvatariumProvider>
        </div>
      )}
    </div>
  );
}

Styles

.widget-container {
  position: fixed;
  z-index: 9999;
}
 
.widget-container.bottom-right {
  bottom: 24px;
  right: 24px;
}
 
.widget-container.bottom-left {
  bottom: 24px;
  left: 24px;
}
 
.widget-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #6366f1;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s;
}
 
.widget-button:hover {
  transform: scale(1.1);
}
 
.widget-window {
  width: 380px;
  height: 600px;
  background: #111118;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
 
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #1a1a2e;
  color: white;
}
 
.widget-header button {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}
 
/* Mobile responsive */
@media (max-width: 480px) {
  .widget-window {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

WordPress Integration

Add to WordPress using a custom HTML block or your theme's footer:

// In functions.php
function add_avatarium_widget() {
  ?>
  <script
    src="https://avatarium.ai/widget.js"
    data-avatar-id="<?php echo get_option('avatarium_id'); ?>"
    data-theme="dark"
  ></script>
  <?php
}
add_action('wp_footer', 'add_avatarium_widget');

Shopify Integration

Add to theme.liquid before </body>:

{% if settings.avatarium_enabled %}
<script
  src="https://avatarium.ai/widget.js"
  data-avatar-id="{{ settings.avatarium_id }}"
  data-theme="{{ settings.avatarium_theme }}"
></script>
{% endif %}

Download Full Example → (opens in a new tab)

Streaming AvatarChangelog