Twilio is launching a new Console. Some screenshots on this page may show the Legacy Console and therefore may no longer be accurate. We are working to update all screenshots to reflect the new Console experience. Learn more about the new Console.
This Spark application uses Twilio to connect incoming phone calls to other phone numbers based on where the caller lives. When a user dials in, we look up some information based upon their assumed location and trigger actions inside our application.
Your business might use this functionality to automatically route your customers to a regional office or to direct callers to a survey after their interaction with customer service. Our sample application connects callers to the offices of their U.S. senators.
Communication can be a powerful force for change. We’ve seen civic engagement rise as tools for civic engagement become increasingly available to an internet-connected and mobile society. In November of 2016, Emily Ellsworth shared some tips and tricks for getting your Congressperson’s attention with one big takeaway: calling works.
To run this sample app yourself, download the code and follow the README instructions on Github.
Let’s get started!
You’ll need to get a voice-capable Twilio phone number if you don’t already have one.
We’ve provided a sample set of data that can be loaded into your local database for testing and development. In our dataset, we’ve mapped states to senators, and we’ve mapped the senators to a few Twilio phone numbers for testing rather than actual senator phone numbers. Please note: this data set will likely be out of date by the time you use it, so we recommend you roll your own if you want to get the application production-ready.
The last piece of the configuration puzzle is to create a webhook endpoint for our application to accept inbound calls. Once your database is configured and your app is up and running, go to the Twilio phone number you wish to use and configure the Voice URL to point to your application. In our sample code, the route is `/callcongress/welcome`.
We recommend using ngrok to expose your local development environment to Twilio.
Our Twilio number is now configured to send HTTP requests to the
/welcome endpoint on all incoming voice calls. This Twilio request arrives with some useful parameters. For our use case, we’re most concerned with
fromState, as it will help us make a best guess at our caller’s state of residence.
In order to welcome our caller and properly direct them to their senators’ offices, we need to build out a response with TwiML.
fromState parameter comes from the user’s phone rather than their actual geolocation, we want to make sure that we direct the caller to their state of residence. Let’s break down how we build out a response that both welcomes the caller and asks for confirmation of their state of residence.
Once Twilio gathers this information, it will POST the caller’s input to our route specified on the
action parameter so that we can better route the user through our application.
If for some reason the inbound request to Twilio doesn’t contain a
fromState value, we need to get a little more information from the caller before we proceed.
This code should look familiar to you. If we don’t detect a
fromState we utilize
<Gather> as we
<Say> a message that asks for the caller’s zip code. This time we accept 5 digits (the length of a zip code) and trigger a state lookup by zip code.
Now that we know our caller’s state of residence, we can look up their senators and forward the call to the appropriate phone number.
Similar to the previous route, we
<Say> a brief message to tell the caller that they’re being connected to a senator. Then, we
<Dial> the first senator, making sure to add an
action that will route the caller back to our application when the first call ends.
action attribute is great for redirecting a call in progress and is the backbone of our call forwarding use case.
However, it’s important to note that the
action will only execute after the dialed party (in our case, the caller’s senator) ends the call. Twilio will continue to forward the original caller but they must stay on the line throughout the entire process.
Once the first senator ends the call with our user, the caller is forwarded to their second state senator. Just as we did in the previous route, we’ll include an
action attribute that redirects the caller to a final bit of TwiML.
Once the call with the second senator ends our user will hear a short message thanking them for their call. We then end the call with
That’s it! You should be able to start your development server with ngrok, dial your Twilio number, and be routed to your senators!
But wait... this isn’t actually your senator’s phone number, remember? We seeded our sample application’s database with some placeholder phone numbers with lightweight TwiML endpoints, so there’s still some work to be done to flesh out this application before it’s production-ready.
If your production case matches our demo's, ProPublica’s API grants access to a wealth of government data, including senators’ states and phone numbers. You may find yourself inspired to build out even more functionality for your civically engaged users.
Whatever your use case, we hope you feel empowered to use what you've learned here to seamlessly forward your users' calls.
You might also enjoy these other tutorials:
Convert web traffic into phone calls with the click of a button.
Use Twilio powered warm transfers to help your agents dial in others in real time.
Did this help?
Thanks for checking out this tutorial. If you have any feedback to share with us, please reach out to us on Twitter and let us know what you’re building!