Let’s be honest: traditional call centers have a terrible user experience.

You see something interesting on a website that you want more information about. Email takes too long, so that option is out of the question. What do you do? You search for a phone number (hidden in their contact page at the bottom in tiny text), place a phone call, give away all your details, and (eventually) you end up getting to a human who might be able to help you. In this day and age of technology, why can’t the website know what I’m looking at and put me in touch with a human just by clicking a link?

This solution to this does exist and it is called Click to Call.

Click To Call is a bit of a buzz at the moment, with big names like Twitter looking at ways to support ads and user engagement on their platform. Click To Call allows customers to click a link and start an in-browser voice call with a human. While that voice call is being established, contextual information about the customer (such as the item they are looking at, or their name / interests / Facebook likes) is passed over to the person handling the call, who can then provide a highly personalised experience. The customer doesn’t need to tell them their name, or the product / service they’re interested in: Click to Call does this all for you. It gets rid of the annoying parts of call centers and lets you get on with what’s important to you.

In this tutorial I’ll show you to build a Click to Call service, which with the advent of modern technologies such as Twilio Client and Pusher; we can create, complete with real-time updates, in less than a day.

What You’ll Learn

The steps required to create a Click To Call service for adverts on a website are few but include:

Setting up a Twilio Client web application with Python and Flask Using the Twilio Client JavaScript library Creating browser-to-browser voice calls through Twilio Client Passing contextual information about the chosen advert to your call center using Pusher.

We’ll be writing this step-by-step, but you can also find an example project at https://github.com/phalt/call-ads if you’d rather just read the source code.

In order to complete this tutorial you will first need:

A Twilio trial account, you can sign up for free and only takes a minute. A Pusher trial account so we can send real-time data about the items our users are clicking on.

Setting Up Twilio Client

Let’s start by creating a TwiML app. What is a TwiML app? It’s a reusable TwiML configuration that can be applied to Twilio phone numbers or TwiML applications. Each TwiML app has a unique SID which we use to generate security tokens for Twilio Client.

Head over to the apps page on your account and create a new app by clicking ‘Create TwiML App’:

We’re calling our TwiML App ‘Click to Call demo’ because we like being explicit rather than implicit. You’ll need to link the Voice Request URL to a URL on your website. We’ll hit save and this will generate an SID for the TwiML app which we will use later on, so keep it handy.

Getting Into Some Python Code

Now that we’ve generated a TwiML app and set its voice URL let’s start to write some code. Like in the Github example project I’ve made we’ll need to create a few functions in a file called app.py. The functions are named build_twilio_token, generate_voice_twiml, controller and index. We’ll explore what each one does below.

Generating Capability Tokens

Let’s start with the build_twilio_token function: