When designing a product for the web or mobile world, we usually operate within certain types of interactions and user interface elements — text fields, forms, buttons, checkboxes, or switches, for example. In the chatbot world, the interface elements are different.
So, after you come up with lots of ideas about the magical things your bot might be able to do, it is time to get “down to earth” and balance your goals with the design constraints of the platform.
In this post, I want to summarize all conversational elements that are available to you if you want to design a Facebook Messenger chatbot.
At the end of this article, you will find a cheat sheet with a visual summary of all the interaction elements that are now available for the Facebook Messenger chatbot (or simply scroll right to the infographics).
Get the "Cheat Sheet: All Facebook Messenger Bots Interactions" delivered to your inbox!
Onboarding
The very first screen that your users will see once your chatbot is discovered is the “Welcome” screen where you can introduce your bot using 160 characters maximum.
Use this screen to set expectations for your users and communicate your main functionality.
Once a user taps the “Get Started” button, your interactions begin with the welcome greeting from your bot. Try to be specific about the experience you have created, clarify your functionality, and describe the next steps to encourage users to respond.
The welcome message is a good place to share the basic commands, keywords, or terms people can use to ask for help. Use buttons to add more structure to your messages.
You can personalize your chatbot experience using a user’s profile data — such as name or location — to pick the right language or the correct time zone.
Messaging
There are several message types your chatbot can use: text, files, and rich media such as image, video, and audio. Any attachments can be uploaded directly or you can provide them via a URL link.
You can also send structured messages that help users complete tasks, get information, or answer their questions. Try to keep the text on the buttons under 20 characters (including spaces).
Don’t use standalone questions as this this could encourage people to respond in the ways you don’t support. To avoid that add buttons with the specific answers to the message and ask people to choose one.
If you require a greater hierarchy, use a generic template that allows you to use a combination of text, images, and buttons. Photos in the generic template are 1.91:1. If you want to send multiple similar messages, use carousels.
Navigation (persistent menu)
One of the elements that will help people keep from getting lost is the persistent menu. It is always available, and it should contain top-level actions that users can access any time. Persistent menus communicate the basic capabilities of your chatbot and allow easy access to the bot’s functionality.
This menu will automatically appear in a thread if the user returns after being away for a long time.
Templates
The Facebook Messenger platform has several convenient templates like receipts or list templates for the commerce experience and airline templates for sending people their itineraries, check-in reminders, and flight status updates.
Buttons
Buttons give people choices and direct them toward certain actions. There are several types of buttons you can use.
- URL buttons. These send people outside Messenger. Make sure you do not use URLs for every button and try to build more interactions within Messenger.
- Buy buttons. These open a native checkout dialog box and allow people to make purchases quickly.
- Share buttons. These open a native share dialog box in Messenger and allow users to share a bot’s message with any Facebook friend.
- Webviews open convenient ways to avoid the limitations of the platform and to show users any information in any format you like inside Messenger. Webviews support HTML, CSS, and JavaScript and allow you to create experiences that look and feel like part of the thread.
- Quick Reply is another type of button inside Messenger. When this button is tapped, the buttons are dismissed so users can’t change their selection. You can use images inside Quick Reply. There is also a special type that will prompt a person for his or her location.
On this cheat sheet, you can find all the tools available to help configure the experience people have with your bot. Download the high-resolution infographic here.
Feel free to use it next time you decide to build one!
To find out more details on each element and get to know the technical details, please visit the Facebook Messenger platform guidelines here and here.
Get the "Cheat Sheet: All Facebook Messenger Bots Interactions" delivered to your inbox!
If you are a visual thinker like me you may like my Hand Drawn Design Tips— weekly 1 min read newsletter on product design.
