How to design a Facebook Messenger Chat Extension
Last April, Facebook announced chat extensions as a new cool feature of Facebook Messenger. With Botsociety, you can now preview a Facebook chat extension!
Facebook Chat extensions are really powerful and interesting. If you create one, you will be able to insert your own, micro-application directly inside Facebook Messenger. Embedding your custom HTML5 application inside Messenger means you can tap into its +1 billion user base.
On the other hand, since technically a Facebook chat extensions are a series of small HTML page embedded into Messenger, it wasvery difficult to preview the final user experience before actually building them. This makes the development it kind of cumbersome and risky. But fear no more! Using Botsociety, you can now quickly create a Facebook Extension preview very easily.
Overview
In this tutorial, we will learn how to design and preview a Facebook Chat Extension experience. If you are not sure what a Facebook Chat Extension is, you can dive into the topic by reading our brief blog post that shows just that.
Technically, a Facebook Chat Extension is a small HTML page shown inside Facebook Messenger. In particular, its possibilities are very interesting because it is possible to show it inside a group conversation happening inside Facebook Messenger. This feature opens up a ton of possible use case scenarios that were not possible before with the simple chatbots!
There are few steps necessary to create a realistic preview of a Facebook Messenger chat extension:
- Come up with a conversation hypothesis between two users, using Botsociety
- Design the graphical interface of the Extension itself. You can use any graphical interface tool for this, in this tutorial we will use SketchApp
- Upload the screens created on Step 2, arrange them in the conversation
- Check out it looks like and iterate on your design
Step 1: Design the conversation
This is very fast. Sign up on Botsociety, create a new mockup and select the “Facebook Extension” option. Now you can mock up a conversation happening between two users. You can come up with any creative scenario that may lead to your chat extension!
In my example, I’m going to have the users choose a Pizza ordering extension. So the conversation will go something like: “Feel like pizza?” and continue along those lines.
Step 2: Design the graphical interface
To design the graphical interface you can use any graphical manipulation program. We like SketchApp a lot, but you can use any other tool like Photoshop, Figma, GIMP, etc. The cool thing about Sketch is that you can leverage on a design kit provided by Facebook. The design kit will give you a head start by giving you basic components like buttons, labels, etc which are in line with the Facebook Messenger design guidelines. You can download the design kit here
Once downloaded, open the file with Sketch, then open a new File (from the main Sketch menu click on File > New). I usually work with this file open in the background while I work on my own Sketch file in another window. You can copy-paste components from the design kit into your own file if needed.
Ok so: Now that we have a clean new file, we want to have a clear idea of the size of an extension. An easy way to do that is add a rectangle that has the same size of the extension.
To do so, click on the main menu Insert > Shape > Rectangle. Then on the top right corner edit the size of the Rectangle, by putting 350x450 pixels. If you don’t remember the size, don’t worry, it’s detailed into Botsociety as well.
I then usually remove the border of the rectangle and then change its color to a very light grey. This is of course not mandatory, I just personally find it easier to design on a lighter canvas.
If you find the rectangle too small to draw into, don’t worry. You can resize the rectangle. Just pay attention and press Shift while you resize it! This little trick will ensure that the aspect ratio of the rectangle is preserved so that it will be displayed properly inside the extension.
All set! You can now start designing the first screen of Extension. You can go fully custom or copy-paste components from the Design kit, or both. I want to come up with a selection of different type of Pizzas, so I’ll just add a simple list of possible pizzas. If the user taps on a pizza, it adds it to basket.
Once you are satisfied with your design, select all the elements and group them. The situation now should resemble something like the image on the left. Grouping all the elements properly is important because it will allow you to clone and export your screens properly, so be sure to group your screen correctly.
Now I would like to create a second screen. Keep in mind that you can come up with any number of screens for your extension. In my example, I just need a second screen. In order to do that, I simply copy-paste my group, move it near to the first screen and rename it. Now I can use the edit this new group and design the second screen.
Once I’m satisfied with my second screen, I’m ready to export the screens I’ve created! Doing so it’s very easy.
Just click on the group you would like to export, and then click on “Exports +” on the bottom right panel. I usually export at x2 in PNG to avoid resolution issues, and I advise you to do the same.
My screen looks like this now. The button you need is “Export NAME OF YOUR GROUP” in the bottom right corner. Export all of your screens into your computer. Done? Great! Let’s move on to step 3
Step 3: Upload screens and create a prototype
Go back to your mockup inside Botsociety. Click on the big button “First user”. The first type of message that you can add is an extension. We will add them to the first user because it represents the user who is actually using the phone in our example. Click on “Add Extension” and select your first screen. Then click on “Add”. Do the same with the second screen.
Now your extension screens are added inside your conversation. Click the green button “Play” on the top to observe the final result. Botsociety will show you a video of the final user experience, that comprehends the user dialogue and your Extension design.
Step 4: Check the result and iterate
You can now click and drag a message to move it around, edit existing messages and add new ones. If you add an Extension message after an existing Extension message, Botsociety will assume that the user has not closed the Extension drawer. The final effect will mimic the one performed by a user who navigates to the first screen and the second. On the other hand, if you add a text message after an extension one, Botsociety will show that the user has completed the interaction inside the extension.
There are countless possibilities now: You may have an extension that interacts with one user, then prompts and image, and then interacts with the other user, like Swelly. Or you can have a simple sharing extension like the Location Extension. Or more!
Hope you found this tutorial useful. Please leave any question you may have in the comments below.
Originally published on the Botsociety Journal
