Files
whatsappNucleo/app/plugins/agents-widget.client.ts
josedario87 b8541503f1
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s
Style: Actualizar widget de chat a nuevo estilo flotante
- Usar contenedor .floating-widget como en la implementación de referencia
- El web component ahora maneja internamente el botón flotante y ventana de chat
- Aplicar color primario de WhatsApp (#25D366) via CSS variable --chat-primary
2025-12-10 16:38:08 -06:00

46 lines
1.4 KiB
TypeScript

export default defineNuxtPlugin(() => {
const createWidget = () => {
// Verificar que el custom element esté registrado
if (!customElements.get('chat-widget')) {
// Reintentar en 100ms si aún no está listo
setTimeout(createWidget, 100)
return
}
// Verificar que no exista ya
if (document.querySelector('.floating-widget')) {
return
}
// Crear contenedor flotante
const container = document.createElement('div')
container.className = 'floating-widget'
container.style.cssText = `
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
`
// Crear el widget
const widget = document.createElement('chat-widget')
widget.setAttribute('api-url', 'https://gamdias.nucleoriofrio.com')
widget.setAttribute('agent-id', '70b046fe-0665-46b3-b896-f3c89776999a')
widget.setAttribute('app-id', 'whatsapp-app')
widget.setAttribute('user-id', 'whatsapp-user')
widget.setAttribute('title', 'Asistente WhatsApp')
// Aplicar color primario de WhatsApp via CSS variable
widget.style.setProperty('--chat-primary', '#25D366')
container.appendChild(widget)
document.body.appendChild(container)
}
if (document.readyState === 'complete') {
setTimeout(createWidget, 100)
} else {
window.addEventListener('load', () => setTimeout(createWidget, 100))
}
})