Using Twilio Studio and Conversations with SMS
Time to read: 5 minutes
Communication is complicated. No matter what your business is, it’s important to meet people where they’re at and engage with them on the communication platforms they’re already using.
Twilio Conversations enables you to build unified spaces where users on different platforms can communicate with one another. Think of it like a video conference bridge, but for text-based communication.
Twilio Studio is a visual application builder that allows you to write conditional logic for handling messaging flows without writing any code.
In this post you’ll learn to integrate Studio and Conversations with a few steps of configuration and a small amount of code. Doing so unlocks a few use cases, such as:
- Access to the status callbacks so you can keep track of message delivery status
- Sending the entire chat transcript to a human operator
Prerequisites
- A free Twilio account - sign up for one here
- Buy a Twilio phone number with SMS capabilities
Introducing a few concepts
Many advanced Twilio messaging features are powered by what’s called a messaging service, and we’ll need one of those here. Messaging Services allow you to specify behavior for groups of numbers at a time. Most importantly for our purposes, they let you decide to wrap end user communication in a Conversation.
Conversations creates a service for you, which is called the Default Conversations Service. In this post we’ll configure your Twilio phone number to be associated with the Default Conversations Service, and to automatically create new Conversations when a new SMS message is sent to that number. When that Conversation is created, we’ll add a webhook that triggers a Twilio Function so we can add the Studio Flow to the Conversation, via what’s known as a conversation-scoped webhook.
End to end, it looks something like this:
If you’re confused, don’t worry! Follow along and we’ll explain the whole thing in more detail.
Create a Studio Flow
You’ll need a Studio Flow to test with. You can create a new one. Feel free to import the Free Puppy Hotline flow from the json below. Or you can use an existing Flow you’ve already created. The content of the Flow doesn’t matter too much for our purposes, as long as it can handle incoming messages so you can have a way to test things out.
To import this Flow, copy the code below and follow these instructions for importing Flows:
Building with Studio is pretty much the same whether you’re working with Conversations or plain old SMS. The only noticeable differences building Studio Flows for Conversations are:
flow.channel.address
will be the Conversation SID (CHxxxxxxxxx) instead of the Twilio phone number- the Trigger SID will be a Conversation Message SID (IMxxxxxxxxx) instead of an SMS message SID.
- Media URLs are not supported in Conversations-based Flows
Configuring Conversations for SMS
For each new Conversation created for a new SMS sender, that Conversation must be linked to the appropriate Studio Flow via the Conversation Scoped Webhook Resource.
First, configure Conversations to connect with Messaging Services. Flip the Locked toggle to Unlocked here so that you can handle inbound messages with Conversations. Don’t forget to click “Save” afterwards.
Configuring Messaging Services
Go to the Messaging Service page in the Twilio console to associate a Twilio number with the Default Conversations Messaging Service. Click on “Default Conversations Service.”
On the next screen, click “Add an Existing Number.” If you’ve played with Conversations before, you may already have some numbers configured (you’ll see them under Numbers in the left-hand nav). In that case, you can use the numbers you’ve already added.
You’ll see a pop up window with your Twilio numbers. Check the box next to the number you want to add, and then click “Add Selected.” If all goes well, you’ll see a little success message telling you the number was added.
Now we need to set the Messaging Service to automatically create a new Conversation for each new unique sender. From the page you were just on, click “Settings” on the left hand side.
Select the radio button that corresponds to “Autocreate A New Conversation” and click Save.
Hooking up Conversations with Studio
To dynamically generate the Conversations webhook when a new SMS comes in, let’s write a Twilio Function. You’ll need the SID of the Studio Flow you created earlier which can be found on the Studio Dashboard.
If you haven’t already, make sure you check the box here to enable ACCOUNT_SID
and AUTH_TOKEN
within Functions. Create a Twilio Function with the following code. Replace the configuration.flowSid
placeholder with the one you copied from your Studio Flow:
Make sure your Function is configured to use a version of the twilio
Node.js helper library that supports Conversations. We used version 3.39.5 here.
Copy the Function’s path since we’ll need it in a minute.
Next we’ll configure the Conversations webhooks. Head back to the Conversations dashboard.
Configure the Conversations Post-Event Webhook for onConversationAdded
. This event will fire for every new SMS sender when the Conversation is autocreated.
Paste the path of your Twilio Function into the post-event URL
box.
Test it out by sending a SMS to the phone number you configured earlier. It should trigger your Studio flow. 🎉
What’s even better, all of the messages you exchange in this Conversation get stored together in a single transcript that you can keep. See the section below on fetching a Twilio Conversations transcript.
Note that a new Conversation is only triggered for the first SMS message sent from a particular phone number. For debugging purposes, if you want to re-trigger the Studio flow by sending messages from the same phone number, you’ll need to delete existing Conversations. Here’s a Function to delete the most recently created conversation. You can hit this URL from your browser to execute the code, as long as you un-check the box that says “check for a valid Twilio signature.”
Accessing Studio SMS status callbacks
Normally in Studio, you cannot get all the SMS status callbacks because Studio overrides that setting.
By integrating Studio with Conversations for SMS, you can capture all outbound messaging status callbacks for messages sent via Studio’s message widgets (both Send Message and Send & Wait for Reply). These callbacks are useful if you want to monitor in real-time that your messages are being delivered, or take action if they’re not.
To receive those status updates, set the Status Callback URL in Outbound Settings to your own application:
For more information, check out our quickstart guide on how to handle status callbacks from within your application.
Fetching a Twilio Conversations transcript
One great thing about Conversations is that you have access to the entire chat history. You can then send that chat history to a real live person.
First, we’ll create a Function to print the chat history. Name your Function conversation-transcript
.
Instead of printing, you could pass along the transcript via email, or even send it to one of your applications.
Head back to your Studio Flow. Drag a Run Function
widget on to the canvas and connect it with your last message. Paste the Function URL into the widget. Select the conversation-transcript
in the Function URL drop down. You’ll want to pass the conversationSid
from Studio to your Function. Add a function parameter, where the key is conversationSid
and the value is {{ flow.channel.address }}
.
Now when you test out your Flow by sending another SMS to that phone number, you should see messages logged by the conversation-transcript
Function.
Initiating outbound Conversations with Studio
To initiate an outbound Flow with Conversations, you’ll need to start outside of Studio instead of using the Studio REST API widget. I recommend using the regular SMS API to send an initial message from the number you’ve configured for use with the Default Conversations Service following the above steps.
Next steps
If you’re curious about what else you can do with Conversations, we’ve got docs for that. Also, check out some cool things you can do with Studio such as:
- Build a conversational chatbot with Studio and Autopilot
- Designing an advanced scheduling IVR with Studio and Twilio Functions
Related Posts
Related Resources
Twilio Docs
From APIs to SDKs to sample apps
API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
Resource Center
The latest ebooks, industry reports, and webinars
Learn from customer engagement experts to improve your own communication.
Ahoy
Twilio's developer community hub
Best practices, code samples, and inspiration to build communications and digital engagement experiences.