Click To Call software is somewhat of a buzz at the moment, especially with big brands like Skype implementing their own Click To Call solution. The rise of WebRTC has made Click To Call technology extremely easy to implement and has the potential to become a huge part of call centers’ call traffic.

WebRTC enables a person browsing the web to initiate a call to another web browser or, with a bit of work, to an actual phone number – all of that without ever leaving his computer! While the call is transmitted to the person handling it, contextual information about the client (like name, page browsed, items in cart) is also passed on. This gives the opportunity for a highly personalized experience.

In this tutorial, I will show you how to set up a Click To Call service for your business that can be accessed from your email signature in less than 15 minutes – thanks to Voxbone’s DIDs and WebRTC solution.

click2call2

What You’ll Learn

The steps you’ll be going through to set up the email signature Click To Call Service include:

  1. Setting up the Voxbone WebRTC servlet
  2. Using the Voxbone WebRTC Javacript library to handle the calls
  3. Passing information and context to customize the calling experience
  4. Deploying to Cloud PaaS like Heroku

This is a step-by-step guide but you can directly check out the source code here to follow along: https://github.com/voxbone/MailRTC

A demo is available here: http://mailrtc.herokuapp.com/email It uses a real test DID that I use. So, until I find a better solution, if I don’t answer don’t feel bad, if I do – be nice 🙂 And don’t forget to enable microphone and camera in your browser (and refresh the page if the call didn’t go through)!

In order to complete this tutorial you’ll need:

  1. A Voxbone account with a DID or test DID (WebRTC enabled), you can sign up for free
  2. A Voxbone WebRTC generated secret key

Setting up the Voxbone WebRTC Servlet

The servlet can be downloaded here: https://github.com/voxbone/webrtc-auth-servlet

In order to initially run it, you have to install Maven and Java locally, this will setup a tomcat server. (I installed Maven using Homebrew) and add your credentials to either the voxbone.properties file or web.xml file. Info on how to do it can be found here: https://github.com/voxbone/webrtc-auth-servlet#webrtc-auth-servlet

When that is done you can run the demo using the command:

mvn clean tomcat7:run

and open http://localhost:8080/demo in your browser.

What you have now running is a simplistic way to call your DIDs. Let’s now make some changes to tailor this to your email signature’s taste!

Changing the Root Folder

As you probably have realized, the demo runs on /demo folder. You might want a different root name or even no root name at all! For this, navigate to pom.xml file and change:

<!--Navigate to the path tag and change /demo to /whatever_you_want -->
<path>/whatever_you_want</path>
<!-- I used a simple ‘/' just so it can run on the root of the webpage I’ll set up. -->
<path>/</path>


Now open  http://localhost:8080/ and you should see the demo running the same again.

Creating the Signature Template and Passing the Number

The signature itself will play an important role as it will open the URL that hosts the app that directly launches the call with the number you passed.

Ok, Easy as 1,2,3:

1.  Create the HTML File (say, email-footer.html)

2.  Add a link to the host page (local for the testing phase) some tags and CSS (in he <head> if you want to)

<html>
    <head></head>
    <body>
        <div class="business-card">
            <a href="http://localhost:8080/">Click2Call</a>
        <div>
    </body>
</html>

3.  Add the Number that will be passed in the URL!

<html>
    <head></head>
    <body>
        <div class="business-card">
            <a href="http://localhost:8080/?number=3228082181">Click2Call</a>
        <div>
    </body>
</html>

Ok, 4. You actually need to place it in your email footer, here is a quick guide

Parse Through URL to Place Number In Input

Now we will implement a function that parses the URL to find the value of “number=“ and place it in the input. You can place this function in the init(); function so it does it as the body loads (as you can see in index.jsp, as <body> is rendered, init() is called).

/** Parse through Email footer url for Number value to call **/
function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

/** Now replace number value in input with parsed URL number value **/
var number = getURLParameter('number');
document.getElementById('number').value = '+'+number;

Disable the Number Input to Keep Number Unchange

We don’t want people to get things wrong here so we will disable the input field:

<input type='text' id='number' value='' disabled="disabled"/>

Call Launches Directly Onload

A few steps are required here to handle calls correctly. Take a look at:

voxbone.WebRTC.call(document.getElementById('number').value);

This cannot be called upon OnLoad, because authentication needs to happen first. Therefore we will have to find a way to delay the call itself.

1. Let’s create a new makeCall() function that will use voxbone.WebRTC.call() to call the input’s value

function makeCall(){
    window.clearTimeout(callTimer);
    $( "#dial" ).html('Dialing');
    voxbone.WebRTC.call(document.getElementById("number").value);
};

2. Now we will create a callTimer that will set an interval before calling that number, just so authentication can happen first.

//Let’s set var callTimer; before the makeCall() function.
var callTimer;
function makeCall(){
        window.clearTimeout(callTimer);
        $( "#dial" ).html('Dialing');
        voxbone.WebRTC.call(document.getElementById("number").value);
};
//Then, within init() add the setInterval so it started when <body> is rendered.

callTimer = window.setInterval(function(){makeCall()},1000);

3. The last thing we need to do is update the call button in index.jsp to call the makeCall() function when clicked on:

<!-- place a call using voxbone webrtc js lib -->
<input type='button' value='dial' onClick="makeCall();”/>

Now every time you refresh, or click on your email signature again, the call initiates when the page is loaded.

A Bit of Façade Restoration

There are a few tricks I used to get the front-end appealing. You can use the same tricks or use css libraries like Bootstrap.

The demo comes packaged with a jQuery header:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

This will help us make event handling even more awesome!

Icons and Buttons

I also added a CSS file and a few icons from fontello to make the buttons look better:

<link rel="stylesheet" type="text/css" href="css/main.css”>

<link rel="stylesheet" href="css/fontello.css">

I turned the dial, hangup, and mute inputs into buttons (because that’s what they essentially are!)

They now look like:

<button type='button' id='hangup' class="options" onClick='voxbone.WebRTC.hangup();'>
    <i class="icon-phone"></i>
</button>

Event Handling and Status Message

Then using jQuery, toggled classes back and forth depending on the event in the event handlers and changed the status message to be displayed on Buttons instead but using $(‘id’).html() for the buttons’ inner value:

var eventHandlers = {

'progress':    function(e){
                  $("#dial").html('<i id="phone-dial" class="icon-phone"></i> Calling');
                  // Disable Dial, Enable Hangup and Mute
                  $( "#phone-dial" ).toggleClass( "spin", true );
                  $( "#dial" ).toggleClass( "disabled", true );
                  $( "#dial" ).attr('disabled', 'disabled');
                  $( "#hangup" ).toggleClass( "disabled", false );
                  $( "#mute" ).toggleClass( "disabled", false );
               },

'failed':      function(e){
                  $( "#dial" ).html('Failed to Connect');
                  $( "#dial" ).toggleClass( "incall", true );
                  $( "#dial" ).attr('disabled', 'disabled');
                  $( "#hangup" ).toggleClass( "disabled", true );
                  $( "#mute" ).toggleClass( "disabled", true );
                  timeout = setTimeout(function() {
                      $("#dial").html('<i class="icon-phone"></i>');
                      $( "#dial" ).removeAttr('disabled');
                      $( "#dial" ).toggleClass( "incall", false );
                      $( "#dial" ).toggleClass( "disabled", false );
                   }, 2500);
                },
'started':      function(e){
                  // Start stopwatch
                  stopwatch.startStop();
                  $( "#dial" ).toggleClass( "incall", true );
                  $( "#dial" ).attr('disabled', 'disabled');
              },
'ended':      function(e){
                  // Stop stopwatch
                  stopwatch.startStop();
                  $("#dial").html('Call Ended');
                  $( "#hangup" ).toggleClass( "disabled", true );
                  $( "#mute" ).toggleClass( "disabled", true );
                  timeout = setTimeout(function() {
                      $( "#dial" ).toggleClass( "incall", false );
                      $( "#dial" ).toggleClass( "disabled", false );
                      $( "#dial" ).removeAttr('disabled');
                  }, 2000);
                  timeout = setTimeout(function() {
                      $("#dial").html('<i class="icon-phone"></i>');
                  }, 2500);
               }
};

MakeCall() now looks like this:

function makeCall(){
    window.clearTimeout(callTimer);
    $( "#dial" ).html('<i id="phone-dial" class="icon-phone"></i> Dialing');
    voxbone.WebRTC.call(document.getElementById("number").value);
    
    //Disabling Buttons, Toggle disable style
    $( "#phone-dial" ).toggleClass( "spin", true );
    $( "#dial" ).toggleClass( "disabled", true );
    $( "#dial" ).attr('disabled', 'disabled');
    $( "#hangup" ).toggleClass( "disabled", true );
    $( "#mute" ).toggleClass( "disabled", true );
};

ToggleMute() now looks like this:

function toggleMute(){
    var button = document.getElementById("mute");
    if( voxbone.WebRTC.isMuted ){
        voxbone.WebRTC.unmute();
        button.value = "mute";
        $( "#mute" ).toggleClass( "muted", false );
    }else{
        voxbone.WebRTC.mute();
        button.value = "unmute";
        $( "#mute" ).toggleClass( "muted", true );
    }
}

And on init() I disable the buttons:

// When body loads, disable buttons
$( "#dial" ).toggleClass( "disabled", true );
$( "#dial" ).attr('disabled', 'disabled');
$( "#hangup" ).toggleClass( "disabled", true );
$( "#mute" ).toggleClass( "disabled", true );

Stopwatch

Then added a cute stopwatch from: https://gist.github.com/ddallala

1. Stored it in

<script src="js/stopwatch.js" type="text/javascript"></script>

2. Added a the new stopwatch object in the call script

// Call timer
var stopwatch = new Stopwatch(function(runtime) {
    // format time as m:ss
    var minutes = Math.floor(runtime / 60000);
    var seconds = Math.floor(runtime % 60000 / 1000);
    var displayText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    $("#dial").html("In Call " + displayText);
});

3. Start the stop watch in the ‘started’ event: stopwatch.startStop();

4. Stop the stop watch in the ‘ended’ event: stopwatch.startStop();

Additional Quick Configs

WebRTC is extremely flexible and our framework allows for full playability, play around with this demo and the other demos too:

– You can change the email-footer tag’s href to also add your name as a value and pass it into the first name and last name fields in index.jsf

– You can add your own picture under the profile  tag in index.jsf

– You can decide not to have the call launch automatically as the window loads by removing the callTimer variable, it’s interval, and it’s occurrence in the makeCall function.

Basically remove these 3 lines:

// Delete these 3 lines to stop calls from starting when body loads
var callTimer;
callTimer = window.setInterval(function(){makeCall()},1000);
window.clearTimeout(callTimer);

– Set your chosen caller-id to be reflected in your CDRs by uncommenting the configuration.uri line

//By uncommenting the following line:
//voxbone.WebRTC.configuration.uri = "caller-id@voxbone.com";  

//You can set your chosen caller-id and it will be reflected in your CDRs
voxbone.WebRTC.configuration.uri = "caller-id@voxbone.com";  

//Example
voxbone.WebRTC.configuration.uri = "snacar@voxbone.com";

– Enable the input element for the phone number so you can manually change the DID to be called.

– You can also pass any kind of context, they will be passed to the SIP Invite headers of the call. Check out the the voxbone-0.0.1.js object:

/**
* Context is a variable which will hold anything you want to be transparently carried to the call
 */
     context: undefined,

Just add it to your script and add any context you want – caller name, form fields, the name of your dog, you name it –  to have it carried in the SIP Invite headers.

Deploying Your App

I use Heroku to deploy my apps as it is free for small scale and is a very robust platform. To deploy these types of Tomcat projects to Heroku, you only need to deploy the .war file generated in the target directory. All that with one line of code! (plugin need though, can be found here)

# Use heroku deploy:war --war <path to file>
heroku deploy:war --war target/demo.war

Conclude and Foresee:

Has it been 15 minutes yet? You now have a decent web app to initiate webRTC calls right from your email signature. This is a basic implementation and the applications for webRTC are limitless. Of course, this is not only limited to emails! Your email-footer.html can be exported to any web page! (think banners, ads, Facebook apps, WordPress, and more). You can use this blog post and the source code to bring this tutorial to new levels and begin building your own applications.

click2callapp

If you’ve enjoyed this post, or you want to ask me a question, you can reach me at snacar@voxbone.com or let us know what you are building in the comments below.