Style: Actualizar widget de chat a nuevo estilo flotante
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s

- 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
This commit is contained in:
2025-12-10 16:38:08 -06:00
parent cc62153393
commit b8541503f1

View File

@@ -8,11 +8,21 @@ export default defineNuxtPlugin(() => {
}
// Verificar que no exista ya
if (document.querySelector('chat-widget')) {
if (document.querySelector('.floating-widget')) {
return
}
// Crear el widget flotante
// 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')
@@ -20,21 +30,11 @@ export default defineNuxtPlugin(() => {
widget.setAttribute('user-id', 'whatsapp-user')
widget.setAttribute('title', 'Asistente WhatsApp')
// Estilo flotante en esquina inferior derecha
widget.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
width: 400px;
height: 600px;
max-height: 80vh;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
border-radius: 12px;
overflow: hidden;
`
// Aplicar color primario de WhatsApp via CSS variable
widget.style.setProperty('--chat-primary', '#25D366')
document.body.appendChild(widget)
container.appendChild(widget)
document.body.appendChild(container)
}
if (document.readyState === 'complete') {