Style: Actualizar widget de chat a nuevo estilo flotante
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s
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:
@@ -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') {
|
||||
|
||||
Reference in New Issue
Block a user