HeyGen Avatar Integration

<!-- Container for the avatar -->
<div id="heygen-avatar"></div>

<!-- Load and initialize the widget -->
<script>
const script = document.createElement('script');
script.src = 'https://hga-avatar-widget.rr-startech-innovation.workers.dev/embed.js';
script.onload = () => {
    new window.HGAAvatarWidget({
        containerId: 'heygen-avatar',
        avatarId: 'Wayne_20240711',
        theme: 'light',
        floating: false
    });
};
document.body.appendChild(script);
</script>

// Complete widget configuration
new window.HGAAvatarWidget({
    // Required settings
    containerId: 'heygen-avatar',
    avatarId: 'Wayne_20240711',

    // Optional settings
    apiUrl: 'https://hga-avatar-widget.rr-startech-innovation.workers.dev',
    theme: 'light', // 'light' | 'dark'
    floating: false,
    autoShow: true,

    // Advanced options
    width: '100%',
    height: '600px',
    sessionToken: 'your-session-token',

    // Event callbacks
    onReady: () => console.log('Avatar ready'),
    onError: (error) => console.error('Avatar error:', error),
    onMessage: (message) => console.log('Avatar message:', message)
});

// URL Parameters (alternative to JavaScript config):
?avatarId=Wayne_20240711     // Avatar ID
?theme=light                 // light | dark
?token=session_token         // Optional session token
?floating=false              // Enable floating mode

// Example with parameters:
https://hga-avatar-widget.rr-startech-innovation.workers.dev/widget?avatarId=Wayne_20240711&theme=dark

import React, { useEffect, useRef } from 'react';

const HeyGenAvatar = ({ avatarId, theme, onReady, onMessage }) => {
    const containerRef = useRef(null);
    const widgetRef = useRef(null);

    useEffect(() => {
        if (!containerRef.current || widgetRef.current) return;

        const script = document.createElement('script');
        script.src = 'https://hga-avatar-widget.rr-startech-innovation.workers.dev/embed.js';

        script.onload = () => {
            if (window.HGAAvatarWidget) {
                widgetRef.current = new window.HGAAvatarWidget({
                    containerId: containerRef.current.id,
                    avatarId: avatarId || 'Wayne_20240711',
                    theme: theme || 'light',
                    floating: false,
                    onReady: onReady,
                    onMessage: onMessage
                });
            }
        };

        document.body.appendChild(script);

        return () => {
            if (widgetRef.current) {
                widgetRef.current.destroy();
                widgetRef.current = null;
            }
            if (script.parentNode) {
                script.parentNode.removeChild(script);
            }
        };
    }, [avatarId, theme, onReady, onMessage]);

    return (
        <div
            ref={containerRef}
            id={`heygen-avatar-${Date.now()}`}
            style={{ width: '100%', height: '600px' }}
        />
    );
};

export default HeyGenAvatar;

<template>
  <div
    :id="containerId"
    class="heygen-avatar-container"
    style="width: 100%; height: 600px;"
  ></div>
</template>

<script>
export default {
    name: 'HeyGenAvatar',
    props: {
        avatarId: {
            type: String,
            default: 'Wayne_20240711'
        },
        theme: {
            type: String,
            default: 'light'
        }
    },
    data() {
        return {
            containerId: `heygen-avatar-${Date.now()}`,
            widget: null
        };
    },
    mounted() {
        this.loadWidget();
    },
    beforeDestroy() {
        if (this.widget) {
            this.widget.destroy();
        }
    },
    methods: {
        loadWidget() {
            const script = document.createElement('script');
            script.src = 'https://hga-avatar-widget.rr-startech-innovation.workers.dev/embed.js';

            script.onload = () => {
                this.widget = new window.HGAAvatarWidget({
                    containerId: this.containerId,
                    avatarId: this.avatarId,
                    theme: this.theme,
                    onReady: () => this.$emit('ready'),
                    onMessage: (message) => this.$emit('message', message)
                });
            };

            document.body.appendChild(script);
        }
    }
};
</script>