Before we dive in, if you have not read our post on utilizing the Twilio Lookup Tool powered by Whitepages Pro, take a moment to read that now. It will provide you with an overview of your Twilio Account Setup and the installation of the Whitepages Pro Add-ons, and provides a couple environmental variables that you will need later.
Here’s what we will cover is this post:
- We will begin with a quick stop that will place the source code into your GitHub repository and linking Heroku to that repository for easy server deployment.
- Next, Pusher will be introduced and configured to be very effective at server / client communications.
- Then we will head to Twilio and create the app and phone number which we will link with Heroku.
- The final stop will be back at Heroku to set the environmental variables and, the fun part, deploy the web app.
Pouring the Foundation
Okay. Ready to get started? Great. Let’s move. Make sure you have the Whitepages Pro Caller Identification Add-on installed in Twilio and ensure the ‘Incoming Voice Call’ option is checked on the Add-on configuration screen. Hint: it’s above the ‘Lookup’ option. Next, navigate back to the Twilio Console Dashboard (the button that looks like a home in the ribbon). Keep this tab open. You will return to it later. At this point, you will need to get the code and place it in your own GitHub repository. There is plenty of existing documentation on setting up a repository so we won’t touch on that in this post.
After you have loaded the demo code in your repository, head to Heroku. Since this is all about keeping things as simple as possible, using a hosting service is a must – and Heroku does a fantastic job as a web hosting service. Once you land on your dashboard, hit ‘Create a New App.’ Then head to the ‘Deploy’ tab. For the deployment method, select GitHub and enter your account information and choose the repository containing the demo code. The GitHub button should now have a green checkmark indicating it’s connected. Scroll down to see a ‘Manual Deploy’ section which will start the app from a specific GitHub branch. This is where you will spin up the app at the end of this walkthrough. Now navigate to the ‘Settings’ tab and make note of the Heroku domain. You will need that shortly.
Always Communicate Efficiently
Alright, back to Twilio’s Console dashboard. You kept that open right? Good. You will need to toggle between two different tabs on this page. First, scroll down and click on ‘Phone Numbers.’ There is no getting around this. You will need a phone number for this to work. Twilio allows you to test one phone number provided by them. After obtaining the phone number, head to the Phone Numbers Dashboard and click on your shiny, new number to configure it. Under ‘Voice,’ you’ll place your Heroku domain followed by an ‘/inbound’ in the ‘A Call Comes In’ field. Make note of your number and click ‘Save’.
Gathering the Remaining Ingredients
Just think: you are moments away from having a working web app that will connect to incoming calls, provide caller ID details from Whitepages Pro, and allow interaction with the call in Twilio’s client. In the time it would have taken you to make a delicious grilled sandwich, you will have a working in-browser soft phone with caller ID! Not a bad use of your time!
Okay. Back to the Twilio Console Dashboard. Scroll down and click on ‘Programmable Voice’. On the left, find and click on ‘Tools.’ Guess what? Yep. You have to create another app. Name it and under ‘Voice,’ place the Heroku domain (no /inbound) and create the App. Now, make note of the app’s SID. Great! You now have all the ingredients. It’s time to bring them together.
Putting it All Together
So let’s review the ingredients:
- twilio_caller_id: The phone number obtained from Twilio. Can be formatted like (***) ***-****.
- twilio_account_sid: Previously obtained. See the first blog post.
- twilio_auth_token: Previously obtained. See the first blog post.
- twilio_app_id: Just obtained from Twilio.
- pusher_app_id: Previously obtained from Pusher or Heroku Pusher addon.
- pusher_key: Previously obtained from Pusher or Heroku Pusher addon.
- pusher_secret: Previously obtained from Pusher or Heroku Pusher addon.
Head to Heroku’s dashboard and click on ‘Settings.’ Next click on ‘Reveal Config Vars.’ Using the above list, place each one after the other in the key section while filling in their corresponding values.
Congrats! You are ready to deploy the server and start your new web app! Navigate to the ‘Deploy’ tab and under ‘Manual Deploy,’ select the GitHub branch in which the source code resides and then click ‘Deploy Branch’. After a few seconds, click the ‘View’ button that appears. You’ll be taken to the web app. What are you waiting for?! Dial that demo number! Now where you go from here is completely up to you. Maybe it’s time for a grilled sandwich?