Build a Chatbot with Twilio Studio

Chatbots are a great way to help your users accomplish simple tasks in a friendly, conversational manner. Let’s look at how to build a simple flow that responds to incoming text messages and chats with your users to help them order a coffee.

 

Create Your Flow

We’ll start with a fresh Twilio Studio flow; log into your Twilio account and navigate to the Studio Dashboard, then tap the + icon to create a new flow. You can name your flow anything you like; we’re calling ours Barista Bot.

Barista Bot flow

You’ll notice that the canvas comes with a widget already in place -- that’s the Trigger widget, which kicks off our flow when the trigger we specify is fired. In this case, our trigger is going to be an incoming message, since we want users who text our number to reach the chatbot.

Incoming Message Trigger

 

Prompt User for Order

We’ll start by dragging a Send & Wait For Reply widget onto the canvas, and connecting it to the Incoming Message trigger by dragging the red dot to the grey dot in the corner of the new widget. We can use this widget to send an SMS to the user with a prompt to reply to. In this case, we’re going to ask the user what kind of coffee they’d like to order, and expect that they’ll reply with one of the options specified.

Order prompt

 


Split Based on Input

We want to make sure our user gets a coffee from our list, so we’ll need to use a Split Based On… widget to distinguish valid inputs from other messages. First, we’ll set the variable to test in the right sidebar. Find the Send & Wait For Reply widget in the dropdown, and select inbound.Body from the list to capture the reply to your prompt.Split order variable

Next, we’ll need to declare the choices we’re looking for in those responses -- latte, cappuccino, americano, cortado, and cold brew. Tap the red New at the bottom of the Split widget to reveal the Transition On… dropdown menu. Select Condition Matches to create a new Transition.

New match condition

In the right sidebar, find the new Transition that you just created, and select Matches Any Of from the dropdown. We’re going to set this value to latte, cappuccino, americano, cortado, cold brew to include all of our coffee options. Save the new transition and it will appear on the widget.

Coffee condition matches

Triggering Twilio Function

If the user enters something that the bot recognizes (one of our five drinks), we should send a request to our barista system so the order can be completed. The Twilio Function widget will help us do this; simply drag one of these widgets onto the canvas and connect it to the Transition you just created.

Create Barista Order Function Flow

Before we can configure our widget we need to create a Twilio Function. Go to the Manage Twilio Functions section of the Twilio Console and create a new Function with a blank template.

Create Barista Order Function Template

For now we will simply log our order here but you could write at this point to a database for example. Give it a name like "Barista Create Order" and a path such as "/create-order". Afterwards insert the following code in it:

exports.handler = function(context, event, callback) {
  console.log(event.drink);
  callback(null, 'success');
};

Make sure to save your Function and go back to the Function widget inside your Twilio Studio flow. Pick your Twilio Function in the Function URL dropdown menu in the right sidebar. You can also add a parameter to the request. Scroll down to the section for Function Parameters, and create a field called drink. The value can then be set to the same variable we’re checking in our split above: {{widgets.order_prompt.inbound.Body}} (where order_prompt matches the name of your initial prompt widget).

Function Configuration Widget

Once the request goes out to our barista API, we’re all set! Our user will get the coffee they ordered, all from a pretty simple interaction.

Human Handoff

But what if the user doesn’t enter one of our five coffee choices? We still want to help them out. Sometimes the best solution is for the chatbot to hand things off to a human. If the user enters something that isn’t on our list, let’s offer to give them a phone call so the barista can get the order directly. We’ll drag another Send & Wait For Reply widget onto the canvas, and this time connect it to the No Matches condition on our Split widget.

Split on Order to Call or Function Flow

 

 

For the message prompt, we’ll put “We want to make sure you get your coffee, even if we're not quite sure how you take it. We'll connect you to a barista directly - is now a good time to call?” Another Split widget will help us handle the user’s response here -- if they type “Y” or “yes” we can make the call to the barista. Let’s drag the widget onto the canvas and select the inbound.Body of our latest Send & Wait For Reply as the variable to test, then create our conditions.

Split on Call Choice

 

Make an Outgoing Call

From here, we can drag a Make Outgoing Call widget onto the canvas and connect it to our ‘yes’ condition. Studio will trigger an outbound call from the flow to the user so they can speak with a barista.Make outgoing call

Once the user picks up, we’ll use a Say/Play widget to announce that we’re connecting them to the barista, and then a Connect Call To widget to connect them once the message is finished playing. Drag these widgets onto the canvas and connect the dots.

Connect call to barista

The Finished Product

The final state of the canvas is that we have our Trigger widget take an incoming message, connect to a Send & Wait For Reply widget, then to a Split Based On… widget, with transitions to either a Twilio Function (successful order) or another Send & Wait For Reply (unsuccessful order). This second Send & Wait For Reply connects to a Split Based On… widget, which ultimately leads to a Make Outgoing Call widget which calls the the user from the bot, a Say/Play which announces the connection, and a Connect Call To widget which connects the user to the barista by voice.

Barista Chat Flow

After we’ve saved and published the flow, the last thing to do is hook up our flow to a phone number! In the Twilio console, select Manage Numbers and choose the phone number that you would like to connect to your chatbot.

Manage Numbers

Scroll down to the section for Messaging, then select Studio Flow from the first dropdown and Barista Bot (or whatever you’ve named your flow) from the second dropdown. Click save, and you’re all set!

Set barista bot flow to Twilio number

 

Congratulations! You’ve made a chatbot that is smart enough to route a coffee order to a barista system, or to hand off to a human if things get tricky. What other chatbots will you build next?

Jennifer Aprahamian
Dominik Kundel
Brent Schooley
David Prothero

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.