Documentación
API
Tutoriales
Documentación / Canales / Webchat

Webchat

Aprende a instalar, configurar y personalizar el canal Webchat para tu sitio web, incluyendo flujos automáticos, apariencia y redirección a otros canales.
Contenido

El canal Webchat de WikiChat te permite agregar un chatbot a tu sitio web sin depender de otras plataformas, facilitando la atención y automatización directa en tu página.

Acceso y configuración

Para usar el widget de Webchat, primero crea un chatbot de tipo Omnicanal. Hazlo desde el botón “Configurar Omnicanal” y asígnale un nombre. Luego accede al widget desde el menú lateral.

Puedes crear un bot nuevo o convertir uno existente en Omnicanal. Desde ahí, encontrarás el Webchat Widget, listo para editar desde el icono de lápiz.

Personaliza tu Webchat

  • Burbuja de Chat: Elige el ícono y texto que prefieras para la burbuja flotante.
  • Botón de Conversación: Configura llamados a la acción (CTA) para iniciar o reiniciar chats.
  • Mensaje de Bienvenida/No disponible: Personaliza saludos y mensajes fuera de horario.
  • Formulario Pre-Chat: Captura datos antes de iniciar el chat. Añade campos (texto, email, etc.), define obligatorios y visualiza en tiempo real. Sólo disponible en modo flotante o popup.
  • Flujo de inicio por defecto: Si no usas pre-chat, selecciona aquí el flujo inicial.

Puedes saltar el botón de conversación para iniciar el chat automáticamente. Solo asegúrate que no haya otros canales seleccionados y que el flujo por defecto esté conectado.

Mensajes de saludo

Configura saludos diferentes para diferentes páginas, sólo para usuarios nuevos y sin formulario pre-chat activo. Elige en qué páginas mostrar el saludo y define nombre/emisor.

Opciones de configuración

  • Idioma: Cambia el idioma de la interfaz según tu público.
  • Sonido de notificaciones: Activa sonido personalizado para nuevos mensajes.
  • Funciones: Permite emojis, adjuntos, cerrar chat, popup, continuar en móvil con QR y el efecto de tipeo palabra por palabra.
  • Whitelist de dominio: Autoriza tu dominio para mostrar el widget (sólo un dominio raíz por Omnicanal).

Redirección a otros canales

Desde el Webchat, puedes habilitar redirección a WhatsApp, Messenger, Instagram y más. Activa los canales en la configuración y los usuarios podrán elegir su favorito antes de iniciar la conversación.

Apariencia y estilo

  • Tema: Elige entre diseños predefinidos (Estándar, WhatsApp, Messenger, etc.).
  • Fuente: Escoge entre múltiples tipografías.
  • Colores: Personaliza widget, burbujas, cabecera y botones.
  • Botón iniciar chat: Define el radio de esquinas para adaptar el botón a tu web.

Estilo de visualización

Escoge entre:

  • Flotante: Ícono de chat en la esquina.
  • Página completa o Embed: El chat ocupa todo o parte del sitio.
  • Modal Popup: Chat como ventana emergente.
  • Personalizable: Instala diferentes estilos en cada página si lo necesitas.

Coloca el código de instalación generado (según el estilo elegido) en el header de tu sitio.

Funciones avanzadas

Puedes establecer un ID de usuario personalizado desde tu sitio, usando una clave especial y un hash (SHA256 HMAC). Esto permite identificar visitantes, vincular perfiles o recuperar el historial de chat.

Añade el script de usuario en el header, con los valores generados desde tu backend. Así puedes pasar datos como nombre, email y valores personalizados a WikiChat:

<script>
window.addEventListener("chatbot:ready", function () {
 window.$chatbot.setUser("USERID", {
   name: "Nombre",
   email: "correo@ejemplo.com",
   identifier_hash: "HASH"
 });
});
</script>

Puedes pasar atributos personalizados agregando:

window.$chatbot.setCustomAttributes({
 user_fields: {
   campo1: "valor1",
   campo2: "valor2"
 }
});

Si un campo no existe en el flujo, créalo previamente en WikiChat.

Custom CSS

Personaliza completamente la apariencia usando selectores CSS específicos para el widget Webchat de WikiChat. Así puedes adaptar el widget a tu imagen de marca.

Instalaciones avanzadas

Puedes instalar diferentes estilos en cada página e iniciar distintos flujos usando parámetros en la URL del script. Usa el parámetro ref para lanzar un flujo particular o agregar datos directamente al perfil de contacto con payloads, ayudando en flujos de ventas, soporte, o segmentación.

¿Dudas frecuentes?

  • Puedes abrir el widget por defecto sin clic si omites otros canales y conectas el flujo inicial.
  • Puedes modificar el footer y otros elementos visuales mediante CSS.