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:

Facebook carousel mockup first part

Now if you click “Start designing” you will be brought to the main screen:

How to create a Facebook carousel

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:

Switch to carousel type of message

If you click there you will be able to see a simple form to add carousels:

Carousel add form

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:

Designing a Facebook Carousel in Sketch

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:

Facebook Carousel Sketch cropped

That’s correct but too small! I now resize the rectangle pressing “Shift” in order to respect the aspect ratio. Much better!

Ready to design the carousel

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:

Facebook Carousel sketch

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:

Group selection in Sketch

Now I select the newly created group and can click on the bottom right corner “Make Exportable” and then “Export group”:

Export your carousel to Botsociety

Now back to Botsociety! I click on “Add Image” and select the image I just exported on Sketch:

Upload Facebook carousel image

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:

Facebook carousel added to Botsociety

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:

Carousel add multiple cards

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.

Multiple items in the same carousel

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:

Second item in the carousel

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

Comments


Vittorio Banfi

Co-founder and CEO botsociety.io

Related Posts

Tutorials

Chatterbot design in 5 easy steps

Once upon a time, you could only find chatterbots in science fiction shows like Star Trek. Now, artificial intelligence is at anyone’s fingertips. It’s no secret: humans love to talk! And they love interfaces that Read more…

Tutorials

How to complete an Alexa Design

First introduced via the launch of the Echo in 2015, Alexa has been hugely successful for Amazon. So much so that the company has expanded Alexa’s reach into a range of Amazon home smart devices, Read more…

Tutorials

How to embed a chatbot into your website

So you are building a chatbot, and you would like to show it off on your landing page or website. How do you do that? In this tutorial, we are going to see how to Read more…