/* Colores de la ventana del chat */
--chat--color-dark: #005EB8; /* Texto del encabezado en blanco */
--chat--color-light: #F2F2F2; /* Fondo general del chat en gris claro */
--chat--color-white: #FFFFFF; /* Ícono del chat cerrado en blanco */
/* Colores de los mensajes */
--chat--message--bot--background: #E0E0E0; /* Fondo de los mensajes del bot en gris medio */
--chat--message--bot--color: #000000; /* Texto del bot en negro */
--chat--message--user--background: #008000; /* Verde más vibrante para el usuario */
--chat--message--user--color: #FFFFFF; /* Texto del usuario en blanco */
/* Otros elementos */
--chat--color-secondary: #005EB8; /* Botón de enviar en el azul primario */
/* --- Bordes redondeados para los mensajes --- */
--chat--message--border-radius: 18px;
}
/* --- Mejoras Visuales Adicionales --- */
.n8n-chat-header {
background: linear-gradient(135deg, #005EB8, #00448F) !important;
border-radius: 16px 16px 0 0 !important;
}
.n8n-chat-window {
border-radius: 16px !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
border: none !important;
}
.n8n-chat-footer {
border-top: 1px solid #D0D0D0 !important;
padding: 12px !important;
}
.n8n-chat-input {
border-radius: 20px !important;
background-color: #FFFFFF !important;
border: 1px solid #D0D0D0 !important;
}
.n8n-chat-send-button svg { display: none; }
.n8n-chat-send-button {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-color: #005EB8 !important;
border-radius: 50% !important;
width: 36px !important;
height: 36px !important;
}
/* --- NUEVO: AÑADIR TEXTO "Hablemos" AL ICONO DEL CHAT --- */
/* Contenedor del ícono del chat (launcher) */
.n8n-chat-launcher {
position: relative; /* Necesario para posicionar el texto */
}
/* Estilo del texto "Hablemos" que aparecerá al lado */
.n8n-chat::after {
content: 'Hablemos';
position: absolute;
top: 50%;
right: 100%; /* Posiciona el texto a la izquierda del ícono */
transform: translateY(-50%);
margin-right: 15px; /* Espacio entre el texto y el ícono */
/* Estilos visuales del texto */
background-color: var(--chat--color-primary); /* Usa el color primario del chat */
color: var(--chat--color-white);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
white-space: nowrap; /* Evita que el texto se parta en dos líneas */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
/* Efecto de aparición y desaparición */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none; /* Evita que el texto interfiera con el clic */
}
/* Muestra el texto cuando el mouse está sobre el ícono */
.n8n-chat:hover::after {
opacity: 1;
visibility: visible;
}
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
createChat({ webhookUrl: 'https://automatizaciones-n8n.cf3yld.easypanel.host/webhook/d4f5bc34-610d-4500-ae8c-bd864c9669d0/chat', webhookConfig: { method: 'POST', headers: {} }, // Si no tienes un div con id="n8n-chat", el chat se añadirá al body. // Si lo tienes, descomenta la siguiente línea: // target: '#n8n-chat', mode: 'window', chatInputKey: 'chatInput', chatSessionKey: 'sessionId', metadata: {}, showWelcomeScreen: false, defaultLanguage: 'es', // Cambiado a 'es' para coherencia initialMessages: [ 'Hola!', 'Soy Sofía. ¿Cómo puedo ayudarte hoy?' ], i18n: { // Se usa 'es' porque lo definimos en 'defaultLanguage' es: { title: 'Bienvenid@', subtitle: "Estoy aquí para ayudarte 24/7.", footer: '', getStarted: 'Nueva conversación', inputPlaceholder: 'Escribe tu mensaje...' // Placeholder mejorado } } });