Example: Customer Support Bot

// SupportBot.jsx
import { useState } from 'react';
import {
  Avatar,
  AvatariumProvider,
  useConversation
} from '@avatarium/react';
 
const PERSONALITY = `
You are a helpful customer support agent for ACME Software.
 
## Your Role
- Answer questions about our products and pricing
- Help troubleshoot common issues
- Collect information for human follow-up when needed
 
## Products
- ACME Pro: $49/month - Full feature set
- ACME Basic: $19/month - Core features
- Both include 14-day free trial
 
## Common Issues
1. Login problems: Clear cookies, try incognito mode
2. Billing questions: Direct to billing@acme.com
3. Feature requests: Thank them, note the request
 
## Guidelines
- Keep responses under 3 sentences
- Be empathetic but efficient
- If you can't help, offer to connect with a human
`;
 
export function SupportBot() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <>
      {/* Floating Button */}
      <button
        onClick={() => setIsOpen(true)}
        className="support-button"
      >
        Need Help?
      </button>
 
      {/* Chat Modal */}
      {isOpen && (
        <div className="support-modal">
          <div className="support-header">
            <h3>ACME Support</h3>
            <button onClick={() => setIsOpen(false)}>×</button>
          </div>
 
          <AvatariumProvider apiKey={process.env.NEXT_PUBLIC_AVATARIUM_KEY}>
            <Avatar
              model="scarlett"
              personality={PERSONALITY}
              greeting="Hi! I'm here to help with any questions about ACME. What can I do for you?"
              voice={{ provider: 'elevenlabs', voiceId: 'rachel' }}
            />
          </AvatariumProvider>
        </div>
      )}
    </>
  );
}

.support-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 16px 24px;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
 
.support-modal {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 400px;
  height: 600px;
  background: #111118;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
 
.support-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #2a2a38;
}

function SupportBot() {
  const { messages } = useConversation();
 
  const shouldEscalate = messages.some(msg =>
    msg.content.toLowerCase().includes('speak to human') ||
    msg.content.toLowerCase().includes('real person')
  );
 
  if (shouldEscalate) {
    return <EscalationForm />;
  }
 
  return <Avatar ... />;
}

<Avatar
  onMessage={(message) => {
    analytics.track('support_message', {
      role: message.role,
      length: message.content.length
    });
  }}
  onConversationEnd={() => {
    analytics.track('support_session_end');
  }}
/>