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

 

Send HTTP Request

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 HTTP Request widget will help us do this; simply drag one of these widgets onto the canvas and connect it to the Transition you just created.

HTTP Request to Barista

Set the request type to POST, and enter your endpoint as the Request URL (in this sample, we’re using http://example.com/orders, but you’ll have something different here). You can also add a parameter to the order, which we’ll do in the right sidebar. Scroll down to the section for HTTP 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). You can also format the Request Body however best suits your API, and customize the Request Timeout.

Coffee HTTP Request

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.

Ask to Call

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 an HTTP Request (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 chatbot 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
David Prothero
Brent Schooley

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.