Integración y ajustes del Chat integrado
Inline Chat
El chat integrado (<web-chat-agent-inline>) se renderiza dentro del diseño de tu página en lugar de flotar sobre ella. Utilízalo para un centro de ayuda, asesor de productos, portal interno o asistente a página completa.
Abre Panel → tu asistente → Canales → Chat integrado. El canal tiene su propio código de instalación, ajustes y vista previa en vivo. Puede funcionar en el mismo sitio que el widget de chat flotante con un título, contenido de bienvenida, altura, sugerencias y estilo diferentes.
Instalar el chat integrado
Despliega Mostrar detalles de instalación y copia el código prerrellenado. La estructura manual es:
<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Coloca el elemento exactamente donde deba aparecer el chat y carga el script una sola vez por página. El elemento ocupa todo su contenedor padre, por lo que tu diseño controla el ancho:
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Utiliza la versión copiada del panel para evitar errores tipográficos en el ID del chatbot. El panel de instalación también puede verificar si este asistente se está cargando en un dominio permitido.
Apariencia
| Setting | What it changes |
|---|---|
| Título | Encabezado en la pantalla de inicio. Déjalo vacío para ocultar el encabezado. |
| Color principal | Color de acento para los botones y los mensajes del visitante. |
| Familia de fuentes | Fuente del widget. Busca en Google Fonts o añade el nombre de una fuente personalizada. |
| Altura | Altura del contenedor de chat como una longitud CSS, como 600px, 80vh o 100%. |
| Mensaje de bienvenida | Contenido mostrado antes del primer mensaje del visitante. |
La vista previa en vivo se actualiza con estos ajustes. Enviar un mensaje en la vista previa utiliza el asistente real y consume la cuota habitual de mensajes.
Imágenes
Añade una Imagen de bienvenida opcional mediante subida o URL. Aparece en la pantalla de inicio encima del mensaje de bienvenida. Utiliza un logo o banner optimizado y revisa el resultado en el ancho de contenedor más estrecho utilizado en tu sitio.
Contenido y comportamiento
| Setting | What it changes |
|---|---|
| Mensaje de bienvenida | Introducción en texto enriquecido sobre el campo de entrada antes del primer mensaje. |
| Mostrar fuentes | Añade las referencias de las fuentes disponibles a las respuestas. |
| Etiquetado de IA bajo las respuestas del bot | Marca cada respuesta del asistente como generada por IA. Esto está siempre activo. |
| Traducción automática | Traduce las etiquetas de la interfaz al idioma detectado del visitante. |
| Carga de archivos | Permite a los visitantes adjuntar archivos cuando el plan lo permite. |
| Botones de sugerencia | Preguntas iniciales en la pantalla de inicio, también llamadas preguntas sugeridas o iniciadores de conversación. Cada elemento tiene un título visible y un mensaje enviado al asistente. Hasta 10 elementos. |
Los botones de sugerencia se pueden redactar con IA o añadir manualmente. Mantén una lista breve y utiliza preguntas que demuestren el conocimiento real del asistente.
Avanzado
| Setting | What it changes |
|---|---|
| Fuente de detección de idioma | Utiliza el idioma del navegador o el atributo <html lang> de la página para la traducción automática. |
| Ocultar marca | Elimina el enlace "Powered by" cuando el plan lo permite. |
| CSS personalizado | Inyecta CSS en el widget integrado utilizando los selectores estables documentados. |
El editor de CSS incluye ajustes predefinidos iniciales, una referencia de selectores estables, un contador de caracteres y vista previa en vivo. Consulta CSS personalizado.
Atributos de contexto opcionales
El elemento integrado acepta tracking-consent y context-data además de chatbot-id. Los datos de contexto pueden transferir información de sesión no confidencial desde la página que lo integra:
<web-chat-agent-inline
chatbot-id="YOUR_CHATBOT_ID"
context-data="Customer=Jane Doe;OrderID=A-1023"
></web-chat-agent-inline>
La IA puede utilizar estos valores en las respuestas y en las llamadas a herramientas aprobadas. No incluyas secretos, credenciales ni información a la que el visitante actual no esté autorizado a acceder en los atributos HTML. Consulta Session Context Data para ver los formatos, límites y el evento en tiempo de ejecución.
Flotante vs. integrado
| Widget de chat | Chat integrado | |
|---|---|---|
| Ubicación | Botón flotante fijo y superposición | Dentro del diseño de tu página |
| Elemento | <web-chat-agent> | <web-chat-agent-inline> |
| Script | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Bocadillo y activadores proactivos | Sí | No |
| Action Bar y formularios | Sí | No |
| Intervención por chat en vivo | Sí | No |
| Ajustes | Canales → Widget de chat | Canales → Chat integrado |
Probar antes de publicar
- Guarda los ajustes del chat integrado.
- Envía una pregunta fundamentada en la vista previa en vivo.
- Abre la página real y revisa la altura, el comportamiento de desplazamiento, la carga de fuentes, las fuentes y los botones de sugerencia.
- Prueba el contenedor móvil más pequeño.
- Si ambos tipos de widget están instalados, confirma que utilicen los ajustes independientes previstos.