Widget de Chatbot
Un widget de chatbot es como un recepcionista amable sentado en la esquina de tu sitio web: los visitantes ven una pequena burbuja de chat, hacen clic y empiezan a hablar con tu agente sin salir de la pagina. No hay redireccion ni una aplicacion aparte que descargar; la conversacion ocurre ahi mismo, en tu sitio.
Image: Chatbot widget insertado en un sitio web
Antes de empezar
- Un agente completado en el Panel de Control de Agentes
- Un sitio web donde puedas agregar un pequeno fragmento de codigo (si usas un creador de sitios como Wix, Squarespace o Shopify, lo pegaras en una casilla de "codigo personalizado" o "insertar")
- La direccion web (dominio) de ese sitio, por ejemplo,
miempresa.com
Configurar el widget de chatbot
- Abre tu agente en el Panel de Control de Agentes
- Haz clic en el nodo Canales
- Selecciona Chatbot en la seccion Web
- Define tus dominios permitidos: las direcciones web que tienen permiso para mostrar tu widget (por ejemplo,
miempresa.com). Esta es tu lista de dominios permitidos: una lista corta de sitios aprobados, para que nadie mas pueda colocar tu chatbot en una pagina que tu no controlas. - Haz clic en Crear
- Copia la etiqueta script o la etiqueta iframe que se genera para ti
Una etiqueta script es un pequeno fragmento de codigo que pegas una sola vez en tu sitio: este se encarga de cargar la burbuja de chat. Un iframe es una ventana independiente que muestra el chat dentro de un area fija de tu pagina, como cuando insertas un video.
Insertar en tu sitio web
Agrega la etiqueta script al HTML de tu sitio web, justo antes de la etiqueta de cierre </body> (la linea que marca el final de tu pagina):
<script src="https://your-chatbot-script-url.js"></script>
O usa el iframe si prefieres ubicar el chat dentro de un lugar especifico de tu pagina en vez de como una burbuja flotante:
<iframe src="https://your-chatbot-iframe-url" width="400" height="600"></iframe>
Image: Copiando el codigo de insercion del chatbot
Personalizar la apariencia
El configurador del chatbot incluye una vista previa en vivo: el widget a la derecha de la pagina se actualiza en tiempo real mientras ajustas cualquier opcion a la izquierda. Lo que ves en la vista previa es exactamente lo que veran tus visitantes en tu sitio web.
Elegir un tema
El widget incluye tres temas visuales. Cada uno aplica un conjunto coordinado de colores, formas de las esquinas y estilo general: elige el que mejor se ajuste a tu marca.
| Tema | Estilo | Ideal para |
|---|---|---|
| Minimalista (predeterminado) | Encabezado de color solido, esquinas mas marcadas, tipografia limpia | Sitios profesionales, paneles de software, empresa a empresa |
| Vibrante | Banner con degradado suave de dos colores, burbujas de mensaje redondeadas | Productos para consumidores, marcas de estilo de vida, tono divertido |
| Elegante | Superficie oscura editorial con un acento crema, banner con degradado opcional | Marcas premium, sitios editoriales, aspecto sofisticado |
Image: Selector de tema y boton flotante en el configurador del chatbot
Al hacer clic en una tarjeta de tema, se aplica al instante, junto con sus colores predeterminados recomendados, a la vista previa en vivo. Puedes cambiar de tema en cualquier momento sin perder el resto de tus ajustes.
Asi se ve cada tema en el widget en vivo:
| Minimalista | Vibrante | Elegante |
|---|---|---|
 |  |  |
Personalizar colores
Cada tema comienza con valores predeterminados sensatos, pero puedes sobrescribirlos:
- Color de acento — Define el banner del encabezado y el boton de enviar. Es el color principal de la marca del widget.
- Color secundario — Agrega el segundo color para el degradado en los temas Vibrante y Elegante (el tema Minimalista usa un color solido y omite este campo).
Ambos campos usan un selector de color que acepta valores de color HEX, RGB y HSL. Elige de una paleta o pega el color exacto de tu marca.
Encabezado
Personaliza como se presenta tu agente:
| Campo | Descripcion |
|---|---|
| Nombre del asistente | Nombre destacado que se muestra en la parte superior del widget |
| Subtitulo del asistente | Linea mas pequena debajo del nombre (por ejemplo, "Asistente IA — normalmente responde en segundos") |
| Estilo del encabezado | Solido (un solo color de acento) o Gradiente (mezcla el acento con el secundario). Los temas Vibrante y Elegante usan gradiente por defecto. |
Boton lanzador
El boton lanzador es el boton flotante que los visitantes hacen clic para abrir el chat. Tiene tres opciones de estilo:
| Tipo de lanzador | Que se muestra |
|---|---|
| Imagen | La foto de perfil de tu agente (redondeada). Recomendado cuando el agente representa a una persona o mascota de marca. |
| Icono | Un icono limpio de burbuja de chat en tu color de acento. El estilo minimalista clasico. |
| Texto | Un boton tipo pildora con texto personalizado (configurado en el campo Etiqueta del lanzador, por ejemplo, "Chatea con nosotros", "¿Necesitas ayuda?"). |
Puedes ver una vista previa de las tres opciones de lanzador en la captura del configurador de apariencia mas arriba.
Pie de pagina
Texto pequeno opcional debajo del campo de chat. Util para enlaces de cumplimiento o una promocion discreta:
- Pie habilitado — Activa o desactiva todo el pie de pagina
- Texto del pie — Texto plano que se muestra antes del enlace (por ejemplo, "Desarrollado por")
- Enlace del pie — La direccion web a la que apunta el enlace
- Etiqueta del enlace — El texto visible del enlace (por ejemplo, "Tu Empresa")
Controles del widget
Muestra u oculta controles dentro del widget:
| Control | Que controla |
|---|---|
| Mostrar limpiar chat | El boton "limpiar conversacion" en el encabezado |
| Mostrar pantalla completa | El boton para expandir a pantalla completa en el encabezado |
| Permitir subir archivos | El boton de clip para adjuntar en la fila del campo de chat, que permite a los visitantes enviar archivos |
| Texto sugerido del campo | El texto en gris dentro del campo de mensaje (por ejemplo, "Preguntame lo que sea...") |
Botones de inicio rapido
Agrega algunas preguntas sugeridas que los visitantes pueden tocar apenas se abre el chat: perfecto para guiar la conversacion hacia tus solicitudes mas comunes:
- "¿En que me puedes ayudar?"
- "Muestrame los precios"
- "Hablar con un humano"
Aparecen como botones tematizados debajo del mensaje de bienvenida y desaparecen una vez que el visitante envia su primera respuesta. Cuando estan configurados, tienen prioridad sobre el primer mensaje independiente, asi que puedes usarlos para reemplazar la bienvenida predeterminada con una apertura mas interactiva.
Configura tu chatbot desde la pagina dedicada de Chatbot (bajo las exportaciones de tu agente) para tener la vista previa mas grande y mas espacio para iterar. El mismo configurador tambien se abre en un panel lateral dentro del flujo del agente, asi que puedes ajustar la apariencia sin salir del editor del agente.
Tipos de respuesta especiales
Mas alla de respuestas de texto comunes, el chatbot puede mostrar respuestas ricas e interactivas cuando tiene sentido. Activa cada tipo de respuesta desde la seccion Como responde el chatbot del configurador: cada una incluye una vista previa en vivo para que veas el resultado antes de activarla.
Image: Interruptores de respuestas especiales: tarjetas de producto, botones de opcion rapida y pausa cuando entra una persona
Tarjetas de producto
Cuando el agente quiere sugerir un producto o item especifico, puede enviar una tarjeta rica en lugar de texto plano. Cada tarjeta incluye una imagen, titulo, codigo de producto (SKU), descripcion corta, precio y un boton de accion.
Activa Tarjetas de producto en el configurador para que tu agente pueda enviar estas tarjetas. Usos comunes:
- Tiendas en linea recomendando productos
- Bots de bienes raices mostrando propiedades
- Catalogos de cursos y reservas
- Cualquier caso donde una imagen + precio + boton cuente la historia mejor que las palabras
El estilo de la tarjeta se adapta automaticamente al tema activo: esquinas mas marcadas en Minimalista, formas redondeadas suaves con etiquetas en Vibrante, diseno editorial oscuro en Elegante.
Botones de opcion rapida
En vez de pedirle al visitante que escriba, el agente puede mostrar una lista de botones clickeables. El visitante toca una opcion y la conversacion avanza, sin necesidad de escribir.
Activa Botones de opcion rapida para usos como:
- "¿Como te podemos ayudar?" → "Rastrear un pedido" · "Hablar con soporte" · "Ver productos"
- Flujos guiados de incorporacion
- Conversaciones tipo encuesta
- Cualquier menu con ramas
Esto reduce mucho la friccion en los telefonos y mejora las tasas de respuesta comparado con preguntas abiertas. Al igual que las tarjetas, el estilo de los botones se adapta al tema activo.
Pausar cuando entra una persona
Cuando alguien de tu equipo toma el control de una conversacion desde la Vista de Chat, normalmente quieres que el bot deje de responder para que no hable por encima de la persona. Activa Pausar cuando entra una persona para hacerlo automatico: apenas un miembro del equipo envia un mensaje en una conversacion, el agente se queda en silencio en esa conversacion hasta que lo vuelvas a activar.
Esta es la configuracion recomendada para el soporte que combina el bot con personas reales. Dejala desactivada solo si quieres especificamente que el bot siga respondiendo mientras un humano esta en la conversacion.
Que puede hacer tu agente
| Capacidad | Soportado |
|---|---|
| Responder a mensajes | ✓ |
| Enviar mensajes de texto | ✓ |
| Enviar imagenes | ✓ |
| Enviar archivos | ✓ |
| Enviar audio | ✓ |
Vista de Chat e intervencion humana
Al igual que los canales de plataforma Meta, el widget de chatbot incluye una Vista de Chat en el Panel de Control de Agentes donde puedes observar conversaciones y tomar el control del agente.
Image: Vista de Chat del Chatbot con interruptor del agente
Alternar la respuesta del agente
Cada conversacion tiene su propio interruptor:
| Modo | Que sucede |
|---|---|
| Auto (habilitado) | El agente responde automaticamente a los mensajes de los visitantes |
| Manual (deshabilitado) | El agente se pausa: tu respondes como humano |
Cuando estas en modo Manual:
- El agente deja de responder a la conversacion de ese visitante especifico
- Puedes escribir y enviar mensajes directamente
- Cambia de vuelta a Auto cuando estes listo para que el agente retome
Esto es util para el soporte en vivo, cuando una persona necesita atender una pregunta complicada mientras el agente se encarga de todo lo demas.
Configuracion de dominios
El widget solo se carga en las direcciones web que hayas aprobado: tu lista de dominios permitidos. Esto evita que sitios web no autorizados pongan tu chatbot en sus propias paginas.
- Agrega multiples dominios si tu sitio funciona en diferentes direcciones (por ejemplo,
miempresa.com,www.miempresa.com,app.miempresa.com) - Para pruebas, puedes agregar
localhost(el nombre que tu computadora usa para un sitio que corre en tu propia maquina) mientras desarrollas
Gestion de tu exportacion
- Editar: Actualiza los dominios permitidos o regenera el codigo de insercion
- Eliminar: Desactiva el widget. Dejara de cargarse en todos los sitios web inmediatamente.
Solucion de problemas
| Problema | Solucion |
|---|---|
| El widget no aparece | Verifica que la etiqueta script este colocada justo antes de </body> y que tu dominio este en la lista de permitidos |
| Aparece un mensaje sobre "CORS" u "origen bloqueado" | La direccion del sitio no esta en tu lista de permitidos. Agrega tu dominio exacto, incluyendo la parte https://, a los dominios permitidos |
| El widget aparece pero el agente no responde | Verifica que el interruptor de la conversacion este en Auto en la Vista de Chat |
| El widget carga lentamente | El script se carga en segundo plano y no deberia ralentizar tu pagina. Verifica tu conexion a internet |
| Funciona en tu sitio de prueba pero no en el sitio en vivo | Probablemente falta la direccion del sitio en vivo en la lista de permitidos. Agrega todas las direcciones que usa tu sitio (con y sin www.) |
Que sigue
Para comparar el widget con las otras formas de poner tu agente en la web (un enlace publico o una conexion para desarrolladores), consulta la Vision General de Canales. Para una conexion basada en codigo, continua con Acceso API.