@hgateam/chat-widget 1.0.0

package/README.md

@@ -0,0 +1,83 @@
+# @ticktur/chat-widget
+
+Widget de chat embebible con WebSocket en tiempo real para eventos de Ticktur.
+
+## Instalación
+
+### Opción 1: Desde GitHub (Desarrollo)
+
+```bash
+npm install git+https://github.com/ticktur/events-front.git#dev-adrian:packages/chat-widget
+```
+
+### Opción 2: Uso Directo (CDN)
+
+No requiere instalación. Solo incluye el script en tu HTML:
+
+```html
+<!-- Widget Integration: Solo configurar el data-event-id y data-widget-hash -->
+<script
+    src="http://localhost:5173/widget.js"
+    data-event-id="1"
+    data-widget-hash="f51c8b6939c6a86adf4df6f847e78ec1">
+</script>
+```
+
+**Producción:**
+```html
+<script
+    src="https://cdn.ticktur.com/widget.js"
+    data-event-id="TU_EVENT_ID"
+    data-widget-hash="TU_HASH_WIDGET">
+</script>
+```
+
+## Uso con NPM
+
+Si instalaste desde npm, necesitas servir el archivo `widget.js`:
+
+```javascript
+// En tu proyecto Node.js/Express
+app.use('/widget', express.static('node_modules/@ticktur/chat-widget/public'));
+```
+
+Luego en tu HTML:
+```html
+<script
+    src="/widget/widget.js"
+    data-event-id="1"
+    data-widget-hash="tu-hash-aqui">
+</script>
+```
+
+## Características
+
+- Widget flotante en esquina inferior derecha
+- Chat en tiempo real con WebSocket (Laravel Reverb)
+- Totalmente aislado del CSS/JS del sitio host
+- Responsive (móvil y desktop)
+- Framework-agnostic (funciona en cualquier web)
+
+## Configuración
+
+El widget requiere 2 atributos:
+
+- `data-event-id`: ID del evento en Ticktur
+- `data-widget-hash`: Hash de autorización del widget (obtenido desde el dashboard)
+
+## API Backend
+
+El widget se conecta a:
+- API de validación: `GET /api/widgets/validate/{hash}`
+- WebSocket: Laravel Reverb en puerto 8080
+- Canal público: `widget.{hash}`
+
+## Eventos WebSocket
+
+El widget escucha:
+- `WidgetStatusChanged`: Cuando se activa/desactiva el widget
+- `WidgetMessageReceived`: Nuevos mensajes del soporte
+
+## Soporte
+
+Para más información: https://github.com/ticktur/events-front

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@hgateam/chat-widget",
+    "version": "1.0.0",
+    "description": "Widget de chat embebible con WebSocket para eventos de Ticktur",
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "types": "types/index.d.ts",
+    "files": [
+        "src/",
+        "public/widget.js",
+        "types/",
+        "README.md",
+        "INSTALL.md"
+    ],
+    "scripts": {
+        "test": "echo \"No tests configured\" && exit 0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ticktur/events-front.git",
+        "directory": "packages/chat-widget"
+    },
+    "keywords": [
+        "chat",
+        "widget",
+        "embeddable",
+        "websocket",
+        "ticktur",
+        "vue",
+        "react",
+        "webpack",
+        "vite"
+    ],
+    "author": "Ticktur",
+    "license": "MIT",
+    "peerDependencies": {
+        "pusher-js": "^8.2.0",
+        "laravel-echo": "^1.15.3"
+    },
+    "bugs": {
+        "url": "https://github.com/ticktur/events-front/issues"
+    },
+    "homepage": "https://github.com/ticktur/events-front/tree/dev-adrian/packages/chat-widget#readme"
+}

package/public/widget.js

@@ -0,0 +1,535 @@
+/**
+ * Ticktur Chat Widget - Versión Embebible
+ *
+ * Uso:
+ * <script src="https://chat.ticktur.com/widget.js" data-event-id="1"></script>
+ *
+ * Funcionalidad:
+ * - Crea un botón flotante verde (#10b981) en la esquina inferior derecha
+ * - Al hacer clic, abre una ventana de chat en iFrame
+ * - Totalmente aislado del CSS/JS del sitio host
+ * - Framework-agnostic (funciona en cualquier web)
+ *
+ * Futuro (Fase 2):
+ * - Autenticación con API key usando MD5
+ * - data-api-key="tu-clave-md5"
+ */
+
+(function () {
+    'use strict';
+
+    // Configuración
+    const CONFIG = {
+        BASE_URL: 'http://localhost:5173', // Cambiar en producción a https://chat.ticktur.com
+        BUTTON_COLOR: '#10b981',
+        BUTTON_HOVER_COLOR: '#059669',
+        WIDGET_WIDTH: '400px',
+        WIDGET_HEIGHT: '600px',
+        WIDGET_WIDTH_MOBILE: '100%',
+        WIDGET_HEIGHT_MOBILE: '100%',
+        Z_INDEX: '9999'
+    };
+
+    // Obtener el script tag actual
+    const currentScript = document.currentScript || document.querySelector('script[data-event-id]');
+
+    if (!currentScript) {
+        console.error('[Ticktur Widget] No se encontró el script tag con data-event-id');
+        return;
+    }
+
+    // Extraer configuración del script tag
+    const eventId = currentScript.getAttribute('data-event-id');
+    const widgetHash = currentScript.getAttribute('data-widget-hash');
+
+    if (!eventId) {
+        console.error('[Ticktur Widget] Falta el atributo data-event-id en el script tag');
+        return;
+    }
+
+    if (!widgetHash) {
+        console.error('[Ticktur Widget] Falta el atributo data-widget-hash en el script tag');
+        return;
+    }
+
+    console.log('[Ticktur Widget] Inicializando widget...');
+    console.log('[Ticktur Widget] Hash:', widgetHash);
+    console.log('[Ticktur Widget] Evento:', eventId);
+
+    // Variable para almacenar datos del widget validado
+    let widgetData = null;
+
+    // Validar widget contra la base de datos usando endpoint de autorización
+    async function validateWidget() {
+        try {
+            const apiUrl = CONFIG.BASE_URL.replace(':5173', ':8000');
+
+            const response = await fetch(`${apiUrl}/api/widgets/validate/${widgetHash}`);
+
+            if (!response.ok) {
+                console.error('[Ticktur Widget] Autorización denegada. Status:', response.status);
+                return false;
+            }
+
+            const data = await response.json();
+
+            if (!data.success) {
+                console.error('[Ticktur Widget] Widget no autorizado');
+                return false;
+            }
+
+            widgetData = data.data;
+
+            console.log('[Ticktur Widget] Widget autorizado correctamente');
+            console.log('[Ticktur Widget] Nombre:', widgetData.widget_name);
+            console.log('[Ticktur Widget] Evento ID:', widgetData.event_id);
+            console.log('[Ticktur Widget] Estado:', widgetData.is_active ? 'Activo' : 'Inactivo');
+            return true;
+        } catch (error) {
+            console.error('[Ticktur Widget] Error al validar widget:', error);
+            return false;
+        }
+    }
+
+    // Estado del widget
+    let widgetState = {
+        isOpen: false,
+        isMinimized: false,
+        hasUnreadMessages: false
+    };
+
+    // Crear contenedor principal del widget
+    function createWidgetContainer() {
+        const container = document.createElement('div');
+        container.id = 'ticktur-widget-container';
+        container.style.cssText = `
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: ${CONFIG.Z_INDEX};
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        `;
+        return container;
+    }
+
+    // Crear botón flotante
+    function createFloatingButton() {
+        const button = document.createElement('button');
+        button.id = 'ticktur-widget-button';
+        button.setAttribute('aria-label', 'Abrir chat de soporte');
+        button.innerHTML = `
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+        `;
+        button.style.cssText = `
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, ${CONFIG.BUTTON_COLOR} 0%, ${CONFIG.BUTTON_HOVER_COLOR} 100%);
+            border: none;
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            outline: none;
+            position: relative;
+        `;
+
+        // Badge de notificación (sin usar inicialmente)
+        const badge = document.createElement('span');
+        badge.id = 'ticktur-widget-badge';
+        badge.style.cssText = `
+            position: absolute;
+            top: -2px;
+            right: -2px;
+            width: 20px;
+            height: 20px;
+            background: #ef4444;
+            border-radius: 50%;
+            border: 2px solid white;
+            font-size: 11px;
+            font-weight: bold;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        `;
+        badge.textContent = '1';
+        button.appendChild(badge);
+
+        // Hover effect
+        button.addEventListener('mouseenter', () => {
+            button.style.transform = 'scale(1.1)';
+            button.style.boxShadow = '0 6px 20px rgba(16, 185, 129, 0.5)';
+        });
+
+        button.addEventListener('mouseleave', () => {
+            button.style.transform = 'scale(1)';
+            button.style.boxShadow = '0 4px 12px rgba(16, 185, 129, 0.4)';
+        });
+
+        // Click event
+        button.addEventListener('click', toggleWidget);
+
+        return button;
+    }
+
+    // Crear ventana de chat (iFrame)
+    function createChatWindow() {
+        const chatWindow = document.createElement('div');
+        chatWindow.id = 'ticktur-widget-window';
+        chatWindow.style.cssText = `
+            position: fixed;
+            bottom: 100px;
+            right: 20px;
+            width: ${CONFIG.WIDGET_WIDTH};
+            height: ${CONFIG.WIDGET_HEIGHT};
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+            overflow: hidden;
+            display: none;
+            flex-direction: column;
+            z-index: ${CONFIG.Z_INDEX};
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            transform-origin: bottom right;
+        `;
+
+        // iFrame del chat
+        const iframe = document.createElement('iframe');
+        iframe.id = 'ticktur-widget-iframe';
+        iframe.src = `${CONFIG.BASE_URL}/embed/${eventId}`;
+        iframe.style.cssText = `
+            width: 100%;
+            height: 100%;
+            border: none;
+            display: block;
+        `;
+        iframe.setAttribute('allow', 'microphone; camera'); // Por si en el futuro se agrega video/audio
+        iframe.setAttribute('title', 'Chat de Soporte Ticktur');
+
+        chatWindow.appendChild(iframe);
+
+        // Responsive: fullscreen en móviles
+        if (window.innerWidth <= 768) {
+            chatWindow.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                width: ${CONFIG.WIDGET_WIDTH_MOBILE};
+                height: ${CONFIG.WIDGET_HEIGHT_MOBILE};
+                border-radius: 0;
+                z-index: ${CONFIG.Z_INDEX};
+            `;
+        }
+
+        return chatWindow;
+    }
+
+    // Toggle del widget (abrir/cerrar)
+    function toggleWidget() {
+        const chatWindow = document.getElementById('ticktur-widget-window');
+        const button = document.getElementById('ticktur-widget-button');
+        const badge = document.getElementById('ticktur-widget-badge');
+
+        if (!chatWindow) return;
+
+        widgetState.isOpen = !widgetState.isOpen;
+
+        if (widgetState.isOpen) {
+            // Abrir
+            chatWindow.style.display = 'flex';
+            chatWindow.style.transform = 'scale(1)';
+            chatWindow.style.opacity = '1';
+            button.style.transform = 'rotate(90deg) scale(1.1)';
+
+            // Ocultar badge al abrir
+            if (badge) {
+                badge.style.display = 'none';
+                widgetState.hasUnreadMessages = false;
+            }
+
+            // Cambiar icono a X
+            button.innerHTML = `
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            `;
+        } else {
+            // Cerrar
+            chatWindow.style.transform = 'scale(0.8)';
+            chatWindow.style.opacity = '0';
+            setTimeout(() => {
+                chatWindow.style.display = 'none';
+            }, 300);
+            button.style.transform = 'rotate(0deg) scale(1)';
+
+            // Restaurar icono de chat
+            button.innerHTML = `
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                </svg>
+            `;
+        }
+    }
+
+    // Escuchar mensajes del iFrame (para notificaciones)
+    function setupMessageListener() {
+        window.addEventListener('message', (event) => {
+            // Validar origen (en producción debe ser estricto)
+            if (event.origin !== CONFIG.BASE_URL && !CONFIG.BASE_URL.includes('localhost')) {
+                return;
+            }
+
+            const data = event.data;
+
+            // Evento: Nuevo mensaje recibido
+            if (data.type === 'NEW_MESSAGE' && !widgetState.isOpen) {
+                const badge = document.getElementById('ticktur-widget-badge');
+                if (badge) {
+                    badge.style.display = 'flex';
+                    widgetState.hasUnreadMessages = true;
+                }
+            }
+
+            // Evento: Mensaje enviado
+            if (data.type === 'MESSAGE_SENT') {
+                showNotification('Mensaje enviado correctamente');
+            }
+
+            // Evento: Chat cerrado/resuelto
+            if (data.type === 'CHAT_ENDED') {
+                console.log('[Ticktur Widget] Conversación finalizada');
+            }
+
+            // Evento: Solicitud de cerrar widget
+            if (data.type === 'CLOSE_WIDGET') {
+                if (widgetState.isOpen) {
+                    toggleWidget();
+                }
+            }
+        });
+    }
+
+    // Manejar resize de la ventana
+    function handleResize() {
+        const chatWindow = document.getElementById('ticktur-widget-window');
+        if (!chatWindow) return;
+
+        if (window.innerWidth <= 768) {
+            chatWindow.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 0;
+                z-index: ${CONFIG.Z_INDEX};
+                ${widgetState.isOpen ? 'display: flex;' : 'display: none;'}
+            `;
+        } else {
+            chatWindow.style.cssText = `
+                position: fixed;
+                bottom: 100px;
+                right: 20px;
+                width: ${CONFIG.WIDGET_WIDTH};
+                height: ${CONFIG.WIDGET_HEIGHT};
+                background: white;
+                border-radius: 12px;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+                overflow: hidden;
+                z-index: ${CONFIG.Z_INDEX};
+                ${widgetState.isOpen ? 'display: flex;' : 'display: none;'}
+            `;
+        }
+    }
+
+    // WebSocket: Cargar dependencias y conectar
+    function initializeWebSocket() {
+        // Reverb usa Pusher JS como cliente
+        if (!window.Pusher) {
+            const pusherScript = document.createElement('script');
+            pusherScript.src = 'https://js.pusher.com/8.2.0/pusher.min.js';
+            pusherScript.onload = () => {
+                loadLaravelEcho();
+            };
+            pusherScript.onerror = () => {
+                console.warn('[Ticktur Widget] Error al cargar Pusher (cliente de Reverb)');
+            };
+            document.head.appendChild(pusherScript);
+        } else {
+            loadLaravelEcho();
+        }
+    }
+
+    // Cargar Laravel Echo
+    function loadLaravelEcho() {
+        if (!window.Echo) {
+            const echoScript = document.createElement('script');
+            echoScript.src = 'https://cdn.jsdelivr.net/npm/laravel-echo@1.15.3/dist/echo.iife.js';
+            echoScript.onload = () => {
+                setupEcho();
+            };
+            echoScript.onerror = () => {
+                console.error('[Ticktur Widget] Error al cargar Laravel Echo');
+            };
+            document.head.appendChild(echoScript);
+        } else {
+            setupEcho();
+        }
+    }
+
+    // Configurar Echo con Reverb (usa pusher como broadcaster)
+    function setupEcho() {
+        try {
+            const echo = new Echo({
+                broadcaster: 'pusher',
+                key: 'juunjgece3udni3rfg4j',
+                wsHost: '127.0.0.1',
+                wsPort: 8080,
+                wssPort: 8080,
+                forceTLS: false,
+                enabledTransports: ['ws', 'wss'],
+                disableStats: true,
+                cluster: '',
+                encrypted: false
+            });
+
+            console.log('[Ticktur Widget] WebSocket conectado');
+
+            // Suscribirse al canal público del widget
+            if (widgetData && widgetData.hash) {
+                try {
+                    echo.channel(`widget.${widgetData.hash}`)
+                        .listen('WidgetStatusChanged', (data) => {
+                            console.log('[Ticktur Widget] Estado actualizado:', data);
+                            if (!data.is_active) {
+                                showNotification('El chat ha sido desactivado');
+                                // Opcional: cerrar el widget
+                            }
+                        })
+                        .listen('WidgetMessageReceived', (data) => {
+                            console.log('[Ticktur Widget] Nuevo mensaje recibido:', data);
+                            showNotification('Nuevo mensaje');
+                        });
+
+                    console.log('[Ticktur Widget] Suscrito al canal: widget.' + widgetData.hash);
+                } catch (channelError) {
+                    console.warn('[Ticktur Widget] No se pudo suscribir al canal:', channelError);
+                }
+            }
+
+            // Guardar instancia para limpieza futura
+            window.tickturEcho = echo;
+        } catch (error) {
+            console.warn('[Ticktur Widget] WebSocket no disponible:', error.message);
+            console.log('[Ticktur Widget] El widget funcionará sin actualizaciones en tiempo real');
+        }
+    }
+
+    // Mostrar notificación visual
+    function showNotification(message) {
+        const badge = document.getElementById('ticktur-widget-badge');
+        if (badge && !widgetState.isOpen) {
+            badge.style.display = 'flex';
+            badge.textContent = '!';
+            widgetState.hasUnreadMessages = true;
+        }
+        console.log(`[Ticktur Widget] ${message}`);
+    }
+    // Actualizar información del widget en el HTML de la página
+    function updateWidgetInfo() {
+        if (!widgetData) return;
+
+        // Actualizar event ID
+        const eventIdElement = document.getElementById('ticktur-event-id');
+        if (eventIdElement) {
+            eventIdElement.textContent = widgetData.event_id || eventId;
+        }
+
+        // Actualizar estado del widget
+        const statusElements = document.querySelectorAll('[id^="ticktur-widget-status"]');
+        statusElements.forEach((element) => {
+            if (widgetData.is_active) {
+                element.textContent = 'Widget Activo';
+                element.style.color = '#10b981';
+            } else {
+                element.textContent = 'Widget Inactivo';
+                element.style.color = '#ef4444';
+            }
+        });
+
+        // Actualizar indicador visual de estado
+        const statusIndicators = document.querySelectorAll('.ticktur-status-indicator');
+        statusIndicators.forEach((indicator) => {
+            indicator.textContent = widgetData.is_active ? '✓' : '✕';
+            indicator.style.color = widgetData.is_active ? '#10b981' : '#ef4444';
+        });
+
+        console.log('[Ticktur Widget] Información actualizada en la página');
+    }
+    // Inicializar widget
+    async function initWidget() {
+        // Verificar que el DOM esté listo
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', initWidget);
+            return;
+        }
+
+        console.log('[Ticktur Widget] DOM listo, validando widget...');
+
+        // Validar widget antes de continuar
+        const isValid = await validateWidget();
+
+        if (!isValid) {
+            console.error('[Ticktur Widget] Widget no autorizado. Verifica:');
+            console.error('  1. Que el evento exista');
+            console.error('  2. Que el hash sea correcto');
+            console.error('  3. Que el widget esté activo (is_active = true)');
+            return;
+        }
+
+        console.log('[Ticktur Widget] Montando componentes...');
+
+        // Actualizar información en el HTML
+        updateWidgetInfo();
+
+        // Crear elementos
+        const container = createWidgetContainer();
+        const button = createFloatingButton();
+        const chatWindow = createChatWindow();
+
+        // Montar en el DOM
+        container.appendChild(button);
+        document.body.appendChild(container);
+        document.body.appendChild(chatWindow);
+
+        // Setup listeners
+        setupMessageListener();
+        window.addEventListener('resize', handleResize);
+
+        // Inicializar WebSocket
+        initializeWebSocket();
+
+        console.log('[Ticktur Widget] Widget inicializado correctamente');
+    }
+
+    // Limpieza al cerrar/recargar
+    window.addEventListener('beforeunload', () => {
+        if (window.tickturEcho) {
+            window.tickturEcho.disconnect();
+        }
+    });
+
+    // Auto-inicializar
+    initWidget();
+})();

package/src/index.js

@@ -0,0 +1,217 @@
+/**
+ * Ticktur Chat Widget - Entry Point
+ * Exporta función para inicialización programática
+ */
+
+class TickturWidget {
+    constructor(config = {}) {
+        this.config = {
+            eventId: config.eventId || null,
+            widgetHash: config.widgetHash || null,
+            baseUrl: config.baseUrl || 'http://localhost:5173',
+            buttonColor: config.buttonColor || '#10b981',
+            buttonHoverColor: config.buttonHoverColor || '#059669',
+            widgetWidth: config.widgetWidth || '400px',
+            widgetHeight: config.widgetHeight || '600px',
+            zIndex: config.zIndex || '9999',
+            ...config
+        };
+
+        this.widgetState = {
+            isOpen: false,
+            isMinimized: false,
+            hasUnreadMessages: false
+        };
+
+        this.elements = {};
+    }
+
+    /**
+     * Inicializa el widget
+     */
+    async init() {
+        if (!this.config.eventId || !this.config.widgetHash) {
+            throw new Error('[Ticktur Widget] eventId y widgetHash son obligatorios');
+        }
+
+        console.log('[Ticktur Widget] Inicializando...', this.config);
+
+        // Validar widget
+        const isValid = await this.validateWidget();
+        if (!isValid) {
+            throw new Error('[Ticktur Widget] Autorización denegada');
+        }
+
+        // Crear elementos del widget
+        this.createButton();
+        this.createWidgetContainer();
+        this.attachEventListeners();
+
+        console.log('[Ticktur Widget] Inicializado correctamente');
+    }
+
+    /**
+     * Valida el widget contra la API
+     */
+    async validateWidget() {
+        try {
+            const apiUrl = this.config.baseUrl.replace(':5173', ':8000');
+            const response = await fetch(`${apiUrl}/api/widgets/validate/${this.config.widgetHash}`);
+
+            if (!response.ok) {
+                console.error('[Ticktur Widget] Autorización denegada. Status:', response.status);
+                return false;
+            }
+
+            const data = await response.json();
+
+            if (!data.success) {
+                console.error('[Ticktur Widget] Widget no autorizado');
+                return false;
+            }
+
+            this.widgetData = data.data;
+            console.log('[Ticktur Widget] Widget autorizado:', this.widgetData.widget_name);
+            return true;
+        } catch (error) {
+            console.error('[Ticktur Widget] Error al validar:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Crea el botón flotante
+     */
+    createButton() {
+        const button = document.createElement('button');
+        button.id = 'ticktur-chat-button';
+        button.innerHTML = `
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+        `;
+
+        button.style.cssText = `
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background-color: ${this.config.buttonColor};
+            color: white;
+            border: none;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            z-index: ${this.config.zIndex};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        `;
+
+        button.onmouseover = () => {
+            button.style.backgroundColor = this.config.buttonHoverColor;
+            button.style.transform = 'scale(1.1)';
+        };
+
+        button.onmouseout = () => {
+            button.style.backgroundColor = this.config.buttonColor;
+            button.style.transform = 'scale(1)';
+        };
+
+        document.body.appendChild(button);
+        this.elements.button = button;
+    }
+
+    /**
+     * Crea el contenedor del widget
+     */
+    createWidgetContainer() {
+        const container = document.createElement('div');
+        container.id = 'ticktur-widget-container';
+        container.style.cssText = `
+            position: fixed;
+            bottom: 96px;
+            right: 24px;
+            width: ${this.config.widgetWidth};
+            height: ${this.config.widgetHeight};
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+            z-index: ${this.config.zIndex};
+            display: none;
+            overflow: hidden;
+        `;
+
+        const iframe = document.createElement('iframe');
+        iframe.src = `${this.config.baseUrl}/?eventId=${this.config.eventId}&hash=${this.config.widgetHash}`;
+        iframe.style.cssText = `
+            width: 100%;
+            height: 100%;
+            border: none;
+        `;
+
+        container.appendChild(iframe);
+        document.body.appendChild(container);
+        this.elements.container = container;
+        this.elements.iframe = iframe;
+    }
+
+    /**
+     * Adjunta event listeners
+     */
+    attachEventListeners() {
+        this.elements.button.addEventListener('click', () => {
+            this.toggle();
+        });
+    }
+
+    /**
+     * Alterna visibilidad del widget
+     */
+    toggle() {
+        this.widgetState.isOpen = !this.widgetState.isOpen;
+        this.elements.container.style.display = this.widgetState.isOpen ? 'block' : 'none';
+    }
+
+    /**
+     * Abre el widget
+     */
+    open() {
+        this.widgetState.isOpen = true;
+        this.elements.container.style.display = 'block';
+    }
+
+    /**
+     * Cierra el widget
+     */
+    close() {
+        this.widgetState.isOpen = false;
+        this.elements.container.style.display = 'none';
+    }
+
+    /**
+     * Destruye el widget
+     */
+    destroy() {
+        if (this.elements.button) {
+            this.elements.button.remove();
+        }
+        if (this.elements.container) {
+            this.elements.container.remove();
+        }
+        this.elements = {};
+        this.widgetState = { isOpen: false, isMinimized: false, hasUnreadMessages: false };
+    }
+}
+
+// Exportar para uso como módulo
+export default TickturWidget;
+
+// También exportar función helper
+export function createWidget(config) {
+    const widget = new TickturWidget(config);
+    widget.init();
+    return widget;
+}

package/types/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Configuración del widget de Ticktur
+ */
+export interface TickturWidgetConfig {
+    /** ID del evento (obligatorio) */
+    eventId: number | string;
+    /** Hash MD5 de autorización (obligatorio) */
+    widgetHash: string;
+    /** URL base de la API (default: http://localhost:5173) */
+    baseUrl?: string;
+    /** Color del botón (default: #10b981) */
+    buttonColor?: string;
+    /** Color del botón al hover (default: #059669) */
+    buttonHoverColor?: string;
+    /** Ancho del widget (default: 400px) */
+    widgetWidth?: string;
+    /** Alto del widget (default: 600px) */
+    widgetHeight?: string;
+    /** Z-index del widget (default: 9999) */
+    zIndex?: string;
+}
+
+/**
+ * Estado del widget
+ */
+export interface WidgetState {
+    isOpen: boolean;
+    isMinimized: boolean;
+    hasUnreadMessages: boolean;
+}
+
+/**
+ * Datos del widget validado
+ */
+export interface WidgetData {
+    widget_name: string;
+    event_id: number;
+    is_active: boolean;
+}
+
+/**
+ * Clase principal del widget de Ticktur
+ */
+export default class TickturWidget {
+    config: TickturWidgetConfig;
+    widgetState: WidgetState;
+    widgetData?: WidgetData;
+    elements: {
+        button?: HTMLButtonElement;
+        container?: HTMLDivElement;
+        iframe?: HTMLIFrameElement;
+    };
+
+    constructor(config: TickturWidgetConfig);
+
+    /**
+     * Inicializa el widget
+     */
+    init(): Promise<void>;
+
+    /**
+     * Valida el widget contra la API
+     */
+    validateWidget(): Promise<boolean>;
+
+    /**
+     * Abre el widget
+     */
+    open(): void;
+
+    /**
+     * Cierra el widget
+     */
+    close(): void;
+
+    /**
+     * Alterna la visibilidad del widget
+     */
+    toggle(): void;
+
+    /**
+     * Destruye el widget y limpia el DOM
+     */
+    destroy(): void;
+}
+
+/**
+ * Función helper para crear e inicializar el widget
+ */
+export function createWidget(config: TickturWidgetConfig): TickturWidget;