This brief tutorial shows how to preview a Facebook Messenger bot created on Botsociety. It provides step by step preview instructions on each of the seven message options of a Facebook bot. By the end of this tutorial, you’ll be a pro who knows three ways of previewing a Facebook bot!

No time to read? This tutorial is also available in video, check it out below! Otherwise, keep scrolling down.

Whether someone shared their chatbot prototype with you, or you are preparing to create your own Facebook bot mockup, you have come to the right place for some preview tips!

There are three main ways you can preview chatbot messages:

  1. On the main mockup page;
  2. In the Editor window
  3. In the Play mode.

1.The main mockup page shows you all the messages in the chosen path. For example, here’s my Shoe Shopper Facebook bot mockup. In the middle of the mockup page there’s a window that looks like a phone. In this case, it shows my chatbot’s happy path, or the best case scenario where the user behaves exactly as expected. You can scroll up and down and see all of the messages, buttons, and replies in this path.

When you hover over a message, you’ll see the arrows that allow switching between the options of the message, as well as the Comments button. If you click on it, you can leave a comment for your teammates or a note for yourself.

facebook bot

When you click on a message, the message opens in the Editor window on the left.

2. The Editor window shows you one message at a time and gives you the ability to modify it. You can edit its text, add or delete options, or modify it in other ways depending on the type of the message.

facebook bot

There are 7 types of messages available for Facebook bots on Botsociety. You can select the kind you want at the top of the Editor window.

facebook bot

Let’s take a look at each of the message types.

A) Text Message. This is a simple message that contains nothing but text. There are options to set a certain time to display the message, add emojis, and clone the message, as well as delete it or save the changes.

This simple text message is a quick and effective way to greet the user, give feedback, or ask a question.

facebook bot

B) Carousel. This type of message shows a selection of items. Each item has an image, a title, an optional subtitle, and between one and three buttons. It’s a great way to offer multiple options at once.

For example, my Shoe Shopper chatbot uses the carousel to show a selection of shoes with their pictures, model names, and prices. It also offers the user to buy, save for later, or learn more about each pair of shoes. Numbers at the top allow previewing each item in the carousel.

facebook bot

C) Image. This type allows you to send an image with an option to include text.

For example, my Facebook bot uses an image of a color swatch to add some visualization to go with a question about color preferences.

facebook bot

D) Buttons. This type of message consists of text and at least one button. It can be used to give the user a multiple choice selection.

For example, Shoe Shopper uses buttons to ask the user to choose from the most basic shopping categories: Women, Men, or Kids.

facebook bot

E) Quick Replies. Quick replies are common responses that are typed out and clickable. They save users time and effort that would otherwise be spent on manually typing their response.

While buttons in the previous message type are displayed in one concise spot, multiple quick replies can be viewed with a swiping motion.

My Facebook bot Shoe Shopper uses quick replies to make it quick and easy for the user to select their shoe size.

facebook bot

F) Webview. This type of message allows you to show the user a preview of a website without the need to leave Facebook Messenger.

For example, when a Shoe Shopper user wants to know more about a particular pair of shoes that is available for sale online, the bot shows the user a preview of the store’s webpage with additional information about the shoes.

facebook bot

G) List. Your Facebook bot can show users a list of items with pictures, titles, subtitles, and custom buttons for quick selection. All this information is available at a glance as the user scrolls down the list on their screen.

For example, right after Shoe Shopper asks the user about the type of shoe they are looking to buy, it offers a list of shoe styles with sample pictures.

facebook bot

After the messages are created in the Editor window and added to the main mockup page, you can use the third way of Facebook bot preview by pressing the green Play button in the top right corner.

facebook bot

3. The Play mode allows you to see the conversation flow from the user’s perspective. This is an excellent way to preview the behavior of the messages you created. The play mode will add one message at a time, scroll through your quick replies and carousel options just like a real user would, and show the user’s selection as a separate message.

Now you have the tools to create and edit different types of Facebook bot messages, including text messages, carousels, images, buttons, quick replies, webviews, and lists. You also know how to view them on the main mockup page, in the editor window, and in the play mode.

Now that you know how to create and preview your Facebook bot, you are ready to create prototypes of your chatbot minions you will later send out to conquer the world for you.