In this tutorial, we are going to design a Facebook webview using Botsociety and Sketch App. A Messenger webview allows your users to visualize a website inside the Facebook Messenger experience without getting out of Facebook Messenger itself. By using web views, you can mock what happens if the user clicks on a button. But it’s when you build your own, custom website that web views become powerful. You can create a dedicated website that grabs information from the user, exchanges information with your chatbot, and automatically closes the webview panel inside Messenger when the interaction is completed.
Don’t feel like reading? This tutorial is also a video! Otherwise, continue scrolling
1. Design the conversation
For the sake of this tutorial, I’m going to use SketchApp and Botsociety. SketchApp is not strictly needed, as any graphical design tool will do the trick. You can also use Figma, GIMP or Photoshop. Botsociety is needed to create the design of the Messenger chatbot. It’s free, you can sign up here. I’m assuming you already have Sketch installed on your computer.
Now that you have the tools ready, go to Botsociety and create a new mockup. Select “Facebook” as the platform of your choice. You can now design any chatbot interaction, very quickly.
For the sake of this tutorial, I’m going to design an AwardBot. It gives random awards to users if they complete a small form. So now I’m going to add the first messages sent by the bot. It will present itself with the first message; it will then ask the user which award he would like to win, by sending a “Quick reply” message. My design now looks like this:
When the user chooses one of the option, I would like to open a webview. The webview will show an HTML5 website that I will create. If I switch to “Webview” message type on the left-hand side panel, I will see something like this:
What I can do here is upload an image that represents my webview. Let’s design the webview in Sketch!
2. Design the Facebook webview
I open Sketch and create a new document. I now want to be sure that the size of my webview design is the correct one. In order to do that, I add a rectangle and size it properly. Webview can have different sizes, and Botsociety will tell me the correct ones = as shown in the last image. In this tutorial, I’m going to add webview with size “Tall”. I therefore need a rectangle that is 341 pixels wide and 450 pixels tall. I can change the size from the top right corner like so:
I now have the canvas! I will change the rectangle background to white and add all the elements of my form. In this example, I’m going to add the design of the SoccerAward form. After some work, it looks like this:
I’ll now group all the elements and group them. I can now export the whole object in the bottom right corner. I’ll export a PNG:
I’ll now get back to Botsociety and upload the PNG in the webview section. I then click add. This is the final result:
Now I have a message that represents the Facebook webview. The cool is that I can treat it as any other message: Clone it, drag it around, and more. The other cool thing about it is that I can add multiple webviews one after another to stimulate a flow; I can also add a normal message to simulate the webview closing after a user interaction. Let’s do that. I want the form to have a confirmation step. So I go back to SketchApp, clone the previous group, and create another one that shows a confirmation step. It looks like this:
So now, in Botsociety, I add another webview just after the first one. This time I upload the export of the confirmation page. This is what the Facebook webview it looks like in Botsociety:
I’ll also a normal thank you message afterward, sent by the bot inside the chat:
3. Preview, iterate
If now I click play I will be able to see an instant and complete preview of the final user experience. This is what my AwardBot design looks like:
I can now iterate on the final user experience and assure that it is compelling and easy to use. I will probably have to add more flows and come up with a complete design before jumping into development.
I hope you liked this tutorial! If you have questions, please ask them in the comments below. You can sign up for Botsociety here
Also published on Medium.