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 (crear el canal y configurarlo); 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 y guardar la clave

1. Ve a Canales en el menú lateral.
2. Haz clic en Conectar canal.
3. Busca la tarjeta Web Chat dentro de la lista.
4. Escribe un nombre para distinguirlo (ej. «Chat de soporte», «Chat tienda online») y haz clic en Crear.

Apenas se crea, se abre una ventana que dice «Canal creado» con la clave del widget a la vista y un botón «Copiar clave». Cópiala en ese momento y guárdala donde guardas tus contraseñas: es la única vez que se muestra completa.

Si cierras esa ventana sin copiarla, la clave no se recupera. Se puede generar una nueva desde el canal, pero al hacerlo la anterior deja de funcionar al instante: cualquier sitio que la esté usando queda mudo hasta que actualices el código.

Apariencia

Entra al canal haciendo clic sobre él en la lista de Canales. Arriba a la derecha está el botón Guardar cambios: nada de lo que edites se guarda hasta que lo tocas. A la derecha ves una vista previa en vivo que se actualiza mientras editas y que te acompaña en todas las pestañas.

Ampliar

Esto es lo que puedes ajustar:

• Color primario — el color de la burbuja, del encabezado y del botón de enviar. Elige 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. Si lo dejas vacío, dice «Soporte».
• Mensaje de bienvenida — el saludo que aparece mientras la conversación está vacía. Si lo dejas vacío, dice «¡Hola! ¿En qué podemos ayudarte?».
• Mensaje fuera de línea — hoy este campo no se le muestra al visitante. El encabezado del chat siempre dice «En línea», haya alguien conectado o no, y al volver a entrar al canal el campo se ve vacío otra vez. Si necesitas avisar tus horarios, ponlo en el mensaje de bienvenida.
• Orígenes permitidos (CORS) — la lista de dominios donde autorizas el chat. Vacía (como queda un canal nuevo) funciona en cualquier sitio. Lo explicamos en Dominios permitidos.

La foto redonda del encabezado no se configura aquí: es el logo de tu empresa, el que subes en Ajustes → Organización. Si no tienes logo cargado, aparece un ícono genérico.

Preguntas predefinidas

Las preguntas predefinidas son botones de respuesta rápida que aparecen debajo del saludo. 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 presionas Enter o el botón Agregar (ej. «Ver precios», «Estado de mi pedido», «Hablar con un asesor»).
• Eliminar — clic en la X al lado de cada pregunta.

El orden es el orden en que las agregas. El ícono de puntitos que está a la izquierda de cada una es decorativo: no se arrastran. Si quieres cambiar el orden, borra las que sobran y vuelve a agregarlas en la secuencia que quieras. Todo se guarda con Guardar cambios, que reemplaza la lista completa por la que quedó en pantalla.

Cuando el visitante hace clic en una, el texto se envía como si lo hubiera escrito él: te llega a la bandeja como un mensaje normal y dispara automatizaciones igual que cualquier otro.

Qué ve el visitante

• Solo texto. Ni el visitante ni tú pueden mandar imágenes, audios o archivos por este canal. Si intentas adjuntar algo desde la bandeja, el envío falla. Las reacciones con emoji tampoco le llegan.
• No se le pide nombre ni correo. Entra a tu bandeja como «Visitante Web». Si necesitas el dato, pídeselo dentro de la conversación.
• Se le reconoce por navegador. Si vuelve en el mismo navegador, retoma su conversación y ve los últimos 50 mensajes, aunque hayan pasado días. Si entra desde otro dispositivo, otro navegador o en modo incógnito, para el sistema es un visitante nuevo con una conversación nueva.
• Cada respuesta va firmada. Dice «Agente» cuando contesta una persona de tu equipo y «Asistente IA» cuando contesta una automatización o un agente de IA.
• Cuando alguien responde a mano, el encabezado del visitante cambia a «Agente humano conectado». Vuelve al nombre de tu empresa cuando devuelves la conversación al bot desde la conversación.
• Ve el estado de sus mensajes con tildes: enviando, entregado y leído (cuando abres la conversación en la bandeja).
• El texto acepta formato: *negrita*, _cursiva_, ~tachado~, bloques de código y citas. Los enlaces que escribas se vuelven cliqueables.

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 dos están en la pestaña WordPress del canal: el Channel ID ya viene cargado con su botón de copiar, y la clave es la que guardaste al crear el canal (ahí se ve oculta, con solo los últimos 4 caracteres). Si la perdiste, en ese mismo lugar puedes regenerarla.
7. Marca Mostrar el web chat en mi sitio y haz clic en Guardar cambios.
8. Haz clic en Probar conexión — si todo está bien, aparece «Conexión exitosa».

El plugin necesita los dos datos: si falta el Channel ID o la clave, no muestra nada y no avisa en el sitio.

Cosas que el plugin te deja hacer

• Encender o apagar el chat con un interruptor, sin tocar código.
• Ocultarlo en el panel de administración de WordPress, en las páginas de login y registro, y en el carrito y el checkout de WooCommerce (la tienda online de WordPress).
• Excluir páginas puntuales escribiendo su ruta (/terminos) o su ID numérico, una por línea.
• Mostrarlo solo en páginas concretas: apagas la activación global y escribes [artificialic_webchat] en las páginas donde sí lo quieras.

Actualizaciones: el plugin no avisa cuando sale una versión nueva. Cuando publiquemos una, descargas el ZIP y lo subes igual que la primera vez; WordPress detecta que ya está instalado y te ofrece reemplazar la versión actual.

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 está el Código Embed: un fragmento de código (un snippet) con una línea de <script> que ya trae el ID del canal.

Ten en cuenta un detalle: ese bloque no muestra tu clave, porque el panel no la guarda en claro. En su lugar dice tu-api-key y el botón de copiar aparece deshabilitado con la leyenda «Regenera la API Key para copiar». Tienes dos caminos:

• Copiar el código a mano y reemplazar tu-api-key por la clave que guardaste cuando creaste el canal.
• Regenerar la clave ahí mismo: el bloque se completa solo y el botón Copiar código se habilita. Ojo, regenerar invalida la clave anterior y hay que actualizar todos los sitios que la usaban.

1. Copia el snippet con la clave real dentro.
2. Pégalo en el HTML del sitio, justo antes de la línea que cierra el body (</body>). Tiene que estar 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.

La clave del widget

La clave (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 completa una sola vez: en la ventana «Canal creado», con el botón Copiar clave.
• Después aparece enmascarada (puntos y los últimos 4 caracteres) en las pestañas Credenciales y WordPress. No hay forma de volver a verla entera.
• Si la perdiste, puedes regenerarla con el botón de las flechas circulares. La nueva queda a la vista para copiarla y la anterior deja de funcionar en el acto.
• Después de regenerar hay que actualizar el snippet del sitio (o los ajustes del plugin de WordPress) con la clave nueva. Mientras no lo hagas, ese sitio no conecta.

El código admite quedarse sin clave: si borras el atributo data-api-key, el chat conecta solo con el ID del canal y sigue funcionando. No lo recomendamos, porque en ese caso la lista de dominios permitidos deja de aplicarse a la conexión.

Dominios permitidos (CORS)

En la pestaña Apariencia hay un campo de orígenes permitidos: los dominios autorizados a usar tu chat, separados por comas. Por dentro esto se apoya en CORS, un mecanismo que traen todos los navegadores para controlar qué sitios pueden hablar con qué servidores.

• Vacío es el estado por defecto y funciona en cualquier sitio. Un canal recién creado no restringe nada: pegas el código donde quieras y el chat anda. No tienes que tocar este campo para salir a producción.
• Agregar dominios es lo que restringe. En cuanto la lista tiene uno, solo esos pueden usar el chat. Carga cada variante que uses de verdad: https://mitienda.com, https://www.mitienda.com.
• La restricción se aplica sobre la conexión solo cuando el código lleva la clave. Si el snippet quedó sin data-api-key, la conexión entra igual desde cualquier dominio.

¿Qué se ve cuando cargaste la lista y el dominio no coincide? El sitio no logra leer la configuración del widget, así que la burbuja aparece con los valores de fábrica —violeta, «Soporte», saludo genérico, sin preguntas predefinidas— y, si el código lleva la clave, la conexión se rechaza. Es un síntoma bastante reconocible.

Si el chat no funciona

Empieza por el síntoma, no por CORS. Casi siempre es la clave.

• No aparece ninguna burbuja. El script no cargó o le falta el ID del canal. En la consola del navegador (F12) vas a ver [WebChat Widget] data-channel-id es requerido.
• La burbuja aparece, el visitante escribe y el mensaje desaparece. La conexión fue rechazada. Las tres causas reales: el código quedó con el texto tu-api-key, la clave se regeneró y el sitio tiene la vieja, o el canal está desconectado. En la consola: [WebChat Widget] Error de conexión.
• El chat se ve con colores y nombre que no configuraste. No pudo leer la configuración. Pasa cuando cargaste dominios permitidos y el del sitio no está escrito exactamente igual (http contra https, con y sin www).
• Respondiste y el visitante no lo vio en el momento. Si su conexión estaba caída, el mensaje igual queda guardado y aparece la próxima vez que abra el chat en ese navegador. No hace falta reenviarlo.

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.

Todo el chat se dibuja aislado del resto de la página, así que no hereda los estilos de tu sitio ni se los pisa. Lo único que agregas a tu HTML es la línea del script.

Los mensajes del Web Chat se manejan exactamente igual que los de cualquier otro canal: se asignan solos según quién tenga acceso al canal, se pueden etiquetar, disparan automatizaciones y agentes de IA como los de WhatsApp, y quedan en el historial de la conversación.