Guest experts
A chatbot UI is everything a person sees and touches while talking to a bot: the chat window, the name and photo at the top, the messages, the pace of the replies and the way out to a human. Get it right and people keep typing. Get it wrong and they close the window after the first answer.
Expectations are high. In Zendesk's CX Trends 2026 report, 74% of consumers say that because of AI they now expect customer service to be available 24/7. A good chatbot UI is how you meet that without making people feel they're filling in a form.
This guide covers:
- What a chatbot UI is today, on a website and in messaging apps
- The key elements of a chatbot interface
- How to set up your chatbot UI in Chatfuel
- What each channel lets you show
- Design best practices, tools and ways to test
- 5 chatbot UI examples from Chatfuel, Bank of America, Replika, Lark and Duolingo
What is a chatbot UI
A chatbot UI (user interface) is the visual and conversational layer between a person and a bot. It decides how the bot looks, how it talks and how easy it is to get an answer.
There are two very different cases:
- Your own chat widget on a website. You control the window: the name, the logo, the colors and where it appears.
- Messaging apps: WhatsApp, Instagram, Facebook Messenger, TikTok. The app's interface is fixed. People see the chat they already know, with your business name and photo at the top. What you design is the conversation: the words, the length of the messages, the photos and links you send, and when a person steps in.
With AI agents, the second part matters more than ever. People type a question in their own words and get an answer in the same chat, so the conversation itself becomes the interface.
Chatbot UI key elements
Whatever the channel, people judge a chatbot by the same things:
- Name and avatar. A clear business name and logo tell people who they're talking to. If the assistant has a name of its own, it should still be obvious it's your business's AI.
- Chat window and launcher. On a website, a chat button that's easy to find and a window that doesn't cover the page. In messaging apps, this is the app itself.
- The first reply. A short hello, who's answering and what it can help with. It sets the tone for everything after.
- Message length and format. Short messages, one idea each. Photos and links where they answer the question, not as decoration.
- Buttons or free text. Rule-based bots lean on buttons. AI agents understand free text, so people can just ask.
- Pace. Replies that land all at once feel robotic. A short pause and one combined answer feel closer to a person.
- Handoff to a human. A visible way to reach your team, and a bot that recognizes when someone needs one.
- Fallback answer. What the bot says when it doesn't know. An honest "let me get a teammate" beats a confident wrong answer.
How to set up your chatbot UI in Chatfuel
In Chatfuel, an AI Agent answers your customers on WhatsApp, Instagram, Facebook Messenger, TikTok and your website. Here's where each part of the UI lives.
Website chat widget: name, image and color
Go to Settings › Platforms › Website. Under Appearance, set:
- Name: your business name, up to 30 characters. The widget shows it in the chat header.
- Image: your logo or icon. It appears in the header of the open chat.
- Accent color: one of six preset colors for the chat button and the visitor's messages.
Then add your website under Domains, click Copy code under Installation and paste the snippet into your site's HTML, before the closing </body> tag. Finally, turn on the Website chats automation under AI Agent › Automations: like every automation, it starts off.
One thing to know: your logo appears inside the open chat, but the small chat button in the corner of the page always shows the Chatfuel icon, on every plan.
See how the website chat widget works
Greeting, tone and name: AI instructions
There's no separate "welcome message" field. The AI Agent replies after the visitor's first message, and you shape that reply in AI instructions, inside the automation for that channel. Write it like a brief for a new teammate:
- who the assistant is ("You are Mia, the AI assistant of Nuvia Skin")
- how the first reply starts (a short hello and the assistant's name)
- how long replies are (2–3 sentences, one question at a time)
- what to always include (the price and length of a service, then a time to book)
- what to avoid (more than one emoji, medical advice)
Each channel can have its own instructions. Settings you don't change in a channel come from the Default automation, so you keep one voice everywhere and adjust only what a channel needs.
You don't have to open the settings at all. AI Co-pilot, the assistant inside Chatfuel, changes the name, greeting and tone when you ask in chat:
Photos and pace: Images and Message delays
Two more settings in the same automation shape what people see:
- Images sends photos from your catalog: choose When AI shows images (Never, When product or services first mentioned, or When asked) and the number of Images per product or service.
- Message delays makes chatting feel more human. The AI Agent waits a few seconds, collects the messages someone sends in a row, and answers them in one reply.
Why there are no buttons
Chatfuel's AI Agent doesn't use button menus, quick replies or numbered options, and that's on purpose. Button bots were a workaround for a time when bots couldn't understand what people typed. They break the moment a question doesn't match a button, and every new product or policy means rebuilding the menu.
The AI Agent reads what people write, in their own words and in any order, and answers from your AI Knowledge Base. If you want it to suggest options, put them in the instructions ("offer two free times to book") and it writes them into the reply. People who want a person can simply say so.
Messaging apps: name and photo
On WhatsApp, people see your display name and profile photo. You change the display name in WhatsApp Manager, then click Sync data in Chatfuel's WhatsApp settings. On Instagram and Facebook Messenger, the chat shows your account's or Page's own name and photo. The AI instructions and Default settings above work the same way in every channel.
See also: Chatbot best practices: 8 rules for your AI agent
Chatbot UI on each channel
Each messaging app has its own built-in elements. Here's what the platforms offer to bots, as listed in Meta's developer docs in October 2026:
| Channel | What you control | Built-in elements |
|---|---|---|
| Website (Chatfuel widget) | Name (up to 30 characters), image, accent color (6 presets) | Chat window, launcher button, emoji, image upload |
| Display name, profile photo, business profile | Up to 3 reply buttons (titles up to 20 characters), list messages with up to 10 rows, a link button, product messages with up to 30 products | |
| Account name and photo | Up to 4 ice breakers, up to 13 quick replies, carousels of up to 10 cards with up to 3 buttons each | |
| Facebook Messenger | Page name and photo | Up to 13 quick replies, 1–3 buttons per message, carousels of up to 10 cards, a persistent menu of up to 20 items |
These limits matter for rule-based bots built from buttons and menus. Chatfuel's AI Agent replies with text, photos from your catalog and links, which look the same on every channel and never hit a button limit.
Chatbot UI design best practices
1. Say who you are and what you can help with
The first reply should answer two questions: who's talking, and what can I ask? "Hi, I'm Mia from Nuvia Skin, I can help with prices and bookings" does both in one line. If the assistant is an AI, say so.
2. Keep messages short, one question at a time
Long paragraphs are hard to read on a phone. Keep each reply to two or three sentences and end with one clear question, so people know it's their turn. Google's conversation design guidelines call this turn-taking: the bot should signal clearly when it's the user's turn.
3. Let people type, offer choices in the text
Free text works for any question. When there are only a few good options, like two free times to book, write them into the reply instead of making people guess.
4. Make it look and sound like your brand
Use the same name, logo and colors as on your website, and a tone that matches how your team talks. A clinic sounds calmer than a sneaker store.
5. Show photos only when they answer the question
A photo of the treatment or product someone asked about helps them decide. Five photos in a row push the answer off the screen.
6. Make the way to a human obvious
Say early that a person can take over, and set clear rules for when the bot hands the chat to your team: refunds, complaints, medical questions. In Chatfuel, those rules live in Switch to human agents, and your team picks up the chat in the same inbox.
7. Handle "I don't know" gracefully, and test on a phone
Tell the bot what to say when the answer isn't in its knowledge base. Then test the whole chat on a phone, where most people will see it: long messages, big images and covered buttons show up there first.
Chatbot UI design tools
The fastest prototype is the real chat. With an AI agent, you don't need to draw every path. In Chatfuel, Test automation in the Preview panel runs a chat with that automation's settings and your real knowledge base, without messaging customers. Write the instructions, ask your top questions and adjust.
When you need mockups, for a website redesign or a stakeholder review, these are the tools designers use in 2026:
- Figma. The most widely used interface design tool, with real-time collaboration. Figma Make, available to all users since July 2025, turns a prompt into a clickable prototype, which is handy for testing a chat flow. A free Starter plan is available; Professional starts at $16 per full seat per month, as listed in October 2026.
- Sketch. Designing still requires a Mac; a web app lets anyone view, inspect and comment. Standard costs $12 per editor per month billed yearly, as listed in October 2026.
- Penpot. An open-source, browser-based design tool with a free plan and a self-hosted option.
- Voiceflow. An AI agent platform for customer experience teams, used to design and test conversations for chat and voice. Pricing is on request.
InVision, often listed in older guides, shut down its design collaboration services at the end of 2024, and its website now redirects to Miro.
How to evaluate chatbot UI effectiveness
- Read real conversations. Nothing shows UI problems faster: people repeating a question, asking for a person, or leaving after the first reply. In Chatfuel, every chat from every channel is in Chats, and AI Co-pilot can sum up what clients asked most this week and which answers are missing.
- Ask for feedback. A one-question rating at the end of a chat, or a short survey to recent customers. It's self-reported, but it shows how people felt.
- Run a heuristic review. Go through the chat with a usability checklist: is it clear who's talking, what to do next, how to get help, and what went wrong after an error?
- Test with five people. Give them a real task ("book a facial for Saturday") on their own phones and watch where they hesitate.
- Eye-tracking, if you have the budget. It shows exactly what people look at in the chat window, but it costs far more than the methods above.
For a checklist of what to try before launch and what to ask AI Co-pilot every week, see how to test and review a chatbot.
5 chatbot UI examples
1. Chatfuel AI Agent on a website
A skin care studio's website chat built with Chatfuel. The widget carries the studio's name, logo and purple accent. The AI Agent introduces itself by name, answers in two sentences with the price and length of the treatment, sends one photo from the catalog and ends with a single question: which time works? The same AI Agent answers on the studio's WhatsApp, Instagram, Messenger and TikTok, with instructions tuned for each channel.
2. Erica by Bank of America
Erica is the virtual financial assistant inside the Bank of America mobile app. Its UI does more than answer: it sends proactive insights, like a subscription that went up, helps people manage their accounts and connects them to financial specialists. According to Bank of America, 20.6 million clients used Erica in 2025, with nearly 700 million interactions, and total interactions have passed 3.2 billion since its 2018 launch.
What to borrow: short, specific alerts that lead to a next step, and a clear path to a human specialist.
3. Replika
Replika is an AI companion app whose interface is built around a personal avatar. Users choose how their companion looks, chat with it in short, casual messages, get selfies from it and can call it. Its homepage counts more than 42 million users worldwide.
What to borrow: a consistent persona. Name, look and tone match in every message, which is what makes people come back.
4. Lark Health
Lark is a digital health coaching program for diabetes prevention, type 2 diabetes, hypertension and weight loss, often available at no cost through health insurance or employers. Its coach chats with members 24/7, and its App Store page describes "tap-to-send messaging OR type custom messages," so people can answer in one tap or in their own words. Lark says more than 2.5 million people have chosen it.
What to borrow: quick check-ins that take seconds, with free text always available.
5. Duolingo Max
Duolingo Max adds two AI features to the language app: Roleplay, where learners chat through real-life scenarios, and Video Call with Lily, where they talk with one of Duolingo's characters. The interface turns a chatbot into a character with a face, a voice and a personality, which makes practice feel like a conversation, not a test. Max is available in the mobile app, not on the web.
What to borrow: a character and a scenario give people a reason to keep talking.
Summary
A chatbot UI is the name and photo people see, the first reply, the length and pace of the messages, the photos and links you send and the way out to a human. On a website you also control the window. In messaging apps, the conversation is the whole interface.
With Chatfuel, you set the widget's name, image and accent color in Settings › Platforms › Website, shape the greeting and tone in AI instructions for each channel, or ask AI Co-pilot to do it, and choose when the AI Agent sends photos. Then test it in Test automation, read real chats, and adjust.
Chatfuel plans start at $20 a month with $20 in AI credits. Start a 7-day free trial and put an AI Agent on your website and messaging apps.
FAQs
What is a chatbot UI?
A chatbot UI is the interface people use to talk to a bot: the chat window, the bot's name and avatar, the messages, buttons or free-text input, and the way to reach a human. On a website it includes the chat widget itself; in WhatsApp, Instagram or Messenger, the app's interface is fixed and the UI is mostly the conversation.
What should a chatbot UI include?
A clear name and avatar, a first reply that says who's talking and what it can help with, short messages, photos or links only where they answer the question, a natural pace, a fallback answer for unknown questions, and a visible way to reach a person.
Should a chatbot use buttons or free text?
Rule-based bots need buttons because they can't understand typed questions. AI agents can, so people can simply ask. Chatfuel's AI Agent answers free text and writes options into its replies when they help, such as two free times to book, instead of showing button menus.
Can I customize the Chatfuel chat widget?
Yes. In Settings › Platforms › Website, you set the name (up to 30 characters), the image and one of six accent colors, add your domains and copy the install code. The greeting and tone come from AI instructions in the Website chats automation. The small chat button in the page corner always shows the Chatfuel icon.
What tools are used to design a chatbot UI?
Designers use Figma (including Figma Make for clickable prototypes), Sketch on a Mac, the open-source Penpot, and conversation design platforms like Voiceflow. With an AI agent, the quickest prototype is a test chat: in Chatfuel, Test automation runs your real settings and knowledge base without messaging customers.
How do I test a chatbot UI?
Play the customer before launch: ask your top questions, try to book, ask for a person and make typos. After launch, read real chats every week, ask for quick ratings and watch a few people complete a task on their phones.
