Instalar un chatbot en una web lleva cinco minutos: copias un fragmento de código y lo pegas antes del cierre de la página. Por eso hay tantas webs con un chat que saluda, no sabe nada del producto y acaba pidiendo un correo para «que te contacte el equipo».
En un SaaS el chat tiene dos sitios y dos públicos distintos: la web pública, donde pregunta quien todavía no es cliente, y la aplicación, donde pregunta quien ya paga. Hacerlo bien es tratarlos distinto.
La respuesta corta
Para añadir un chatbot con IA a la web de tu SaaS, conecta primero lo que tiene que saber (tu centro de ayuda, tu documentación y tu web), instala el fragmento de código en la web pública para los visitantes y, dentro de la aplicación, con la identidad del usuario verificada desde tu servidor, para que sepa quién es y pueda consultar su cuenta. Limita los dominios donde puede cargarse, pon dos o tres preguntas de inicio que respondan a lo que más se pregunta y deja claro qué pasa cuando no sabe: que lo diga y pase la conversación a una persona con el contexto.
Web pública y aplicación: dos chats distintos
| Web pública | Dentro de la aplicación | |
|---|---|---|
| Quién pregunta | Visitantes, personas evaluando el producto | Clientes con la sesión iniciada |
| Qué preguntan | Precios, funciones, integraciones, seguridad | Cómo se hace algo, su cuenta, errores |
| Qué sabe el chat de quien escribe | Nada, salvo lo que diga | Quién es, su empresa, su plan |
| Qué puede hacer | Responder con la web y la documentación | Además, consultar datos de su cuenta |
| Cuando no sabe | Pasar a ventas o a soporte | Pasar a soporte con el historial |
Si solo puedes hacer uno, empieza por dentro de la aplicación: es donde están los clientes que ya pagan y donde una respuesta rápida evita una baja. Más sobre esto, en soporte dentro de la app.
Paso 1: lo que tiene que saber
Antes de instalar nada, conecta las fuentes:
- El centro de ayuda, la fuente principal.
- La documentación técnica, si tienes API o integraciones.
- La web, para precios, planes y funciones.
- Respuestas que repite tu equipo y no están escritas en ningún sitio.
Y prueba con preguntas reales antes de enseñárselo a nadie. Si tu documentación es corta o está desordenada, el chat responderá igual de corto o desordenado: preparar la documentación para un agente de IA.
Paso 2: instalarlo en la web pública
- Pega el fragmento antes del cierre de
</body>en las páginas donde quieras el chat. Si tu web es un WordPress o un Webflow, se hace desde el apartado de código personalizado del pie; en una web hecha a medida, en la plantilla común. - Limita los dominios donde puede cargarse, para que nadie copie el fragmento en otra web.
- Ajusta el saludo a lo que busca un visitante: «¿Tienes dudas sobre planes o integraciones?».
- Pon tres preguntas de inicio con lo que más se pregunta antes de comprar.
Paso 3: instalarlo dentro de la aplicación
Aquí está la diferencia importante: dentro de la aplicación el chat debe saber quién es el usuario, y no basta con pasarle su correo desde el navegador, porque cualquiera podría escribir otro.
- Tu servidor calcula una firma con el identificador del usuario y una clave secreta que solo conoce tu servidor.
- La aplicación pasa al chat el identificador, el nombre, el correo y esa firma.
- El chat comprueba la firma antes de fiarse de los datos. Si no coincide, no los da por verificados.
Con la identidad verificada, la conversación sigue al usuario en todos sus dispositivos y el agente puede consultar su cuenta con seguridad. Si tu aplicación es de una sola página (React, Angular, Vue), carga el chat una vez, al iniciar sesión, y no en cada cambio de pantalla.
Paso 4: qué pasa cuando no sabe
Es lo que distingue un chat útil de uno que molesta:
- Si no encuentra la respuesta, que lo diga, no que invente.
- Si el cliente pide hablar con alguien, que pase sin dar vueltas.
- Fuera de horario, que avise de cuándo responde el equipo y deje la conversación en la bandeja.
- Al pasar, que la persona reciba el historial y lo que ya se intentó.
Las reglas, en reglas de escalado para un agente de IA.
Errores habituales
- Un chat que solo pide el correo: eso es un formulario, no un chat.
- El mismo saludo en la web y en la aplicación, cuando quien pregunta es distinto.
- Identificar al cliente por un correo sin verificar.
- Taparlo todo: que el botón no cubra el botón de guardar de tu aplicación ni el aviso de cookies.
- No mirar qué preguntan: las conversaciones del primer mes son la mejor lista de lo que falta en tu documentación.
Cómo lo hace Intake
El widget de Intake se instala con un fragmento para visitantes y otro para usuarios con sesión, con verificación de identidad firmada desde tu servidor y lista de dominios permitidos. Tiene pestaña de inicio con saludo y hasta tres preguntas de inicio, la conversación con el agente y una pestaña de ayuda para buscar en los artículos del centro de ayuda. El agente responde con tu documentación, consulta tu API si conectas acciones y, cuando hace falta, pasa la conversación a la bandeja con el contexto. Lo tienes en mensajes de Intake.
Preguntas frecuentes
¿Cómo pongo un chatbot con IA en mi web?
Conecta las fuentes que debe usar (centro de ayuda, documentación, web), copia el fragmento de código y pégalo antes del cierre de </body> en las páginas donde quieras el chat.
¿Funciona en WordPress?
Sí. Se pega el fragmento en el apartado de código personalizado del pie, o con un complemento para añadir código al pie de todas las páginas.
¿Cómo sabe el chat quién es el usuario de mi aplicación?
Tu servidor firma el identificador del usuario con una clave secreta y la aplicación pasa esa firma al chat. Sin una firma válida, sus datos no se dan por verificados.
¿Debo poner el mismo chat en la web y en la aplicación?
El mismo chat puede estar en los dos sitios, pero con saludo y preguntas de inicio distintos, y solo dentro de la aplicación con la identidad verificada.
¿Qué pasa si el chatbot no sabe la respuesta?
Debe decirlo y pasar la conversación a una persona con el historial. Un chat que inventa o que solo pide el correo hace más daño que no tener chat.
