Canales
Widget de Chatbot
Inserta un widget de chatbot de IA en tu sitio web con una etiqueta script o iframe
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.
El chat se abre en una pantalla de Inicio con tus accesos directos, y una pestaña Conversaciones donde cada visitante encuentra sus chats anteriores, como la ventana de ayuda de una app moderna.
Antes de empezar
- Un agente guardado en el constructor 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 constructor (Editar en el centro de Agentes)
- Elige Canales en el menú de la izquierda
- Selecciona Chatbot en el grupo Canales Externos de Nirvai
- 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
Una vez creado el chatbot, su página muestra ambos códigos lado a lado. Copia el que quieras y pégalo en tu sitio: el widget flotante va en el <head> de tu página, y el chat integrado va justo donde quieras que aparezca la ventana de chat:
No tienes que cambiar nada. El código que pegaste sigue funcionando y carga automáticamente la versión más reciente del widget.
Abrir el chat desde tu propio botón
Con el widget flotante en tu página, cualquier botón o enlace de tu sitio puede abrir el chat: un botón "Habla con nosotros" en el encabezado, un enlace "¿Dudas? Escríbenos" bajo un producto. Agrégale el atributo data-nirvai-chat; prueba el botón de abajo:
<button data-nirvai-chat>Habla con nosotros</button>| Atributo | Qué hace al hacer clic |
|---|---|
data-nirvai-chat | Abre el chat (si ya está abierto, sigue abierto) |
data-nirvai-chat="toggle" | Lo abre, o lo cierra si está abierto |
data-nirvai-chat="close" | Lo cierra |
En un creador de sitios (Wix, Shopify, WordPress…), busca la opción de atributos personalizados o atributos HTML del botón y agrega ahí data-nirvai-chat: no necesitas código. También encontrarás este fragmento, listo para copiar, en la página del chatbot en Nirvai, debajo de los códigos para insertar.
El mismo script agrega window.NirvaiChat a tu página: NirvaiChat.open(), NirvaiChat.close(), NirvaiChat.toggle() y NirvaiChat.isOpen(). Las llamadas hechas antes de que el chat termine de cargar se ejecutan apenas esté listo, y se emite el evento nirvai-chat:ready en document cuando ya se puede abrir:
<script>
document.addEventListener('nirvai-chat:ready', () => {
// por ejemplo, abrir el chat en la página de precios
if (location.pathname === '/precios') NirvaiChat.open();
});
</script>
Esto funciona solo con el widget flotante: el chat integrado (iframe) siempre está abierto donde lo pusiste.
Lo que ven los visitantes
| Pestaña | Qué hay |
|---|---|
| Inicio | Tu saludo, un botón Nueva conversación, una tarjeta Continuar conversación para quienes vuelven, tus tarjetas de acceso directo y tus enlaces |
| Conversaciones | Todas las conversaciones que este visitante tuvo con tu agente, primero la del último mensaje, cada una con el nombre de su tema (por ejemplo "Cotización seguro de hogar") |
- Un visitante puede tener varias conversaciones. Empezar una nueva nunca borra la anterior: queda en Conversaciones.
- Las conversaciones se recuerdan en el navegador del visitante hasta que borre sus datos de navegación. Otro navegador, otro teléfono o una ventana privada empiezan de cero.
- Dentro de una conversación, los mensajes se agrupan por día (Hoy, Ayer, el día de la semana o la fecha) y muestran su hora. Un mensaje en camino dice Enviando…; si se corta la conexión dice No se envió · Reintentar, y con un toque se envía de nuevo.
- Si activas el formulario de contacto, los visitantes nuevos lo ven en Inicio antes de su primer chat.
Personalizar la apariencia
El configurador del chatbot incluye una vista previa en vivo: el widget real, a la derecha de la página, se actualiza mientras ajustas cualquier opción a la izquierda. Cámbiala entre Inicio, Conversaciones y Chat para revisar cada pantalla con conversaciones de ejemplo. Con el formulario de contacto activado, una pestaña Formulario muestra Inicio como lo ve un visitante nuevo (con el formulario), e Inicio lo muestra después de enviarlo.
Los ajustes están en este orden: Apariencia (tema, colores, encabezado, botón lanzador), Dominios permitidos, Formulario de contacto, Inicio, Dentro de una conversación (mensaje de bienvenida, respuestas rápidas, controles del widget), Tipos de respuesta, Pie de página y Mensaje de seguimiento. El botón Guardar queda abajo de los ajustes mientras te desplazas.
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 |
Apariencia del chat
Elige un estilo, ajusta el color y decide qué piezas se muestran cuando alguien abre el chat en tu sitio.
Cada estilo cambia la forma de las burbujas, los botones y la cabecera.
Es el color que se ve en la parte de arriba del chat y en los botones.
Es lo único que ve el visitante hasta que hace clic. Elige cómo debe verse.
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:
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.
Pantalla de inicio
La sección Inicio define lo primero que ven los visitantes; la vista previa se actualiza mientras la completas:
| Ajuste | Qué hace |
|---|---|
| Saludo | La frase grande de bienvenida, por ejemplo "Hola 👋 ¿Cómo te podemos ayudar?" |
| Tarjeta Continuar conversación | Permite a quien vuelve retomar su último chat con un toque. Activada por defecto |
| Tarjetas de acción (hasta 4) | Cada tarjeta inicia una conversación con el mensaje que elijas ("Quiero cotizar un seguro de hogar") o abre una página de tu sitio |
| Enlaces (hasta 6) | Botones que abren una página en otra pestaña: tu sitio, preguntas frecuentes, precios |
Las tarjetas y los enlaces llevan un ícono del mismo selector que Bases de datos: un emoji, un ícono o una imagen que subiste.
Foto de cabecera
Agrega una foto de cabecera en lugar de la franja de color arriba de Inicio: la fachada de tu tienda, tu equipo, tu producto. Tu saludo se escribe sobre la parte de abajo de la foto, que se oscurece un poco para que el texto se lea bien.
- Tamaño recomendado: 1200 × 600 px (el doble de ancho que de alto)
- Formatos: PNG, JPEG o WebP, hasta 2 MB
- Cómo llena el espacio: la foto siempre cubre toda la franja. Si la tuya tiene otra forma, la configuración te dice qué se va a cortar: Se cortarán los lados, Se cortará arriba y abajo, o Muy pequeña: se verá borrosa (menos de 720 × 360 px)
Elige una foto tranquila con lo importante al centro: el saludo cubre la parte de abajo y las tarjetas de acceso directo tapan sus últimos píxeles.
Las fotos que subes son públicas, como cualquier imagen de un sitio web, así que no uses una que muestre información privada.
Formulario de contacto
Pide los datos del visitante antes de su primer chat. Lo completa una sola vez, en Inicio; tú ves las respuestas en tu bandeja y tu agente lo saluda por su nombre.
Actívalo en la sección Formulario de contacto y elige:
| Ajuste | Qué hace |
|---|---|
| Campos | Nombre, Apellido, Correo y Teléfono. Activa o desactiva cada uno y márcalo como Obligatorio o no. El formulario necesita al menos un campo |
| País que aparece primero | El país con el que parte el campo de teléfono (el visitante puede elegir otro) |
| Casilla de consentimiento | Una casilla que el visitante debe marcar para empezar, con tu texto (por ejemplo "Acepto recibir mensajes de Tu Empresa sobre mi consulta"). Nirvai guarda el texto exacto que aceptó y cuándo |
| Política de privacidad y términos | Dos enlaces bajo el formulario. Cada uno abre una página de tu sitio (su dirección https://) o un PDF que subes, de hasta 10 MB. Deja la dirección vacía para ocultar un enlace |
| Texto del botón | El botón para empezar, por ejemplo "Iniciar chat" |
| Saludo sobre el formulario | La frase grande de Inicio mientras se muestra el formulario, por ejemplo "¡Hola! Para poder ayudarte necesitamos tus datos" |
| Foto de cabecera mientras se muestra el formulario | Opcional. Déjala vacía para usar la foto de Inicio |
Usar el nombre del visitante. Escribe {nombre} en el Saludo de Inicio o en el mensaje de bienvenida (por ejemplo Hola {nombre} 👋) y se convierte en el nombre del visitante cuando envía el formulario. Si el visitante no dio su nombre, ve el saludo sin él.
Sobre los PDF que subes. Nirvai guarda el archivo por ti y le da un enlace público corto, así que cualquiera con el enlace puede abrirlo, igual que una política publicada en tu sitio web. El enlace no muestra el nombre de tu archivo ni nada de tu cuenta. Si reemplazas un PDF, recibe un enlace nuevo; si lo quitas del formulario, el enlace deja de mostrarse a los visitantes.
Qué pasa después:
- El formulario aparece una vez por navegador. Después, el chat dice Continuando como María con la opción Empezar de nuevo: empezar de nuevo borra los datos y lo trata como un visitante nuevo, formulario incluido.
- Tu agente recibe los datos y saluda al visitante por su nombre; no se los vuelve a pedir.
- En tu bandeja el visitante aparece con su nombre completo (o su correo o teléfono si es lo único que dio), y un chip Contacto muestra su correo, su teléfono y el consentimiento que aceptó.
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 probar las tres opciones de lanzador en la tarjeta de apariencia de arriba: haz clic en una para cambiar.
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 |
|---|---|
| Iniciar una conversación nueva | El botón + del encabezado del chat. Abre una conversación nueva; la anterior queda en Conversaciones |
| 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 documentos, hojas de calculo, imagenes y archivos de audio (ver Enviar audios y 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.
Nombres y títulos en tu bandeja
Tu agente mantiene tu bandeja fácil de leer por su cuenta; no tienes que activar nada. Los visitantes aparecen como Visitante #… hasta que dicen quiénes son (su nombre, o su correo si es lo único que dieron); cuando el tema está claro, la conversación recibe un título corto:
Nunca pide datos personales solo para completarlos. Siempre puedes cambiarle el nombre a un visitante desde la bandeja.
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.
Cómo responde el chatbot
Activa las respuestas especiales que puede usar tu bot. Cada una te muestra debajo cómo se ve.
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 conversación, 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.
Enviar audios y archivos
Los visitantes no estan limitados a escribir: la fila del campo de chat del widget funciona como una app de mensajeria moderna:
- Notas de voz. Al tocar el microfono, el visitante graba su voz y esta se convierte en texto directamente en el campo de mensaje, como dictar un mensaje de texto. El visitante puede leer y editar las palabras antes de enviar, asi que nada sale sin revisar.
- Archivos adjuntos. El clip permite adjuntar documentos (PDF, Word, texto), hojas de calculo (Excel, CSV), imagenes (JPG, PNG) y archivos de audio (MP3, WAV), de hasta 25 MB cada uno. Cuando un visitante envia un archivo de audio, tu agente recibe automaticamente una version escrita de lo que se dijo, asi que puede responder preguntas sobre la grabacion como con cualquier otro mensaje.
- Varios archivos a la vez. Los visitantes pueden adjuntar varios archivos en un solo mensaje (por ejemplo, una nota de voz mas una factura) y el agente los lee todos juntos.
Los archivos adjuntos (incluidos los de audio) aparecen solo cuando Permitir subir archivos esta activado en los controles del widget. Las notas de voz son parte del campo de mensaje.
Que puede hacer tu agente
| Capacidad | Soportado |
|---|---|
| Responder a mensajes | ✓ |
| Leer archivos, imágenes y audios que envían los visitantes | ✓ |
| Enviar texto, botones de opción rápida y tarjetas de producto | ✓ |
| Enviar archivos o imágenes | — solo tú, desde la vista de conversación (Responder tú mismo) |
Conversaciones e intervención humana
Al igual que los canales de plataforma Meta, el widget de chatbot incluye una vista de conversación (llega a tus conversaciones desde la Bandeja de entrada del centro de Agentes) donde puedes observar conversaciones y tomar el control del agente.
El agente responde solo. Lo que escribas aquí se envía como tú.
Alternar la respuesta del agente
Cada conversación tiene su propio interruptor en la esquina superior derecha; pruébalo arriba:
| Interruptor | Qué sucede |
|---|---|
| Responde el agente (activado) | El agente contesta solo los mensajes del visitante. Lo que escribas se envía como tú. |
| Respuestas manuales (desactivado) | El agente se pausa en esta conversación: un aviso amarillo te lo recuerda, y las respuestas son tuyas hasta que hagas clic en Reanudar agente. |
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.
Una fila por persona
Un visitante con varias conversaciones aparece una sola vez en la lista, con N conversaciones. El botón bajo su nombre muestra el tema de la conversación abierta: haz clic para verlas todas por día (con un buscador cuando son muchas). El lápiz renombra al visitante en todas. Pruébalo:
Responder tú mismo
Tus respuestas pueden llevar archivos, botones y tarjetas de producto; los visitantes los ven marcados como Operador:
- Archivos e imágenes: el 📎, arrastrar y soltar, o pegar. JPG, PNG, PDF, Word, Excel, CSV, texto, MP3 y WAV, hasta 20 MB cada uno; lo que escribas va como descripción.
- Botones o una tarjeta de producto: el + abre un pequeño formulario con vista previa.
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 esté en la página (en el <head>) y que tu dominio esté 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 conversación muestre Responde el agente en la vista de conversación |
| 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.) |
| Un visitante perdió sus conversaciones anteriores | Borró los datos de su navegador, o volvió desde otro navegador, teléfono o ventana privada: cada uno de esos empieza de cero |
| La bandeja muestra "Visitante #…" | El visitante todavía no dijo quién es; tu agente lo nombra apenas lo diga. También puedes renombrarlo con el lápiz, o activar el formulario de contacto para pedir su nombre al inicio |
| La foto de cabecera se ve cortada o borrosa | Usa una foto de 1200 × 600 px. La configuración te dice qué bordes se cortarán o si la foto es muy pequeña |
| Un visitante que vuelve ve otra vez el formulario | Borró sus datos de navegación, volvió desde otro navegador o teléfono, o tocó Empezar de nuevo: cada uno de esos empieza como un visitante nuevo |
| No abre el enlace de privacidad o términos | Revisa que la dirección empiece con https://, o vuelve a subir el PDF desde la sección Formulario de contacto y guarda |
Que sigue
- WhatsApp — pon a tu agente en el número de teléfono de tu negocio.
- Acceso API — conecta tu propio sitio o app mediante código.