Build a Curbside Notification System with Twilio Studio and Functions

April 29, 2020
Written by
Reviewed by
Alan Klein
Twilion
Paul Kamp
Twilion

Studio Curbside Notifications hero

Some businesses have found a need to send an SMS once an order is created in their system. They would like this notification to be responded to in order to carry out a set of actions such as to notify someone to deliver the order.

In this blog post we’ll show you how to create a notification workflow that can achieve this goal. We will enable an example business to notify a runner to deliver orders to customers in the business parking lot when they arrive on-site.

Prerequisites

To get started with the project you will need the following:

Purchase a Twilio Phone Number

If you haven’t already done so, go to twilio.com and sign up for a free account or log in to your existing account.

In order to send and receive messages to our Twilio account we will need to buy a phone number

In this example we’re interested in receiving and sending messages from a California number which needs SMS capabilities.

Buy a number with Twilio

After viewing the phone number selection, select “Buy” and follow the steps to purchase the number. This will take you to the phone number’s page which we will reference later.

Steps to buy a Twilio number

Set up a Studio Flow

Twilio Studio is a low code tool we can use to create communication workflows that can be triggered from an API Call, Incoming Voice Call, or Incoming Message. Pairing Studio with Twilio serverless Functions allows us to expand on this workflow as needed.

To get started we need to open Studio and create a new flow.

First head to the Studio dashboard. Once you get to the Studio Dashboard, click “Create a flow”:


Create a Studio flow


Name your flow. Here we named it “Curbside Studio.”

Name a Studio Flow

For this example we will be starting a flow from Scratch. However there are many template flows one can start a project from.


Start a new Studio Flow from scratch
  • On the left we can see options for Editor, Logs, and Revision History.
  • In the center we see the start of the Studio flow called the “Trigger”.
  • On the right is the Widget Library which contains all the available channels and options to implement in our flow. Today we are focusing on Messaging (and will end using a Function. )

Studio triggers on the canvas


Create an API Studio Flow

Now that we have set the studio flow up we will start with the first step of our flow.
For this example, we want to kick the order notification off when an order is created. From there, we can fire off via an API call.

To create this notification, we need to start by using the “Send Message” widget under Messaging. Click and Drag the widget to the studio flow. We then want to Click and Drag from the REST API trigger to our new widget. Click on the “Send Message” widget to rename it and add the message body you would like sent. For example, you could use “Hello! Your order is being created and will be ready in one hour. Please reply with ‘I am here’ when you’re outside.”.

After you are done setting the body, click “Save” to save the widget.

Adding a Send Message Widget


After you save the widget click “Publish” to publish the Studio flow. You will notice a green notification saying “Flow is up-to-date” after the flow has been published.


Publish a Flow




Once the studio flow is published click on the “Trigger” widget and on the right copy the string called “REST API URL”.

Studio REST API Url


Test Twilio Studio with Postman

To test our current studio flow we need to trigger our flow via an API call. In order to simulate this call we will be using Postman.

To start we need to click the “+” tab  on the top left of the Postman window

Set up Postman

We then need to change our request type to POST and paste the REST API URL copied from our studio flow.

Changing the Request URL in Postman

Then we need to click the “Authorization” tab and then choose the “Basic Auth” option

Setting Basic Auth in Postman

We then need to head back to the Twilio Console to grab our username and password, which map to our Account SID and Auth Token.

In the Twilio console window, click the home button on the left of the screen. Then copy Account SID, and paste it in the username input in Postman. Then, copy the Auth Token and paste it as our password in the Postman window.

Getting the Account SID and Auth Token from the Twilio console

Pasting Twilio credentials into Postman

Our last Postman configuration step is to enter the correct phone numbers. We need one to send “To” and one to send “From”.

In your Postman window, click the “Body” tab. First, set the body to use the “form-data” format.

In the first line we will add “To” as our key and in value we will add a test number to send the text to, here we used a personal phone number. (Be sure to enter it in E.164 format). Next, add the “From” number – this is the Twilio phone number we purchased earlier in the tutorial.

Copying an active Twilio number

Setting "To" and "From" number in Postman for Twilio

Once all this is configured press “Send” to fire off the API request and see our “Send Message” widget deliver a message to the number we specified.

Testing a Send Message trigger

Example SMS from a curbside order pickup widget in Twilio Studio

Now we have created the first leg of our Studio flow!

Create an incoming message Studio flow

Now we are able to send a notification using an API request. Next, we want the end user to be able to respond to that message and provide the business with some information.

Let’s move back into our Studio flow now.

First, we will want to add the “Split Based On” widget by dragging it to the studio flow under the “Incoming Message” trigger of our studio flow. We will then connect the Incoming message trigger to the Split Based On widget by dragging and connecting. We will use this widget to control our SMS Studio Flow based on certain criteria – in this case to respond to a message that says “I am here”.

To set this up, next click on the new “Split Based On” widget. Then we can rename the widget (I called mine “HereSplit”) and specify the variable to use to split. In our case we want to read the variable corresponding to the Body of the incoming message trigger, trigger.message.Body.

Adding a Split Based On widget to Twilio Studio



After this is set up, we want to specify the transition to split our studio flow. On the top right of the “Split Based On” widget, click “Transitions”.

On the “Transitions” tab we need to add a new condition to split on, click the red “+” sign. For our simple example, we want to read when someone messages back “I am here”. So we will select the “Contains” operator and type our string of “am here”.

Adding Transitions to a Split Based On widget



If we do see that message, we will then want to select the next widget in our Studio flow.

Setting a transition widget in Studio

For our example, we want to acknowledge that the customer is on location and ask about their vehicle so our order runner can look out for it (another alternative method is to have parking lot markings with numbers and ask the customer to just text that number). To do this we will use the “Send & Wait for Reply” widget to send our acknowledgement SMS and wait for our customer to reply with their vehicle description.

Drag a “Send and Reply” widget to the canvas, and hook up a transition from the “Split Based On” widget. I named mine “VehicleDescription”. Add a suitable message too, such as “Great! We'll run your order out. What does your vehicle look like?”.

Add a Send & Reply widget to the Studio canvas

After we set up our “Send & Wait for Reply” widget, we will use a Function to inform the Store and then send one last SMS to let our customer know that someone will be out with their order shortly.

Click the Transitions tab, under “IF REPLY”, select “Open Widget Library” and drag a new “Run Function” widget

Add a Run Function widget to the Studio canvas

Send data from Twilio Studio to Functions

Based on our example, we have collected a vehicle description from our customer, but we have not yet sent a message to someone in the store letting them know our customer is here and what vehicle they are driving.

In order to send the message to the store, we are going to use the “Run Function” widget to run our Twilio Function. Using a function also allows us a certain level of freedom outside of our Studio flow for any future development.

For now, our Function will grab the customer’s phone number and their vehicle description and we will send that information to our order runner’s phone.

Continuing our work, connect the “Run Function” widget to the “Reply” from the “Vehicle Description” widget.

Adding a Run Function widget and transition

Rename your “Run Function” widget tp “OrderRunner”, and press “Save”. Then click “Create” in the FUNCTION URL box.
This will open another tab to the Twilio Functions dashboard.

Dropdown for a Twilio Function inside Studio

When you get to the Twilio Functions Dashboard, click the “Create a Function” button. If instead you already have other Functions, click the red plus (“+”) button.

Creating a new Twilio Function

This will open up a window with many quickstart template functions. For this tutorial we will be using the “Blank” template. Select “Blank” and then click “Create”.

Choosing a blank template for a Twilio Function

Once you click create you’ll be taken to the function page where we can name our function as well as name the path for calling  the function. I used “OrderRunner” as the function name, with a path of /order.

After this is done click “Save” and return to the Studio flow page.

Saving a blank Twilio Function



On the Studio flow page, click the function widget. Here we can select the function we just saved under “Function URL” (OrderRunner if you followed my lead). After that, we will create the parameters from our Studio flow that we would like to pass on to the function.

Three key pieces of information we will need to pass are:
  • the Vehicle Description that was gathered in the previous widget
  • the Customer’s Phone Number which messaged in
  • the Twilio Number that we are sending messages from

To create our first parameter we will need to click the “+” sign next to Function Parameters.

Adding a parameter to Twilio Studio Function calls

Then we can name this parameter “vehicleDescription” and set it to the value we grab from the “VehicleDescription” widget. We set it to  {{widgets.VehicleDescription.inbound.Body}}  and then press “Save”. Note we want the “inbound.Body” not “outbound.Body”. This will also be different based on what you named your widget.

To add the second parameter, click “Save”, then click Function Parameters “Add”  

Adding a second parameter to a Studio Function widget

We next need to grab the customer’s number. We can get this value from the trigger widget by setting the key to customerNumber and the parameter to {{trigger.message.From}}.

Passing incoming text message number from Twilio Studio to a Function

Very similar to the customer number, we need to grab the Twilio number which receives the message. Set the key to twilioNumber and the parameter to {{trigger.message.To}}.

Passing a receiving number to a Twilio Function from Studio

After this is saved, we will have the three key pieces we need to pass to our function. We can now head back to the Functions tab and on the left click “Configure”.

On the “Configure” page we want to click the checkbox
“Enable ACCOUNT_SID and AUTH_TOKEN” so that our account information is usable for the Twilio Function.

Next, we want to set an environmental variable that will always be accessible to our function. Based on our order example, this will be the number of the person who will run the order out to our customer. Click the “+” sign under “Environment Variables” to add a new variable runnerNumber with the value of the personal number we used earlier to test in Postman.

Once this is done, click “Save” on the bottom of the page.

Save a new runner number for curbside delivery notifications

Now back on our functions page, we will use the following code to grab the variables from our Studio flow and message our runner.
exports.handler = function(context, event, callback) {
    
    //This is the customerNumber variable we set in our Studio Flow.
    let customerNumber = event.customerNumber;
    
    //variable that could be set with an order number from a crm. 

    //orderNumber = Get Request for the Order Number matching the customerNumber
    let orderNumber = '#####';
    

    context.getTwilioClient().messages.create({
        //variable from the Functions environmental variables
        to: context.runnerNumber,
        
        //twilioNumber variable from our Studio Flow
        from: event.twilioNumber,
        
        //message body to be sent to our Order Runner's Phone
        body: 'Order '+orderNumber+' is here in a '+event.vehicleDescription
        
      }).then(msg => {
        console.log(event);
        callback(null, msg.sid);
      }).catch(err => callback(err));
};

Once this code is in we can click save and head back to the studio flow.

Add the curbside pickup notification

If our function sends a message to the order runner successfully, we want to send a message to the customer stating that someone will be out shortly.

To do this we need to add a “Send Message” widget under our function widget and connect it to the “Success” transition. We can add a Widget Name and Message body then click “Save”.

Add a Thank You message widget to the Studio canvas

There is one last widget we should add – a catch-all message if we don’t understand a response. To do this, we can add a “Send Message” widget under our Split Widget and connect it to the “No Condition” transition. We can then name the widget and add a message body. I called mine “NoMatch” and provided a number to call. You could also say you “don’t understand” and provide valid responses.

Catch-all message sending widget in Studio

After we add the last widget we can click “Publish” to publish the studio flow.

Adding a helpful message to a misunderstood command in Studio

Once we publish the Studio flow, we need to trigger the flow upon messages our Twilio phone number.

To do this navigate back to the numbers page. Then, click the number you purchased for this studio flow.

Choose the Studio flow number from the incoming numbers page

Once in the number page, scroll down to the “Messaging” Section. We want to change the action when a message is incoming to our number, which is to send it to our Studio flow.


Once this is set we can click “Save”.

Saving a Twilio number callback

Now our Studio flow is ready to test.

Test the workflow

We open our API call from earlier in Postman, hit “Send” on the top right.

Test the Studio workflow trigger

We will then see the message come into our personal phone number. We can then reply with “I am here” and see the immediate response asking for our vehicle description.

Replying to the curbside delivery notification

Now, respond with a Vehicle Description:

Curbside delivery notification

Once we send the vehicle description we will see the message sent to the order runner.


Order number sent to a phone for curbside running

That completes the Studio Workflow!

Test the error path

  1. Send an API request from Postman.
  2. Receive the message on the phone.  
  3. Reply with something other than “I am here”

You should see the No Condition Match message come into play. We can expand on this use case by trying to find recurring matches, such as “is my order ready?” and creating new flows from it. 

Here are a few suggestions on how to extend what we have just built:

  • Create more flows based on the Split Widget to improve the customer experience.
    • “Where is my order”
    • “I need to change order”
    • “Cancel Order”
  • Pull an order number into the Twilio Function from a database via an API request
  • Use Twilio Autopilot to intelligently read the message and route to the correct flow



Catch-all message testing

Conclusion: Building a Curbside Notification System with Twilio Studio and Functions

In this blog post, you have learned how to use Twilio Studio, Twilio Functions, and Twilio Messaging in order to create a simple workflow to send a notification and have the end user respond to the notification. That message then can get passed to an order runner with context included.

If your organization would like more guidance on how to build solutions or would like to partner together on your work addressing the COVID-19 outbreak, we’re here to help. Get in touch through this link.

Sabeel Siddiqi is a Solutions Engineer at Twilio. He lives in Atlanta, GA. Aside from being an amatuer chef in his kitchen, he enjoys breaking down challenges and building up solutions with customers. He can be reached at sasiddiqi [at] twilio.com

Additional resources

The following reference resources will provide you with in-depth information on some of the topics mentioned in this post