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.

Facebook webview first step

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:

Facebook webview design the interaction

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:

Facebook webview adding messages

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:

Messenger webview Sketch

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:

Facebook webview export

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:

Messenger webview export on Sketch

I’ll now get back to Botsociety and upload the PNG in the webview section. I then click add. This is the final result:

Facebook webview in Botsociety

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:

Messenger Preview design

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:

Messenger webview new message

I’ll also a normal thank you message afterward, sent by the bot inside the chat:

Messenger webview preview

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:

Facebook webview preview on Botsociety

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.

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…