Web Chat

El Web Chat es una burbuja de chat que aparece flotando en una esquina de tu sitio web. Cuando alguien hace clic, se abre una ventana donde te puede escribir y tú respondes desde la misma bandeja donde están los mensajes de WhatsApp e Instagram.

La página está dividida en dos partes: la primera es para ti (configurar el chat); la segunda es para quien te ayude a pegar el código en tu sitio (puede ser un desarrollador, o tú mismo si tienes WordPress).

Para ti

Esta sección te explica todo lo que puedes configurar sin tocar código.

Crear el canal

1. Ve a Canales en el menú lateral.
2. Haz clic en Conectar canal y elige Web Chat.
3. Ponle un nombre para distinguirlo (ej. «Chat de soporte», «Chat tienda online»).
4. Haz clic en Crear.

Al crearlo, el sistema te genera una API Key (una contraseña secreta que identifica a tu chat). Aparece una sola vez: cópiala y guárdala en un lugar seguro. Si la pierdes, puedes generar una nueva, pero la anterior deja de funcionar.

Apariencia

En la pestaña Apariencia del canal personalizas cómo se ve la burbuja en tu sitio:

• Color principal — el color de la burbuja, el encabezado y el botón de enviar. Elegí uno que combine con tu marca.
• Posición — abajo a la derecha (lo más común) o abajo a la izquierda.
• Nombre de la empresa — el texto que ve el visitante arriba del chat (ej. tu marca).
• Mensaje de bienvenida — el primer mensaje que aparece cuando alguien abre el chat. Es como el saludo de la recepcionista. Algo así como «¡Hola! ¿En qué te ayudamos hoy?».
• Mensaje fuera de línea — qué texto aparece cuando no hay nadie del equipo conectado. Útil para decir «Te respondemos en menos de 2 horas».

Hay una vista previa en vivo a la derecha que te muestra cómo está quedando antes de guardar.

Preguntas predefinidas

Las preguntas predefinidas son botones de respuesta rápida que aparecen apenas el visitante abre el chat. Funcionan como ese cartel del restaurante que dice «¿Reserva, pedido o queja?» — guían a la persona hacia un tema en lugar de que tenga que pensar qué escribir.

En la pestaña Preguntas predefinidas puedes:

• Agregar — escribes el texto y le das Enter (ej. «Ver precios», «Estado de mi pedido», «Hablar con un asesor»).
• Reordenar — las arrastras para cambiar el orden en el que se muestran.
• Eliminar — clic en la X al lado de cada pregunta.

Cuando el visitante hace clic en una, el texto se envía como si lo hubiera escrito él. Eso te llega a la bandeja como un mensaje normal y puedes contestar (o un flujo lo puede tomar y responder solo).

Plugin de WordPress

Si tu sitio está hecho con WordPress (la plataforma más popular para crear sitios web), puedes instalar el chat sin tocar nada de código usando nuestro plugin oficial.

Pasos de instalación

1. Descarga el plugin con el botón de arriba.
2. Ve al panel de WordPress, Plugins → Añadir nuevo → Subir plugin.
3. Sube el archivo ZIP que descargaste y haz clic en Instalar ahora.
4. Una vez instalado, haz clic en Activar.
5. Ve a Ajustes → artificialic Web Chat.
6. Pega el Channel ID y la API Key (los obtienes de la pestaña Credenciales del canal).
7. Marca Mostrar el web chat en mi sitio y guarda.
8. Haz clic en Probar conexión — si todo está bien, te aparece un mensaje verde de éxito.

Cosas que el plugin te deja hacer

• Encender o apagar el chat con un clic, sin tocar código.
• Ocultar el chat en algunas páginas (panel admin, login, checkout de WooCommerce, URLs específicas).
• Mostrarlo solo en páginas concretas con el código [artificialic_webchat] en el editor.
• Detección automática de WooCommerce (la tienda online de WordPress).
• Actualizaciones: cuando saquemos una versión nueva, descargas el ZIP nuevo y lo reemplazas — WordPress lo detecta solo.

Para tu desarrollador

Esta sección está pensada para quien te haga el sitio (o para ti, si te animas). Si tu sitio es WordPress, no necesitas esta parte: usa el plugin de arriba.

Pegar el código en el sitio

En la pestaña Credenciales del canal aparece un fragmento de código que se llama snippet (un pedacito de código listo para copiar y pegar). Ese código tiene el ID del canal y la API Key.

1. Copia el snippet completo desde la pestaña Credenciales.
2. Pégalo en el HTML del sitio, justo antes de la línea que cierra el body (</body>). Tiene que ir en cada página donde quieras que se vea el chat.
3. Recarga el sitio y la burbuja debería aparecer en la esquina configurada.

Si tu sitio tiene un sistema de plantillas (Next.js, Astro, Hugo, lo que sea), normalmente basta con pegarlo en el layout principal y aparece en todas las páginas a la vez.

Orígenes permitidos (CORS)

En la pestaña Apariencia hay un campo de orígenes permitidos. Esto es una lista blanca de dominios autorizados a usar tu chat.

Piénsalo como la lista de invitados de una fiesta: solo entran los que están en la lista. Si no agregas tu dominio aquí, el navegador del visitante no va a permitirle conectarse al chat.

Por dentro, esto se llama CORS (Cross-Origin Resource Sharing) y es un mecanismo de seguridad que tienen todos los navegadores para que sitios maliciosos no puedan usar tus credenciales.

• Si dejas el campo vacío, cualquier sitio puede usar tu chat (no recomendado en producción).
• Lo correcto es poner solo tus dominios reales: https://mitienda.com, https://www.mitienda.com.

API Key

La API Key autentica la conexión entre tu sitio y nuestros servidores. Es como la llave de tu casa: no se la das a cualquiera y, si la pierdes, cambias la cerradura.

• Se muestra una sola vez al crear el canal.
• Si la pierdes, puedes regenerarla desde la pestaña Credenciales. Al hacerlo, la anterior deja de funcionar al instante.
• Después de regenerar, hay que actualizar el snippet del sitio con la nueva clave.

Cómo funciona por dentro

El widget se conecta a nuestros servidores usando WebSocket (vía Socket.IO). WebSocket es como una llamada telefónica abierta entre dos computadoras: en lugar de cortar y volver a llamar cada vez que hay un mensaje, la línea queda abierta y los mensajes pasan en tiempo real en ambas direcciones.

Eso significa que cuando un visitante envía un mensaje, te llega al instante a la bandeja, y cuando tú respondes, le aparece al instante al visitante — sin necesidad de recargar la página.

Los mensajes del Web Chat se manejan exactamente igual que los de cualquier otro canal: se pueden asignar, etiquetar, automatizar y revisar en el historial.