🚀 Techtree Avatar Simple Demo

One iframe, any size - backend handles everything automatically

✅ Zero-Configuration Integration!
The backend automatically adapts to any container size. No responsive CSS, no media queries, no complex setup needed.

Live Demo:

🎯 Ultra-Simple HTML Code:

<iframe
    src="https://ttavatar-worker.rr-startech-innovation.workers.dev"
    width="100%"
    height="600"
    allow="microphone"
    title="Techtree Avatar">
</iframe>
🎉 That's literally it! The backend automatically:
  • 🔍 Detects container size and device type
  • 📱 Applies optimal layout (compact/mini/wide modes)
  • 🎛️ Scales buttons, text, and spacing appropriately
  • ✨ Ensures all features are always visible
  • 🔄 Adapts in real-time to container changes

📐 Works at Any Size:

Tiny (300x400)

Auto-mini mode
Compact buttons

✅

Medium (500x600)

Auto-compact mode
Optimized spacing

✅

Large (800x800)

Full mode
Centered layout

✅

Any Custom Size

Smart adaptation
Always works

✅

🛠️ Example Implementations:

<!-- WordPress/Blog Post -->
<div class="my-avatar">
    <iframe
        src="https://ttavatar-worker.rr-startech-innovation.workers.dev"
        width="100%"
        height="500"
        allow="microphone">
    </iframe>
</div>

<!-- Sidebar Widget -->
<iframe
    src="https://ttavatar-worker.rr-startech-innovation.workers.dev"
    width="300"
    height="400"
    allow="microphone"
    style="border-radius: 10px;">
</iframe>

<!-- Full Page App -->
<iframe
    src="https://ttavatar-worker.rr-startech-innovation.workers.dev"
    width="100%"
    height="100vh"
    allow="microphone"
    style="border: none;">
</iframe>

<!-- React/Vue Component -->
<iframe
    src="https://ttavatar-worker.rr-startech-innovation.workers.dev"
    className="w-full h-96"
    allow="microphone">
</iframe>

🎯 Backend Intelligence Features:

🔍 Auto-Detection

Iframe context, dimensions, device type

🎛️ Smart Layouts

Mini, compact, standard, wide modes

📱 Mobile-First

Portrait, landscape optimizations

🔄 Real-Time

Adapts to container resize events

✨ Core Avatar Features:

🎤 Voice Input 💬 Text Chat 🔊 AWS Polly TTS 👄 Lip-Sync Animation ⚡ Real-Time Streaming
⚠️ Requirements:
  • Include allow="microphone" for voice features
  • HTTPS required for microphone access
  • Minimum height: 300px recommended

🚀 Next Steps:

📖 Integration Guide

Complete setup instructions

💬 Floating Widget

Chat-style implementation

🏢 Enterprise HGA

Advanced features & HeyGen

🔒 Security Testing

Test rate limits & CORS

🎊 Amazing! You now have a fully functional AI avatar with voice interaction, text chat, and realistic speech synthesis - all with just one simple iframe tag!
Next: Floating Widget → ← Back to Home