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 carousel. In this tutorial, we are going to design a Facebook carousel using Sketch and Botsociety. Note that it is not strictly required to use Sketch – any other image processing software will be ok. I also like Figma, or GIMP, for example.
Don’t feel like reading? Check out the video version below! Otherwise, just scroll down
Prepare the tools
For the sake of this tutorial, I’m going to use Sketch and Botsociety. I assume you already have Sketch installed on your machine. You can sign up for Botsociety here. Now that you have both tools at hand, let’s prepare. Create a new mockup on Botsociety: Choose a name and select “Facebook” as the platform:
Now if you click “Start designing” you will be brought to the main screen:
Now if you click on “Bot says” you will open a panel. This panel allows you to add the messages sent by your chatbot. By default, you can add a text message. In this case, we want to add a carousel. You can click on the tabs on top to change the message type, like so:
If you click there you will be able to see a simple form to add carousels:
As you see, the first element of the carousel is a big image. But which image should I add? For the sake of this tutorial, I’m going to create a carousel that can be used by a bot focused on travels. Each carousel card will represent a destination.
Design the Facebook carousel image in Sketch
I now open Sketch and start working with it. First, I’m going to create a new document; I’ll then add a rectangle. I want the rectangle to be the boundaries of my carousel image. My document looks like this:
The aspect ratio of a Facebook carousel image is 1.00 (height) X 1.91 (width). To respect that, I’m going to change the “Size” numbers on the top right corner to 191 as width and 100 as height:
That’s correct but too small! I now resize the rectangle pressing “Shift” in order to respect the aspect ratio. Much better!
Now I have a proper canvas to design my carousel image. I want this first Facebook carousel image to show the user Paris, as a potential destination. After some Googling and Sketch work, I came up with this:
Looks nice! It is now time to export this image and put it inside our Messenger mockup.
Add the carousel image
Now I want to add this carousel image to my Botsociety design. In order to do that, I select all the elements in Sketch and group them:
Now I select the newly created group and can click on the bottom right corner “Make Exportable” and then “Export group”:
Now back to Botsociety! I click on “Add Image” and select the image I just exported on Sketch:
I then fill all the other fields – title, subtitle, and button1. Then I click the button on the bottom right corner of the panel: “Add”. This is the final result:
This is nice, but how do we propose more destinations to our user? It is possible to add multiple cards to the carousel.
Add more cards to the same Facebook carousel
To add more cards just click on the green icon on the top right of the panel:
Your item will slide on the side and you will be able to edit the new one! I can use the numbers on top to navigate between the different items.
I’ve now created another similar image in Sketch and uploaded it. I’ve then clicked “Save” to apply my changes. Here is what it looks like:
Preview and iterate
You can now preview the final user experience by clicking on the “Play” button on the top right corner. You can also share it with the share button! Having a precise idea of the final user experience will allow you to iterate and get your design better.
You can find the mockup created in this tutorial here
Thanks for reading this tutorial! Please ask if you have any question