Plugin de Chat Web con IA
Añade un chat inteligente a tu sitio web para atender visitantes automáticamente con la misma IA de WhatsApp.
¿Qué es el Plugin de Chat?
El plugin de chat permite añadir un asistente IA a cualquier página web. Los visitantes pueden chatear directamente con la IA sin necesidad de WhatsApp, y tú puedes atenderlos usando las mismas integraciones y funciones que ya tienes configuradas.
- • Respuestas automáticas con IA entrenada en tu negocio
- • Acceso a búsqueda de productos, clientes y funciones personalizadas
- • Soporte multiidioma con traducción automática
- • 10 temas de diseño personalizables
- • Modo flotante (botón en esquina) o embebido (dentro de un div)
Cómo activar el plugin
- Abre el Dashboard de WAzion
- En el menú lateral, haz clic en “Plugins“ → “Chat“
- Activa el interruptor “Plugin activo“
- Añade tu dominio en “Dominios Autorizados“ (ej: mitienda.com)
- Copia el código de integración y pégalo en tu web
Código de integración
Copia este código y pégalo antes de cerrar la etiqueta </body> de tu sitio web:
<!-- WAzion Chat Web --> <script> (function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/chat/embed.js'; js.dataset.token=t;d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI'); </script>
El token se genera automáticamente al activar el plugin. Lo encontrarás en la sección de configuración del chat.
Modo embebido (opcional)
Si prefieres insertar el chat dentro de un contenedor específico en lugar de como botón flotante, envuelve el código en un div:
<div id="mi-chat" style="height: 500px;">
<script>
(function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t};
var js=d.createElement(s);js.async=true;
js.src='https://www.wazion.com/plugins/chat/embed.js';
js.dataset.token=t;d.body.appendChild(js);
})(window,document,'script','TU_TOKEN_AQUI');
</script>
</div>
El chat se renderizará dentro del div contenedor en lugar de como botón flotante.
Guía de instalación en Shopify
Sigue estos pasos para añadir el chat a todas las páginas de tu tienda Shopify.
Accede al editor de temas
En tu panel de administración de Shopify:
- Ve a Tienda online en el menú lateral izquierdo
- Haz clic en Temas
- En tu tema actual, haz clic en el botón ... (tres puntos)
- Selecciona Editar código
Busca el archivo theme.liquid
En el panel lateral izquierdo del editor:
- Busca la carpeta Layout
- Haz clic en theme.liquid
Nota: theme.liquid es el archivo principal que carga en todas las páginas de tu tienda.
Localiza la etiqueta </body>
En el editor de código:
- Usa Ctrl+F (Windows) o Cmd+F (Mac) para buscar
- Escribe </body> y pulsa Enter
- Encontrarás la etiqueta cerca del final del archivo
Pega el código del chat
Pega el siguiente código JUSTO ANTES de </body>:
<!-- WAzion Chat Web --> <script> (function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/chat/embed.js'; js.dataset.token=t;d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI'); </script> <!-- /WAzion Chat Web --> </body>
Importante: Reemplaza TU_TOKEN_AQUI con el token que aparece en tu Dashboard de WAzion.
Guarda los cambios
Haz clic en el botón Guardar en la esquina superior derecha del editor.
Verifica la instalación
Visita tu tienda en una ventana de incógnito. Deberías ver el botón del chat en la esquina de la pantalla.
Método alternativo: Custom Pixels (Shopify Plus)
Si tienes Shopify Plus, puedes usar Custom Pixels:
- Ve a Configuración → Privacidad del cliente → Custom pixels
- Haz clic en Añadir custom pixel
- Dale un nombre (ej: “WAzion Chat“)
- En el campo de código, pega:
analytics.subscribe("page_viewed", (event) => {
if (window.WazionPlugin) return;
window.WazionPlugin = {token: 'TU_TOKEN_AQUI'};
const js = document.createElement('script');
js.async = true;
js.src = 'https://www.wazion.com/plugins/chat/embed.js';
js.dataset.token = 'TU_TOKEN_AQUI';
document.body.appendChild(js);
});
Guía de instalación en WordPress
Opción 1: Con plugin (recomendado)
Usa un plugin para insertar código en el footer:
- Instala el plugin Insert Headers and Footers (de WPCode) o similar
- Ve a Code Snippets → Header & Footer
- En la sección Footer, pega el código del chat:
<script src="https://www.wazion.com/plugins/chat/embed.js"
data-token="TU_TOKEN_AQUI"></script>
Guarda los cambios y el chat aparecerá en todas las páginas.
Opción 2: Editando functions.php
Aviso: Este método requiere conocimientos básicos de PHP. Haz una copia de seguridad antes.
- Ve a Apariencia → Editor de archivos del tema
- Selecciona functions.php en la lista de archivos
- Añade este código al final del archivo:
// WAzion Chat Web
function wazion_chat_script() {
echo '<script src="https://www.wazion.com/plugins/chat/embed.js"
data-token="TU_TOKEN_AQUI"></script>';
}
add_action('wp_footer', 'wazion_chat_script');
Guía para sitios HTML/otros
Para cualquier sitio web (HTML estático, React, Vue, Angular, etc.):
Estructura básica
Pega el código justo antes de </body> en tu archivo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<!-- Tu contenido aquí -->
<!-- WAzion Chat Web - Pegar AQUÍ, antes de </body> -->
<script src="https://www.wazion.com/plugins/chat/embed.js"
data-token="TU_TOKEN_AQUI"></script>
</body>
</html>
Para aplicaciones SPA (React, Vue, Angular)
Puedes cargar el script dinámicamente:
// En tu componente principal o App.js
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://www.wazion.com/plugins/chat/embed.js';
script.dataset.token = 'TU_TOKEN_AQUI';
script.async = true;
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
Solución de problemas
El chat no aparece
- → Verifica que el plugin está activado en el Dashboard
- → Comprueba que tu dominio está en la lista de dominios autorizados
- → Abre la consola del navegador (F12) y busca errores
- → Prueba en una ventana de incógnito para descartar caché
Error “Dominio no autorizado“
- → Añade tu dominio exacto a la lista de autorizados (sin http:// ni /)
- → Si usas www, añade tanto “midominio.com“ como “www.midominio.com“
- → Para desarrollo local, añade “localhost“ o usa “*“ temporalmente
El chat aparece pero no responde
- → Verifica que tienes créditos disponibles en tu cuenta
- → Comprueba que el token es correcto
- → Revisa si has alcanzado el límite de rate limiting
Opciones de configuración
Dominios Autorizados
Lista de dominios donde el chat puede funcionar. Por seguridad, solo se permite el uso desde dominios que hayas autorizado.
- • mitienda.com
- • *.mitienda.com (incluye subdominios)
- • * (cualquier dominio - solo para desarrollo)
Modo de Visualización
Flotante
Muestra un botón en la esquina de la página. Al hacer clic, se abre la ventana de chat.
Embebido
El chat se inserta dentro de un contenedor div en tu página, ideal para páginas de contacto.
Configuración del Botón Flotante
- • Posición: Abajo derecha, abajo izquierda, arriba derecha o arriba izquierda
- • Icono: 6 iconos disponibles (burbuja, mensaje, soporte, robot, etc.)
- • Colores: Color de fondo y color del icono personalizables
- • Tamaño: Pequeño (48px), Mediano (60px), Grande (72px)
- • Animación: Ninguna, pulso o rebote para llamar la atención
- • Tooltip: Texto que aparece al pasar el ratón sobre el botón
Temas de Diseño
10 temas prediseñados para adaptar el chat a tu marca:
Textos del Chat
Personaliza los textos que ve el visitante:
- • Título del chat (cabecera)
- • Mensaje de bienvenida
- • Placeholder del campo de texto
- • Texto del botón enviar
Los textos se traducen automáticamente al idioma del visitante.
Configuración de Idioma
Auto-detectar
Detecta el idioma del navegador del visitante automáticamente.
Idioma fijo
Siempre mostrar en un idioma específico (ej: solo español).
Con selector
Auto-detecta pero permite al visitante cambiar manualmente el idioma.
Comportamiento
- • Auto-abrir: Abre el chat automáticamente después de X segundos
- • Sonido: Reproducir sonido al recibir mensaje
- • Branding: Mostrar “Powered by WAzion“ en el chat
Rate Limiting (Límite de mensajes)
Protege tu cuenta de uso excesivo configurando límites por sesión:
- • Máximo de mensajes por ventana de tiempo (ej: 30 mensajes)
- • Ventana de tiempo en minutos (ej: 60 minutos)
Prompt del Chat
Puedes escribir instrucciones específicas para el chat web o sincronizar con tu prompt de WhatsApp:
-
•
Modificar con IA: Escribe instrucciones en lenguaje natural (ej: “añade horario de atención de 9 a 18h“) y la IA modificará tu prompt automáticamente. Verás un diff visual con los cambios: texto añadido en verde y eliminado en rojo.
-
•
Importar desde plantilla general: Copia tu prompt de WhatsApp al plugin con un clic.
-
•
Historial de versiones: Cada vez que guardas, se crea una versión. Puedes restaurar cualquier versión anterior.
Sincronización automática: Desde el Editor de Prompt, puedes marcar la opción “Al guardar, actualizar prompt del plugin web“. La IA adaptará automáticamente tu prompt eliminando referencias a WhatsApp.
CSS Personalizado
Para ajustes avanzados, puedes añadir CSS personalizado que se aplicará al chat.
Funciones de la IA en el Chat
La IA del chat tiene acceso a las mismas funciones que tu asistente de WhatsApp:
Búsqueda de Productos
La IA puede buscar productos de tu tienda y mostrar información.
Información de Clientes
Si tienes CRM o Shopify conectado, la IA accede a datos del cliente.
Búsqueda Web
Si está habilitado, la IA puede buscar información en internet.
Funciones Personalizadas
Tus funciones personalizadas (function calling) funcionan en el chat.
Estadísticas y Visor de Conversaciones
Métricas de uso
En el Dashboard puedes ver las métricas de uso del chat:
- • Conversaciones totales
- • Mensajes totales
- • Conversaciones en los últimos 7 días
- • Sesiones activas en las últimas 24 horas
Visor de Conversaciones
Revisa todas las conversaciones del chat con tus visitantes:
- • Filtro por período: Hoy, 7 días, 30 días, 90 días, 1 año, todas, o rango de fechas personalizado
- • Lista paginada: Navega por todas las conversaciones (10 por página)
- • Detalle completo: Haz clic en cualquier conversación para ver todos los mensajes
- • Información del visitante: Idioma, número de mensajes y página de origen
Abrir con mensaje predefinido
Puedes abrir el chat con un mensaje predefinido añadiendo el parámetro ?Message= a la URL:
https://mitienda.com/contacto?Message=Quiero información sobre el producto X
El chat se abrirá automáticamente y enviará el mensaje especificado.
