Interfaz de chatbot: 5 ejemplos y buenas prácticas

La interfaz de un chatbot (chatbot UI) es todo lo que una persona ve y toca mientras habla con un bot: la ventana del chat, el nombre y la foto en la parte superior, los mensajes, el ritmo de las respuestas y la forma de llegar a una persona. Si está bien hecha, la gente sigue escribiendo. Si no, cierra la ventana después de la primera respuesta.

Las expectativas son altas. En el informe CX Trends 2026 de Zendesk, el 74 % de los consumidores dice que, gracias a la IA, ahora espera atención al cliente disponible 24/7. Una buena interfaz de chatbot es la forma de cumplir con eso sin que la gente sienta que está llenando un formulario.

Esta guía cubre:

1. Qué es hoy la interfaz de un chatbot, en un sitio web y en apps de mensajería
2. Los elementos clave de la interfaz de un chatbot
3. Cómo configurar la interfaz de tu chatbot en Chatfuel
4. Qué te deja mostrar cada canal
5. Buenas prácticas de diseño, herramientas y formas de probarla
6. 5 ejemplos de interfaz de chatbot de Chatfuel, Bank of America, Replika, Lark y Duolingo

Qué es la interfaz de un chatbot

La interfaz de usuario de un chatbot es la capa visual y conversacional entre una persona y un bot. Define cómo se ve el bot, cómo habla y qué tan fácil es obtener una respuesta.

Hay dos casos muy distintos:

• Tu propio widget de chat en un sitio web. Tú controlas la ventana: el nombre, el logo, los colores y dónde aparece.
• Apps de mensajería: WhatsApp, Instagram, Facebook Messenger, TikTok. La interfaz de la app no cambia. La gente ve el chat que ya conoce, con el nombre y la foto de tu negocio arriba. Lo que diseñas es la conversación: las palabras, el largo de los mensajes, las fotos y los enlaces que envías, y el momento en que entra una persona.

Con los agentes de IA, esta segunda parte importa más que nunca. La gente escribe su pregunta con sus propias palabras y recibe la respuesta en el mismo chat, así que la conversación misma se convierte en la interfaz.

Elementos clave de la interfaz de un chatbot

Sin importar el canal, la gente juzga un chatbot por lo mismo:

1. Nombre y avatar. Un nombre de negocio claro y un logo le dicen a la gente con quién está hablando. Si el asistente tiene su propio nombre, igual debe quedar claro que es la IA de tu negocio.
2. Ventana de chat y botón de apertura. En un sitio web, un botón de chat fácil de encontrar y una ventana que no tape la página. En las apps de mensajería, es la app misma.
3. La primera respuesta. Un saludo breve, quién responde y en qué puede ayudar. Marca el tono de todo lo que sigue.
4. Largo y formato de los mensajes. Mensajes cortos, una idea por mensaje. Fotos y enlaces cuando responden la pregunta, no como adorno.
5. Botones o texto libre. Los bots basados en reglas dependen de botones. Los agentes de IA entienden texto libre, así que la gente simplemente pregunta.
6. Ritmo. Las respuestas que llegan todas de golpe se sienten robóticas. Una pausa breve y una sola respuesta combinada se sienten más humanas.
7. Paso a una persona. Una forma visible de llegar a tu equipo, y un bot que reconoce cuándo alguien la necesita.
8. Respuesta de respaldo. Lo que dice el bot cuando no sabe algo. Un honesto "te comunico con alguien del equipo" es mejor que una respuesta equivocada dicha con seguridad.

Cómo configurar la interfaz de tu chatbot en Chatfuel

En Chatfuel, un Agente de IA responde a tus clientes en WhatsApp, Instagram, Facebook Messenger, TikTok y tu sitio web. Aquí está dónde vive cada parte de la interfaz.

Widget de chat del sitio web: nombre, imagen y color

Ve a Configuración › Plataformas › Sitio web. En Apariencia, define:

• Nombre: el nombre de tu negocio, hasta 30 caracteres. El widget lo muestra en el encabezado del chat.
• Imagen: tu logo o ícono. Aparece en el encabezado del chat abierto.
• Color de acento: uno de seis colores predefinidos para el botón del chat y los mensajes del visitante.

Luego agrega tu sitio en Dominios, haz clic en Copiar código en Instalación y pega el fragmento en el HTML de tu sitio, antes de la etiqueta de cierre </body>. Por último, activa la automatización Chats del sitio web en Agente de IA › Automatizaciones: como todas las automatizaciones, empieza desactivada.

Un detalle: tu logo aparece dentro del chat abierto, pero el botón pequeño del chat en la esquina de la página siempre muestra el ícono de Chatfuel, en todos los planes.

Mira cómo funciona el widget de chat para sitios web

Saludo, tono y nombre: Instrucciones de IA

No hay un campo aparte de "mensaje de bienvenida". El Agente de IA responde después del primer mensaje del visitante, y tú das forma a esa respuesta en Instrucciones de IA, dentro de la automatización de ese canal. Escríbelas como el brief para alguien nuevo en el equipo:

• quién es el asistente ("Eres Mia, la asistente de IA de Nuvia Skin")
• cómo empieza la primera respuesta (un saludo breve y el nombre del asistente)
• qué tan largas son las respuestas (2 o 3 frases, una pregunta a la vez)
• qué incluir siempre (el precio y la duración de un servicio, y luego un horario para reservar)
• qué evitar (más de un emoji, consejos médicos)

Cada canal puede tener sus propias instrucciones. Lo que no cambies en un canal viene de la automatización Por defecto, así mantienes una sola voz en todos lados y ajustas solo lo que cada canal necesita.

Ni siquiera tienes que abrir la configuración. AI Co-pilot, el asistente dentro de Chatfuel, cambia el nombre, el saludo y el tono cuando se lo pides en el chat:

Conoce AI Co-pilot

Fotos y ritmo: Imágenes y Retrasos en mensajes

Hay dos ajustes más en la misma automatización que definen lo que la gente ve:

• Imágenes envía fotos de tu catálogo: elige Cuándo la IA muestra imágenes (Nunca, Cuando se menciona el producto o servicio por primera vez o Cuando se solicita) y la cantidad de Imágenes por producto o servicio.
• Retrasos en mensajes hace que el chat se sienta más humano. El Agente de IA espera unos segundos, junta los mensajes que alguien envía seguidos y los responde en una sola respuesta.

Por qué no hay botones

El Agente de IA de Chatfuel no usa menús de botones, respuestas rápidas ni opciones numeradas, y es a propósito. Los bots de botones fueron una solución provisional de cuando los bots no entendían lo que la gente escribía. Fallan en cuanto una pregunta no coincide con ningún botón, y cada producto o política nueva obliga a rehacer el menú.

El Agente de IA lee lo que la gente escribe, con sus propias palabras y en cualquier orden, y responde desde tu Base de conocimiento de IA. Si quieres que sugiera opciones, ponlas en las instrucciones ("ofrece dos horarios libres para reservar") y las escribe en la respuesta. Quien quiera hablar con una persona solo tiene que decirlo.

Apps de mensajería: nombre y foto

En WhatsApp, la gente ve tu nombre visible y tu foto de perfil. El nombre visible se cambia en WhatsApp Manager, y luego haces clic en Sincronizar datos en la configuración de WhatsApp de Chatfuel. En Instagram y Facebook Messenger, el chat muestra el nombre y la foto de tu cuenta o de tu página. Las Instrucciones de IA y los ajustes Por defecto de arriba funcionan igual en todos los canales.

Ver también: Mejores prácticas de chatbots: 8 reglas para tu agente de IA

La interfaz del chatbot en cada canal

Cada app de mensajería tiene sus propios elementos integrados. Esto es lo que las plataformas ofrecen a los bots, según la documentación para desarrolladores de Meta en octubre de 2026:

Estos límites importan en los bots basados en reglas, hechos de botones y menús. El Agente de IA de Chatfuel responde con texto, fotos de tu catálogo y enlaces, que se ven igual en todos los canales y nunca chocan con un límite de botones.

Buenas prácticas de diseño de interfaz de chatbot

1. Di quién eres y en qué puedes ayudar

La primera respuesta debe resolver dos preguntas: ¿quién me habla? y ¿qué puedo preguntar? "Hola, soy Mia, de Nuvia Skin, te ayudo con precios y reservas" resuelve las dos en una línea. Si el asistente es una IA, dilo.

2. Mensajes cortos, una pregunta a la vez

Los párrafos largos cuestan en el celular. Limita cada respuesta a dos o tres frases y termina con una sola pregunta clara, para que la gente sepa que es su turno. Las guías de diseño conversacional de Google lo llaman toma de turnos: el bot debe indicar con claridad cuándo le toca al usuario.

3. Deja escribir y ofrece opciones en el texto

El texto libre sirve para cualquier pregunta. Cuando solo hay unas pocas opciones buenas, como dos horarios libres para reservar, escríbelas en la respuesta en vez de hacer que la gente adivine.

4. Que se vea y suene como tu marca

Usa el mismo nombre, logo y colores que en tu sitio web, y un tono que se parezca a cómo habla tu equipo. Una clínica suena más tranquila que una tienda de tenis.

5. Muestra fotos solo cuando responden la pregunta

La foto del tratamiento o producto por el que alguien preguntó ayuda a decidir. Cinco fotos seguidas sacan la respuesta de la pantalla.

6. Que el camino a una persona sea obvio

Avisa desde el principio que una persona puede tomar el chat, y define reglas claras para cuándo el bot pasa la conversación a tu equipo: reembolsos, quejas, preguntas médicas. En Chatfuel, esas reglas están en Cambiar a agentes humanos, y tu equipo retoma el chat en la misma bandeja de entrada.

7. Maneja el "no sé" con elegancia y prueba en el celular

Dile al bot qué decir cuando la respuesta no está en su base de conocimiento. Luego prueba todo el chat en un celular, que es donde la mayoría lo va a ver: los mensajes largos, las imágenes grandes y los botones tapados se notan ahí primero.

Herramientas de diseño de interfaz de chatbot

El prototipo más rápido es el chat real. Con un agente de IA no necesitas dibujar cada camino. En Chatfuel, Probar automatización en el panel Vista previa abre un chat con la configuración de esa automatización y tu base de conocimiento real, sin escribirles a tus clientes. Escribe las instrucciones, haz tus preguntas más frecuentes y ajusta.

Cuando necesitas maquetas, para rediseñar un sitio o presentarlas al equipo, estas son las herramientas que usan los diseñadores en 2026:

• Figma. La herramienta de diseño de interfaces más usada, con colaboración en tiempo real. Figma Make, disponible para todos los usuarios desde julio de 2025, convierte un prompt en un prototipo clicable, muy útil para probar el flujo de un chat. Tiene un plan Starter gratis; Professional empieza en $16 por asiento completo al mes, según su sitio en octubre de 2026.
• Sketch. Para diseñar sigue haciendo falta una Mac; una app web permite que cualquiera vea, inspeccione y comente. Standard cuesta $12 por editor al mes con facturación anual, según su sitio en octubre de 2026.
• Penpot. Una herramienta de diseño de código abierto que funciona en el navegador, con plan gratis y opción de instalarla en tu propio servidor.
• Voiceflow. Una plataforma de agentes de IA para equipos de experiencia del cliente, que se usa para diseñar y probar conversaciones de chat y voz. El precio es a pedido.

InVision, que aparece en muchas guías antiguas, cerró sus servicios de colaboración en diseño a fines de 2024, y su sitio ahora redirige a Miro.

Cómo evaluar la eficacia de la interfaz de un chatbot

1. Lee conversaciones reales. Nada muestra los problemas de la interfaz más rápido: gente que repite una pregunta, que pide hablar con una persona o que se va después de la primera respuesta. En Chatfuel, todos los chats de todos los canales están en Chats, y AI Co-pilot puede resumir qué preguntaron más los clientes esta semana y qué respuestas faltan.
2. Pide opiniones. Una calificación de una sola pregunta al final del chat, o una encuesta breve a clientes recientes. Es lo que la gente dice de sí misma, pero muestra cómo se sintió.
3. Haz una revisión heurística. Recorre el chat con una lista de usabilidad: ¿queda claro quién habla, qué hacer después, cómo pedir ayuda y qué salió mal después de un error?
4. Prueba con cinco personas. Dales una tarea real ("reserva un facial para el sábado") en sus propios celulares y observa dónde dudan.
5. Seguimiento ocular (eye-tracking), si tienes presupuesto. Muestra exactamente qué mira la gente en la ventana del chat, pero cuesta mucho más que los métodos anteriores.

Para una lista de qué probar antes del lanzamiento y qué preguntarle a AI Co-pilot cada semana, mira cómo probar y revisar un chatbot.

5 ejemplos de interfaz de chatbot

1. El Agente de IA de Chatfuel en un sitio web

El chat del sitio web de un estudio de cuidado de la piel hecho con Chatfuel. El widget lleva el nombre, el logo y el acento morado del estudio. El Agente de IA se presenta por su nombre, responde en dos frases con el precio y la duración del tratamiento, envía una foto del catálogo y termina con una sola pregunta: ¿qué horario te queda? El mismo Agente de IA responde en el WhatsApp, Instagram, Messenger y TikTok del estudio, con instrucciones ajustadas para cada canal.

Prueba Chatfuel en tu sitio web

2. Erica, de Bank of America

Erica es la asistente financiera virtual dentro de la app móvil de Bank of America. Su interfaz hace más que responder: envía avisos proactivos, como una suscripción que subió de precio, ayuda a manejar las cuentas y conecta con especialistas financieros. Según Bank of America, 20,6 millones de clientes usaron Erica en 2025, con casi 700 millones de interacciones, y el total de interacciones superó los 3200 millones desde su lanzamiento en 2018.

Qué copiar: avisos cortos y concretos que llevan a un siguiente paso, y un camino claro hacia un especialista humano.

3. Replika

Replika es una app de compañía con IA cuya interfaz gira en torno a un avatar personal. Cada usuario elige cómo se ve su compañero, chatea con él en mensajes cortos e informales, recibe selfies suyas y puede llamarlo. Su página principal cuenta más de 42 millones de usuarios en todo el mundo.

Qué copiar: un personaje coherente. El nombre, el aspecto y el tono coinciden en cada mensaje, y eso es lo que hace que la gente vuelva.

4. Lark Health

Lark es un programa de coaching de salud digital para prevenir la diabetes, manejar la diabetes tipo 2 y la hipertensión y bajar de peso, muchas veces sin costo a través del seguro médico o del empleador. Su coach chatea con los miembros 24/7, y su página en la App Store habla de "tap-to-send messaging OR type custom messages": se puede responder con un toque o con tus propias palabras. Lark dice que más de 2,5 millones de personas lo han elegido.

Qué copiar: registros rápidos que toman segundos, con el texto libre siempre disponible.

5. Duolingo Max

Duolingo Max suma dos funciones de IA a la app de idiomas: Roleplay, donde se chatea en situaciones de la vida real, y Video Call with Lily, donde se habla con uno de los personajes de Duolingo. La interfaz convierte al chatbot en un personaje con cara, voz y personalidad, y así practicar se siente como una conversación, no como un examen. Max está disponible en la app móvil, no en la web.

Qué copiar: un personaje y una situación le dan a la gente un motivo para seguir hablando.

Resumen

La interfaz de un chatbot es el nombre y la foto que ve la gente, la primera respuesta, el largo y el ritmo de los mensajes, las fotos y los enlaces que envías y el camino hacia una persona. En un sitio web también controlas la ventana. En las apps de mensajería, la conversación es toda la interfaz.

Con Chatfuel, defines el nombre, la imagen y el color de acento del widget en Configuración › Plataformas › Sitio web, das forma al saludo y al tono en Instrucciones de IA para cada canal, o se lo pides a AI Co-pilot, y eliges cuándo el Agente de IA envía fotos. Después lo pruebas en Probar automatización, lees chats reales y ajustas.

Los planes de Chatfuel empiezan en $20 al mes con $20 en créditos de IA. Empieza una prueba gratis de 7 días y pon un Agente de IA en tu sitio web y en tus apps de mensajería.

Preguntas frecuentes

¿Qué es la interfaz de un chatbot?

Es la interfaz que la gente usa para hablar con un bot: la ventana del chat, el nombre y el avatar del bot, los mensajes, los botones o el campo de texto libre, y la forma de llegar a una persona. En un sitio web incluye el propio widget de chat; en WhatsApp, Instagram o Messenger, la interfaz de la app es fija y la interfaz del bot es sobre todo la conversación.

¿Qué debe incluir la interfaz de un chatbot?

Un nombre y un avatar claros, una primera respuesta que diga quién habla y en qué puede ayudar, mensajes cortos, fotos o enlaces solo cuando responden la pregunta, un ritmo natural, una respuesta de respaldo para lo que no sabe y una forma visible de llegar a una persona.

¿Un chatbot debe usar botones o texto libre?

Los bots basados en reglas necesitan botones porque no entienden las preguntas escritas. Los agentes de IA sí, así que la gente simplemente pregunta. El Agente de IA de Chatfuel responde texto libre y escribe opciones en sus respuestas cuando ayudan, como dos horarios libres para reservar, en lugar de mostrar menús de botones.

¿Puedo personalizar el widget de chat de Chatfuel?

Sí. En Configuración › Plataformas › Sitio web defines el nombre (hasta 30 caracteres), la imagen y uno de seis colores de acento, agregas tus dominios y copias el código de instalación. El saludo y el tono vienen de las Instrucciones de IA de la automatización Chats del sitio web. El botón pequeño del chat en la esquina de la página siempre muestra el ícono de Chatfuel.

¿Qué herramientas se usan para diseñar la interfaz de un chatbot?

Los diseñadores usan Figma (con Figma Make para prototipos clicables), Sketch en Mac, Penpot, que es de código abierto, y plataformas de diseño conversacional como Voiceflow. Con un agente de IA, el prototipo más rápido es un chat de prueba: en Chatfuel, Probar automatización usa tu configuración y tu base de conocimiento reales sin escribirles a tus clientes.

¿Cómo pruebo la interfaz de un chatbot?

Antes del lanzamiento, ponte en el lugar del cliente: haz tus preguntas más frecuentes, intenta reservar, pide hablar con una persona y escribe con errores. Después del lanzamiento, lee chats reales cada semana, pide calificaciones rápidas y observa a algunas personas completar una tarea en sus celulares.