Website Chat Widget

Embebe un chat widget impulsado por AI directamente en tu sitio web. Los visitantes obtienen respuestas instantáneas de tu AI agent sin salir de tu sitio.

Descripción General

El Website Widget ofrece:

Burbuja de chat flotante en tu sitio web
Respuestas de AI en streaming en tiempo real
Apariencia personalizable (colores, posición, mensajes)
Menos de 11KB en gzip — impacto casi nulo en el rendimiento
Lista de dominios permitidos para mayor seguridad

Requisitos Previos

Un AI agent activo en tu panel de administración
Acceso al HTML de tu sitio web (para pegar una etiqueta script)

Pasos de Configuración

Ve a Integrations desde la barra lateral
Desplázate hasta la sección Website Widget
Haz clic en Create Widget
Ingresa un nombre y selecciona el AI agent
Haz clic en Create

2. Personalizar la Apariencia

Haz clic en la tarjeta del widget para abrir el panel de edición:

Primary Color — Color de la burbuja del chat y del header
Text Color — Color del texto en la burbuja y en el header
Position — Bottom-right o bottom-left
Welcome Message — Primer mensaje que ven los visitantes
Suggested Questions — Hasta 4 iniciadores clicables
Avatar URL — Imagen personalizada en el header del chat
Border Radius — Redondeo de las esquinas

Una vista previa en vivo se actualiza a medida que haces cambios.

3. Establecer Dominios Permitidos (Recomendado)

Restringe qué sitios web pueden embeber tu widget:

Déjalo vacío para permitir todos los dominios (predeterminado)
Agrega dominios específicos: example.com, *.example.com
Usa entradas con puerto para desarrollo: localhost:3000

4. Embeber en tu Sitio Web

Haz clic en el ícono de embed en la tarjeta de tu widget y copia el código:


<script src="https://core-api.cuneiform.chat/api/widget/widget.js"
  data-widget-id="your-widget-id" async></script>

Pégalo antes de la etiqueta </body> en tu sitio web.

Cómo Funciona


El visitante abre tu sitio web
  → Aparece la burbuja de chat en la esquina
  → El visitante hace clic → Se abre el panel del chat
  → Se muestran el welcome message y las suggested questions
  → El visitante escribe una pregunta
  → El AI agent busca en tu contenido
  → La respuesta llega en streaming en tiempo real

Los mensajes se procesan en tiempo real. El agent busca en tu contenido y genera respuestas usando el mismo pipeline de AI que el resto de los canales.

Funcionalidades

Respuestas en Streaming

Las respuestas llegan en streaming en tiempo real mediante Server-Sent Events (SSE). Los visitantes ven la respuesta aparecer progresivamente, similar a ChatGPT.

Persistencia de Sesión

Los visitantes recurrentes en el mismo navegador retoman su conversación anterior dentro de una ventana de 24 horas. Las sesiones se almacenan en el localStorage del navegador.

Renderizado de Markdown

Las respuestas del agent admiten formato markdown, incluyendo negrita, cursiva, listas, bloques de código y enlaces.

Gestionar Widgets

En la página Integrations, cada tarjeta de widget muestra:

Nombre y estado del widget
Agent asignado
Acciones de editar, código de embed y eliminar

Acción	Cómo
Editar configuración	Haz clic en la tarjeta del widget
Obtener código de embed	Haz clic en el ícono de embed
Eliminar	Menú de tres puntos → Delete

Seguridad

Aislamiento por Shadow DOM — El widget está en sandbox respecto de tu página
HMAC session tokens — Tokens firmados con expiración de 24 horas
Lista de dominios permitidos — Restringe qué sitios pueden embeber tu widget
Rate limiting — 30 mensajes/minuto por sesión
Sin acceso a datos — El widget no puede leer ni modificar el contenido de tu página

Solución de Problemas

Verifica que la etiqueta script esté antes de </body>, no en <head>
Comprueba que data-widget-id coincida con el de tu panel de administración
Si la lista de dominios permitidos está configurada, verifica que tu dominio esté en ella
Revisa la consola del navegador en busca de errores

Asegúrate de que el agent asignado esté en estado Active
Verifica que el agent tenga documentos en su contenido
Revisa la pestaña Network del navegador en busca de solicitudes API fallidas

Problemas de apariencia

El widget usa aislamiento por Shadow DOM. El CSS de tu página no afectará al widget. Usa la vista previa en vivo del panel de edición para personalizar la apariencia.

FAQ

Sí. Usa el mismo código de embed en cada página. El widget comparte el estado de la sesión entre páginas del mismo dominio.

¿Funciona en móviles?

Sí. El widget es totalmente responsive y está optimizado para navegadores móviles.

¿Puedo quitar la insignia “Powered by”?

La insignia es obligatoria en los planes Trial y Starter. Actualiza a Plus o superior para quitarla.

¿Funciona con React/Next.js/Vue?

Sí. El widget se carga como un script independiente y funciona con cualquier framework, incluidas las single-page applications.

¿Cuál es el límite de longitud del mensaje?

4.000 caracteres por mensaje.