Código del widget de chat con IA: añade un asistente de soporte a cualquier web
Copia una etiqueta script y pon en tu web un asistente de chat con IA que responde en tiempo real. Esta guía explica el código, sus opciones y qué revisar antes de publicarlo.
Publicado:
Un widget de chat con IA atiende a tus visitantes en la misma página que ya están leyendo. Con api14, toda la integración es una sola etiqueta script: diseñas el widget en el panel, copias el código y lo pegas en tu HTML. No hay SDK que instalar ni código de servidor que escribir.
Qué hace el widget de chat
El widget de chat es una pequeña ventana de conversación que transmite en tiempo real las respuestas del modelo que elijas. Sigue instrucciones privadas que tú escribes y que los visitantes nunca ven, así que puede actuar como agente de soporte, asistente de ventas o guía de tu documentación. Las respuestas admiten formato básico (párrafos, listas, negrita, código y enlaces), un botón Detener corta una respuesta larga y la conversación se conserva mientras el visitante navega entre páginas en la misma pestaña.
El código del widget
Cuando guardas un widget en Widgets, el editor muestra su código para insertar:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Coloca la etiqueta dentro de <body>, donde deba aparecer el chat. Dos atributos opcionales cambian dónde y cómo se muestra:
| Atributo | Qué hace |
|---|---|
data-target | Selector CSS del elemento en el que se mostrará, por ejemplo #support. |
data-height | Altura de un widget dentro de la página, por ejemplo 520px. El chat usa 480px por defecto. |
Si prefieres un lanzador en una esquina de la pantalla, elige la ubicación Botón flotante en el editor. El código no cambia.
Cuatro pasos para tener un asistente de chat activo
- Elige un modelo. Sirve cualquier modelo de chat del catálogo. El selector muestra el precio de cada modelo, así que puedes empezar con uno rápido y económico y cambiarlo más adelante sin tocar tu web.
- Elige una clave API. Cada widget funciona con una de tus claves API. Selecciona una clave existente o usa la última opción de la lista, Crear nueva clave API, para crear una solo para este widget. Los límites de la clave se aplican al widget, y la clave nunca llega al navegador.
- Escribe las instrucciones y los textos. Define el título, el mensaje de bienvenida, el texto del campo y el texto del botón. Añade instrucciones privadas que describan tu producto y el tono que buscas.
- Autoriza tus dominios. En Configuración, Sitios del widget, indica los sitios donde puede funcionar el widget. Se rechazan las solicitudes de cualquier otro sitio.
Por qué no rompe tu página
El widget se muestra dentro de un Shadow DOM aislado. Tu CSS no afecta a la ventana del chat y el widget no cambia los estilos de tu página. Se carga de forma asíncrona, así que no bloquea la visualización del resto de tu contenido.
Antes de publicarlo
- Abre la vista previa del editor y haz las preguntas que tus clientes hacen de verdad. La vista previa ejecuta realmente tu configuración sin guardar.
- Define un límite de gasto diario para el widget, para que un día con mucho tráfico no te dé sorpresas.
- Comprueba que tu saldo cubre el tráfico previsto. Las solicitudes de los visitantes se cobran de tu saldo en USD al precio normal del modelo.
¿Quieres probarlo? Diseña un widget de chat sin cuenta en la página de widgets y consulta la referencia completa en la documentación de widgets.