Article

How to Build a Caller ID Web App Powered by Whitepages Pro using Twilio’s Javascript Client

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.

In this post, we will walk through the development of your very own Caller ID Web App using Whitepages Pro data and the Twilio Javascript Client. Pretty fancy! The best part about this is that you won’t have to write a single line of code as Twilio and Whitepages Pro have provided it for you. Your app will source the caller’s identity information directly from the inbound number that Twilio sends to the server. Why is this cool? Well if you used Twilio’s Lookup tool to do this, you would make another API call to get the information which was already available to the server. So inefficient! If you appreciate efficiency (and who doesn’t?) keep reading!

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. Github Whitepages Pro 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

With the demo code in your repository and Heroku linked, you will need the final piece of the puzzle: a web socket. In the spirit of keeping things simple, we suggest another fantastic service to help with the task of writing a web socket. Why reinvent the wheel when Pusher has perfected it? Get over there and set that up! Click on ‘Your Apps’ -> ‘Create New App’ -> Keep the cluster set as mt1 (or dig into the documentation for other options) -> Front-end: Vanilla Javascript, Back-end: Ruby -> ‘Create My App’. Github Whitepages Pro This will navigate you to the Pusher app console. Head to the ‘App keys’ tab and take note of the three required credentials: app_id, key, and secret.

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’.

Github Whitepages Pro

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.

Config Variables

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?

Happy Calling!

Thanks for reading! You might be interested in these posts, too: