Floating Widget - Techtree Avatar Client

ℹ️ Chat-Style: Floating button that opens the avatar in a popup-style container. Perfect for customer support and chat-based interactions.

Demo Instructions:

Look for the floating 💬 button in the bottom-right corner of your screen. Click it to open the avatar chat!

Complete HTML Code:

<!-- CSS Styles -->
<style>
.floating-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.floating-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #667eea;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: transform 0.3s;
}

.floating-button:hover {
    transform: scale(1.1);
}

.floating-iframe-container {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 450px;
    height: 650px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
}

.floating-iframe-container.active {
    display: block;
}

.floating-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .floating-iframe-container {
        width: 90vw;
        height: 80vh;
        right: 5vw;
    }
}
</style>

<!-- Floating button -->
<div class="floating-widget">
    <button class="floating-button" onclick="toggleFloatingChat()" title="Open Avatar Chat">
        💬
    </button>
    <div id="floatingContainer" class="floating-iframe-container">
        <iframe
            src="https://ttavatar-worker.rr-startech-innovation.workers.dev"
            allow="microphone"
            title="Techtree Avatar Floating">
        </iframe>
    </div>
</div>

<!-- JavaScript -->
<script>
function toggleFloatingChat() {
    const container = document.getElementById('floatingContainer');
    container.classList.toggle('active');
}
</script>

Customization Options:

Button Position

bottom-left, bottom-right, top corners

Button Style

Colors, icons, animations

Container Size

Adjustable width and height

Animation

Slide, fade, scale effects

Position Variations:

<!-- Bottom Left -->
.floating-widget {
    bottom: 30px;
    left: 30px;
}

<!-- Top Right -->
.floating-widget {
    top: 30px;
    right: 30px;
}

<!-- Center of screen -->
.floating-widget {
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

Advanced Features:

<!-- With notification badge -->
<div class="floating-widget">
    <button class="floating-button" onclick="toggleFloatingChat()">
        💬
        <span class="notification-badge">1</span>
    </button>
</div>

<!-- With close button in container -->
<div class="floating-iframe-container" id="floatingContainer">
    <div class="container-header">
        <span>Chat with AI Avatar</span>
        <button onclick="toggleFloatingChat()" class="close-btn">×</button>
    </div>
    <iframe src="..." allow="microphone"></iframe>
</div>

<!-- Auto-open after delay -->
<script>
setTimeout(() => {
    document.getElementById('floatingContainer').classList.add('active');
}, 5000); // Open after 5 seconds
</script>

✅ Benefits:

Non-intrusive - doesn't affect page layout
Always accessible from any page
Familiar chat interface for users
Mobile-optimized popup size
Easy to implement on existing sites

WordPress/CMS Integration:

<!-- Add to footer.php or site-wide footer -->
<?php if (!is_admin()) : ?>
<div class="floating-widget">
    <button class="floating-button" onclick="toggleFloatingChat()">💬</button>
    <div id="floatingContainer" class="floating-iframe-container">
        <iframe src="https://ttavatar-worker.rr-startech-innovation.workers.dev" allow="microphone"></iframe>
    </div>
</div>
<?php endif; ?>

⚠️ Performance Note: The iframe loads immediately when the page loads. For better performance, consider lazy-loading the iframe only when the user first clicks the button.

Next: Security Testing → ← Back: Responsive Embed