Last April, Facebook announced chat extensions. With Botsociety, you can now preview a Facebook extension too! Facebook 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 extensions are a series of small HTML page embedded into Messenger, it is very 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.

Do not feel like reading? Check out the video tutorial! Otherwise, keep reading

Overview: design a Facebook extension

In this tutorial, we will learn how to design and preview a Facebook Extension experience. If you are not sure what a Facebook Extension is, you can dive into the topic by reading our brief blog post that shows just that.

Technically, a Facebook Extension is a small HTML page shown on 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:

  1. Come up with a conversation hypothesis between two users, using Botsociety
  2. Design the graphical interface of the Extension itself. You can use any graphical interface tool for this, in this tutorial we will use SketchApp
  3. Upload the screens created on Step 2, arrange them in the conversation
  4. 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 Chat 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!

Design a Facebook Extension on Botsociety - Screenshot

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.

Design a Messenger Extension - CanvasOk 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 350×450 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 gray. 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 copypaste 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 the basket.

Preview a Facebook extension - Sketch

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 right. 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.

Prototype Facebook Messenger extension

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

Upload your custom extension design in BotsocietyGo 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 an 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

Comments

Categories: Tutorials

Vittorio Banfi

Co-founder and CEO botsociety.io

Related Posts

Tutorials

How to design a Facebook Carousel with Sketch

When designing a Messenger chatbot, one of the nicest message formats that you can send is a carousel. The carousel allows you to send multiple images, titles and multiple links for each element of a Read more…

Tutorials

How to create your first Slack bot mockup

In this tutorial, we are going to create a simple Slack bot mockup. Designing a Slack interaction before actually building it will help you save a lot of time. How? By previewing and prototyping your Read more…

Tutorials

How to design a Facebook Messenger mockup

In this brief tutorial, we will go through the basic steps of designing your first Facebook Messenger mockup. Designing this chatbot interaction is crucial to the success of your project. If you get it wrong, Read more…