How To Put Click to Call On Your Website-Introduction
This question has cropped up a number of times in the forum and I felt it was time to address it more fully and present an open-source solution.We’ll also be using AJAX to control an active “presence” system for the on screen button.
Let’s have a look at some click-to-call background first and for the moment I’m going to assume that you’re some kind of ecommerce webmaster using Asterisk or TrixBox for your VoIP PBX. You may be an online store or site providing an online service. Whether product or service, you may be thinking that if you could get your visitor on the telephone, you’ll convert the sale or convince them they need your service. This is really the only consideration when analysing click to call as a commercial tool – will you generate more sales.
Here are some numbers* from a report which are worth considering:-
* a 22%-25% reduction in Website abandonment from pages with click-to-call services
* as much as a 100% increase in transaction conversions from click-to-call users compared with toll-free callers
* 88% of click-to-call users say they are more likely to contact a company that offers a click-to-call service than one that does not
I’m not talking here about telephone lead generation, which is something that works much like AdWords. As opposed to clicking through to a website, the user engages on the telephone. Google do have a program for this which they’re rolling out extremely slowly. It has taken two years to date. The Google program may interest you and be available in your country. You can check if it is here if you’re interested.
The real benefit of telephone lead generation is that it doesn’t require a website. But that’s out of scope here and not what this article is about.
This is also not what I call a “true” click to call system, this is a “click, give us your number and we’ll call you” type system. “Click to Call” has become a generic expression and the system described above probably should be called “Click to Speak”.
The click to callback type setup I’m describing here is similar to the commercial offerings from the likes of Estara. But I’m going to be talking about doing this in a completely open-source (free) environment, using a combination of Asterisk, AJAX and PHP.
If you want true click to call, using an embeded VoIP softclient within your page, you’ll need a widget.
So, you want to go ahead with this and put click to call buttons on your site and start seeing how it performs for you? There are a couple of immediate things to consider and we should look at some of the theories first.
Presence and Availability
Nothing would be more annoying to a site visitor than to see a click to call button, click it, and the phone just rings and rings. What’s critical therefore is some kind of presence management system.
There are three basic presence states with click to call – (1) you’re available, (2) you’re away, and (3) you’re there, but on the phone and already engaged. We can combine states (2) and (3) into one “away” state.
Visitors will sometimes land on a page and spend some time reading it – the “presence” indicator needs to be dynamically generated. Hence I’m using AJAX to allow a “real-time” presence update when a call is routed and answered (you’re “engaged”) or you’re “away” and unable to answer. We’ll do this in a very simple fashion to start with – if you’re away or engaged the button is going to disappear from the page, on the fly. This could be easily adapted to display a different button or alert the viewer in any way you choose that there’s been a change. For the usability reasons stated, it is important to do indicate presence somehow.
Security
You can’t just let any Tom, Dick or Harry onto your Asterisk box via the webserver. Nor can you allow any other webmaster put your button on someone elses site. So you need to ensure that the button will only display and operate on your pages, and you’ll ignore any calls to it from any other referrer.
The referrer field, part of the HTTP Header Specification, is not 100% reliable. Some browsers will not forward it to the server. In my experience, it’s about 95% reliable. You will need to assume 5% of calls or clicks on the click-to-call button are going to break. You can, however, detect that a header is invalid and send back a nice message.
You also need to restrict the call back number, assuming you do not want to pick up the cost of international calls to mobiles. Ian has done this within the Asterisk portion of code, allowing, in this example case, calls to the UK only. You’ll need to adapt this call plan as you see fit, and we can have some further discussion on doing that later in this thread.
The theory and code presented here should scale easily enough to a multiple person/call centre type arrangement. The theory and considerations are the important part. This warrants much further discussion and I invite you to that in this thread.
OK let’s get stuck in with some code. As this is likely to be adapated and improved, we’ll call this starting point the VoIP User Click To Call System 1.0 BETA.
If you’re not familiar with AJAX, you might want to read the starter guide here. There are plenty of additional AJAX resources on the web if you want to search around. We’re a VoIP forum and specific advice on AJAX should be sought elsewhere. But I will give a basic overview by way of comments within the code.
We need some way to store the 2 basic states of presence that we’ll be using. We’ll do that on the webserver, assuming, as should be the case, your webserver and Asterisk box are running on two different servers. Asterisk is going to talk to the webserver, to update the presence status flag, as and when calls are routed or something changes. We’ll drive the actual page the viewer sees with a 500ms Java timer, checking the presence status flag by calling a GET once every half a second. If you put something like this on a high traffic site, bear in mind the number of HTTP requests that will get generated by this timer and adjust the interval accordingly. Anything down to 2 or 3 seconds should be fine.
Now Lets dive into the topic more deeply and right some codes Step 1
