Build a Chatbot with Twilio Studio

To complete this tutorial, you will need to complete the following prerequisites. You can skip ahead to Create your Flow if you've already completed these tasks.

• Sign up for a Twilio account — you can create a free account if you don't have one already.
• Purchase a Twilio phone number. Learn how to purchase a phone number with the Twilio documentation. Please note that the number purchasing process varies by region.
• Some familiarity with Twilio Functions.

You'll create a Twilio Studio Flow from Twilio's starter template in this tutorial. By the end, you'll understand how to construct a chatbot with minimal building blocks in place. You can also use the Messaging Chatbot template to begin with most of the pieces already in place.

1. Log into your Twilio account and navigate to the Studio Dashboard.
2. Click Create a flow.
3. A modal will display where you can name your flow — this tutorial will use "Barista Bot."
4. Select Next.
5. The modal will load several template options. Each template provides a different foundation of building blocks.
6. Select Start from scratch to follow along with the rest of this tutorial. You can also select Messaging Chatbot to start with most of the pieces already on your Canvas and connected to one another.

Expand image

Once the Studio Flow is created, you'll see a Canvas with a Trigger Widget already in place. This Widget starts your Flow when it's triggered by an event that you specify. In this case, you want to receive SMS messages from customers, so you will trigger the Flow with an incoming message. You will add more Widgets throughout this tutorial by dragging them from the Widget Library on the right side of the Canvas.

Expand image

When your bot receives a message, you will need to reply, prompting the customer for a coffee order.

1. Start by dragging a Send & Wait for Reply Widget onto the Canvas from the Widget Library.
2. Connect it to the Trigger (Start) Widget by dragging the red dot at the bottom of Incoming Call Transition to the grey dot at the corner of the new Send & Wait for Reply Widget.

You can use this Send & Wait for Reply Widget to deliver an SMS to the user. In this case, you will ask the user what kind of coffee they want to order. You can expect the customer to reply with one of the options you specify.

1. Click the Send & Wait for Reply Widget on the Canvas and select the Widget's Config tab.
2. You can name the Widget anything you like — this tutorial will use order_prompt
3. In the Widget's Message Body, add a friendly response that will be sent to the customer once your Flow is triggered — see the sample text below.
4. You can leave the remaining Widget fields empty or set to their default values and click Save.

Sample Message Body text:

Welcome to our automated ordering system. Please reply with one of the following: latte, cappuccino, americano, cortado, or cold brew.

Expand image

Your Flow is now prepared to reply to an inbound message and wait for a response. Once a response is received, you will need to take action based on its content. You can use a Split Based On... Widget to handle this next step.

The Split Based On… Widget allows you to distinguish among input (the customer's response, no response, and errors). It does this by setting a variable that you can test the input against.

1. Drag a Split Based On... Widget to the Canvas.
2. Connect the Send & Wait for Reply Widget to the Split Based On... Widget by dragging the grey dot at the bottom of Send & Wait for Reply Widget's Reply to the grey dot at the corner of the new Split Based On... Widget.
3. Click on the Split Based On... Widget and select the Config tab.
4. You can now name the Widget — this tutorial will use split_order.
5. To set a variable to test input against, select order_prompt > inbound.Body from the Variable to Test dropdown menu. This variable will contain the message body text sent by the customer.

Expand image

Next, you need to declare the choices you're looking for in the customer's response — latte, cappuccino, americano, cortado, and cold brew.

1. Click the red New button at the bottom of the Split Based On... Widget to reveal the Widget's Transition On... dropdown menu. You can alternatively select the Transitions tab after clicking on the Widget.
2. Select Condition Matches to create a new Transition.
3. From the Widget's Transitions tab, find the new Transition that you just created. It will be under the heading If Value Equal_To.
4. Select Matches Any Of from the first dropdown menu. You can now set the values you want to match from the customer's response — latte, cappuccino, americano, cortado, and cold brew.
5. Save the new Transition and it will appear on the Widget.

Variable Matches Any Of values

latte, cappuccino, americano, cortado, cold brew

Expand image

If the user responds with something that the bot recognizes (one of your five drinks), you should send a request to the barista system to complete the order. You can use a Run Function Widget to do this.

Twilio Functions is a serverless environment that allows you to write Twilio applications without managing infrastructure. Twilio Functions are perfect for event-driven applications like the Barista Bot.

1. Drag a Run Function Widget onto the Canvas. This Widget is available in the Widget Library from Tools & Execute Code > Run Function.
2. Click on the Run Function Widget to configure it. You can name it anything you like — this tutorial will use request_barista.
3. Connect the condition you just set in your Split Based On... Widget to your Run Function Widget.

Before you can finish configuring your widget, you must create a Twilio Function. Once created, you will have a URL to add to your Run Function Widget.

Expand image

1. To build a Twilio Function, navigate to the Twilio Functions section of the Twilio Console.
2. Click Create Service.
3. A modal will appear where you can name your Service. The name cannot be changed after you create the Service. You can name the Service anything you like — this tutorial will use Tutorial.
4. Click Next. You will be taken to the Functions interface.
5. Click Add + at the top of the Function's page to add a Function to your environment.
6. Add a path for the Function. You can make the path anything you like — this tutorial uses /barista-bot
7. Some example code will be placed in the file editor. This editor is where you will place the code sample below.
8. With your code in place, click Save and select Copy URL from the bottom of the code editor window.
9. Select Deploy All to make your function live. Your Studio Flow will now be able to call the Function.

You can now return to your Studio Flow.

For this tutorial, you will log the customers order with the Function using the following code sample. If you are handling a drink order, you should call another service or write to a database from your Function at this point.

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

Expand image

Make sure to save your Function and go back to the Function widget inside your Twilio Studio flow. Select the Service where you created the Function, select ui for the Environment, and choose the barista-bot Function.

You can also add a parameter to the request which is just a value that will be sent to the Function. 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).

Expand image

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

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 Condition Matches transition on our split_order widget.

Expand image

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 Based On... 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 Liquid variable of our latest Send & Wait For Reply as the variable to test, then create our conditions.

Expand image

From here, we can drag a Make Outgoing Call Widget onto the Canvas and connect it to our 'y, yes' condition. Studio will trigger an outbound call from the Flow to the user so they can speak with a barista.

Expand image

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.

Expand image

The final state of the Canvas is that we have our Trigger (Start) 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 that calls the user from the bot, a Say/Play Widget that announces the connection, and a Connect Call To Widget which connects the user to the barista by voice.

Expand image

Once you're happy with your Flow and you've published all changes, you can connect it to a Twilio Number so people can start interacting with it.

Navigate to the Active Numbers section of the Twilio Console and click on the number you'd like to connect to the Flow. (If you do not have any phone numbers, you can purchase one from the Console.)

After clicking on the number, you will see its configuration menu where you can connect the number to your Studio Flow.

To trigger a Studio Flow with an Incoming Message, scroll down to the Messaging section in the configuration menu. Under Configure with Other Handlers, select the dropdown option "Webhook, TwiML Bin, Function, Studio Flow, Proxy Service". Then, under A Message Comes In, select the dropdown option "Studio Flow". You'll see another dropdown menu appear where you can select the Studio Flow you'd like to connect to when a message comes in to this number.

Expand image

Choose the Flow you'd like to connect the number to, and then press Save to save these changes. Your Flow is now connected to your 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?