Playground

How I built my e-commerce chatbot

By

The first time I saw a computer was in the '80s at a friend's house. Probably inspired by the amazing WarGames movie, my first instinct was to use natural language to communicate with the computer. If you saw and remember this movie, David Lightman (Matthew Broderick) is a high school student and hacker that accidentally connects to a NORAD supercomputer, the WOPR (War Operation Plan Response). The computer, tied into the nuclear weapons control system and unable to tell the difference between simulation and reality, attempts to start World War III. Here's an excerpt from the first dialogue.

  • Computer: Shall we play a game?
  • David Lightman: Love to. How about Global Thermonuclear War?
  • Computer: Wouldn't you prefer a nice game of chess?
  • David Lightman: Later. Let's play Global Thermonuclear War.
  • Computer: Fine.

Obviously, this isn't the kind of dialog you usually have with a computer, especially if we take into account that we were in the early days of computing. For the computer to interpret this dialog, it would need a complex analysis of the user input, and chatbots also need this intelligence.

You can make a bullet proof chat bot, by defining one or more answers for all the expected inputs and a generic answer for the unexpected ones, but this way the bot will seem too much limited and less captivating. Artificial inteligence (AI) is the key for a comprehensive bot that talks to you almost like humans do.

Just for fun, I developed a WarGames chatbot on Chatfuel, one of the multiple Messenger chatbot building platforms you can find today. You can try this bot here or see the video below, but be aware it's pretty limited. I only tried to reproduce the movie dialog like a chatbot would do, so it only expects precise input from the user.

This wasn't my first experience with Chatfuel. I find it so easy to use and at the same time so powerful, it's surprising what you can do in such a short time, but I wanted a real challenge. Chatbots are very popular and you can find hundreds of articles explaining how to build one, the advantages and disadvantages of this channel, but the truth is that - to my knowledge - it's very difficult to find real examples of chatbots that work! You see animated GIFs, vídeos, images but only a few good examples with good interaction. So I decided to create my own chatbot demo (link at the end of this article).

 

The project

My initial goal was to create a pizza shop bot, where I could see the pizzas menu, add pizzas and drinks to the basket, and checkout my order. But, with the evolution of the bot, I felt enthusiastic and kept adding more features until I was satisfied.

The first approach to this project was to draw the full experience flow on Botmock. The editor is a bit limited but meets the needs. The free version allows the creation of one project, so I draw all the screens, dialogs and interactions. To be honest, the image below shows the final flow. The first one was much more basic, but it's always a good start to help you see the "big picture". You can skip this step, but that will lead you to frequent rework of parts of the experience, which is very frustrating.

Looking at the final flow I'm surprised how complex it looks, but when you use the bot it's very simple. This apparent complexity has one reason. If you look closely, there aren't many dialogues, but they are all connected. This way, I follow one of the golden rules of bot building:

Give always, at least, one way out to the user, or you'll lose him.

The main path of the user on my bot is fairly controlled. The user adds items (pizzas, drinks) to the basket, checkouts the order and returns to the beginning. The bot is also able to understand natural language input until some degree (I'll get back to this matter later), but if the user inputs something incomprehensible, the bot will return the main menu options:

 

The main menu

But let's start from the beginning. The first time you enter my pizza shop bot, you'll see the left image. Keep the welcome message simple and play with these elements:

  • An appealing image that helps the user understand the context of the bot.
  • A welcome message with the user first name is a good way to establish a connection with the user.
  • A menu with at least two options. If you only have one option to show, probably it's best to skip it and immediately show its content.
Tip: Don't throw lots of text and images on the welcome message. Remember it's a chat window and you're starting a conversation.

The client must have a pizza on the cart to be able to add a drink, so that option doesn't appear to new users. Also, obviously, he must have something on the cart to see the "View cart" choice.

As you'll see forward, the "Create a pizza" option is part of the pizza menu, but I think this is a core option for a pizza shop, that's why I have it on the main menu. Returning customers already know that option exists on the pizza menu, so it doesn't need to be on the main menu again (right image).

At all times, if the user gets lost, he can access the Messenger persistent menu and choose the "Menu" option. Also, writing "menu" or "help" will lead to the same menu.

 

The pizzas

One of the challenges of chatbots is when you want to show many options, like a list of products. For demo purposes, I didn't had this need, but if I had, I would have a menu with the categories and later it's content. So, my pizzas menu has 4 pizzas and an option to choose the ingredients for a custom pizza.

With each pizza, there's a description of the ingredients, its price (for large and medium sizes) and the pizza name (which is the call to action). Very straightforward.

To add a pizza to your cart you only need 3 simple steps: select the pizza, choose the size/crust and pick the desired amount. Much easier than the normal websites we use to buy pizzas, right? Afterward, you can view your cart or add a pizza/drink.

If you noticed, there's a quick reply for the amount, because you want to avoid the situation where your user has to select the Messenger input field, (eventually) pick up the numeric keyboard, insert the number and submit the answer. So, until the acceptable number of 3 units (which you could adapt to the average quantity of your business orders) you have a quick reply. If you need more you can press "More" and input the desired quantity.

If you choose "Create a pizza", the bot opens a page (webview) over the chat window. I think this is the best approach when you need to give the user multiple options at the same time. Building this kind of interaction with dialogues would mess up the shopping experience and the user could feel lost.

The screen is simple. Just select the toppings you want to add and press "Done". Like a webpage or app, it's important to maintain the consistency of the experience, so, after you press "Done" you're presented with the same options (size/crust and quantity) you see when selecting a normal pizza. The graphical coherence is also obtained by using the same color palette and a similar user interface.

 

The drinks

Pizzas rhyme with soft drinks, so I had to have this option on my bot. Again, only a few options, but enough for the proof of concept. The information of each drink follows the same logic of the pizzas (description, price, name). Since the vertical space of a bot is extremely valuable, the image of the can appears horizontally.

The beverage selection is even simpler. Pick up the one you like and choose the number of cans. This time the quick reply goes until 4 because I find it more likely to have an even number of people sharing a pizza than an odd number, but this is just me guessing.

 

Artificial intelligence

Chatfuel can trigger messaging blocks accordingly to user input. Like I explained before, "menu" and "help" will take the user to the main menu, but this concept is rather limited because it doesn't understand the intent and entities of the message. Although I was very satisfied with the menus navigation, I wanted my bot to have the ability to understand messages like "I want a pizza with bacon and mushrooms".

For that purpose I used Dialogflow. This service uses machine learning to understand the meaning of messages and has a free plan, so it seemed like a good solution. You start by defining the entities, in this case, @ingredients and @crust, and then give some examples of the intent.

On the Chatfuel side, you have a default message block, that is used whenever the bot doesn't understand the entry. Instead of showing a generic message, I collect the input and send it to the Dialogflow API, and, if the intent is identified, the API returns the ingredients and crust found on the message. Later I didn't use the crust entity because the user selects the crust and size on the quick reply, but I could if I wanted.

In practice, if you search "pizza with mushrooms and bacon", the bot will search the pizzas menu for a pizza with those ingredients and return that option (left image). But you don't need to write a full sentence. Writing "bacon and basil" with return the two pizzas that match (middle image). At the same time, with each search result, you'll find direct access to the pizzas menu (right image). This way, if you don't find what you want, you can always go back to that menu. Great, right?

So, what happens when you don't have a pizza with those ingredients? Once again, no dead end. A pleasant message is displayed and the customer gets immediate access to the pizzas menu (left image). If the user intent isn't recognized, the main menu is displayed (middle image). Did I mention that you can use the keyboard voice input to write messages (right image)? Try this method to search for your favorite pizza! It's awesome!

 

The cart

The cart is where you can see all the products added, manage quantities, remove items and view the total cost of the order. Using the same logic of the custom pizza, this functionality had to be on a webview.

The chat window is the main path for the user, and webviews are a great way to extend Messenger functionalities without taking the user from its path/goal.

One bit I'm very proud of is the way the bot stores the cart information. This information is stored on PHP session variables and associated with the chatfuel user id. This way, independently of the device you use to access the bot, the information is tied up to your Facebook user, meaning - for instance - you can start your order on your tablet and finish it on your smartphone!

 

Delivery and payment

And finally, the delivery. You've chosen your pizzas and beverages and want to receive them as quickly as possible. Don't worry. Pressing the "checkout button on the cart page will show you the option to find your location or insert your address. Using the built-in geolocation feature, the bot will find you and you only have to confirm your address. That's it!

Well... almost. To be true, the send location functionality isn't always accurate. That's why you have an option to insert your address. Also, with the first one, you can't input the floor number. Try it and if it fails, insert your address.

After the address confirmation, you'll receive the message that the order is on its way (left image). Just for testing purposes (you won't see it on the bot), created an account at Stripe to receive in-bot payments worldwide. The setup is quite simple and enables a buy option at Chatfuel, which opens a webview with a detailed description of the payment and several options (right image).

 

Technical requirements

These where the requirements to achieve the experience described above:

  • Botmock for the flow design
  • Chatfuel's bot-building platform
  • Dialogflow for artificial intelligence
  • Boostrap for the webview design
  • Stripe, if you live outside the U.S. and want payment options
  • A server-side language, like PHP for the API processing
  • A web hosting service with an SSL certificate

 

Final thoughts

I admit that I invested some time in this project until I was satisfied with the final result (and I still had some more ideas, like adding an order tracker and a quick order option, after you made the first one). Some Messenger functionalities lack proper instructions, so it's like a trial/error process. Also, we're in the early days of chatbot building and there's still a lot to explore and not much information about it.

From a user experience perspective, I find this channel quite exciting, because it has great potential and will certainly change the way we buy online. Building a bot reminds me of the minimalism of the "mobile first" approach for websites, where every element/content on the screen is really relevant for the experience. A few ideas are bubbling in my mind, so I'm sure this isn't my last experiment with chatbots.

If you're on the pizza selling business or other, and you're wondering if you should invest in a new shiny app or on a chatbot, keep in mind 1.3 billion users already have Facebook Messenger installed and, although the number of app downloads keeps rising worldwide, in the past year, on the U.S., the majority of users (51%) didn't download any apps in a month. You do the math...

I hope you enjoy it as much as I loved building it! :-)