Build Click-to-Call into your Website



You can integrate click-to-call features, provided by selected third parties tools, in order to allow your customers to click an object (e.g., button, image or text) on a website and to start a voice connection with your organization. 

  

In the following paragraph you find how to integrate some of these tools on XCALLY Motion.




On this page:

Plivo

Plivo is a Cloud API Platform and a Global Carrier Services Provider for Voice Calls and other services, which enables access to cloud communications at a low cost.

Using Plivo, you can easily add voice calling  capabilities to any web or mobile app.


Please refer to the Plivo website for more details: https://www.plivo.com/docs/getting-started/


Basic Requirements

In order to use Plivo the requirements are the following:

  • basic knowledge of HTML and Javascript
  • a Plivo account
  • FTP access to the website where to place the button or any other object to click.


How to configure Plivo and XCALLY


The steps to follow on Plivo are the following:

  • create a Plivo Application and set the answer_url like in the following example:


When the Application is added, you'll find it in the Applications list.

Expand the information related to it and you'll find the SIP URI you need to insert in the application code (in our example we named this clicktocall.js):


Clicktocall.js
(function ($) {
    $(document).ready(function () {

        // Get the button from your Website (You need Jquery library)
        var click_to_call = $('#clicktocall');
        var hangup = false;

        var options = {
            debug: 'DEBUG',
            permOnClick: true,
            audioConstraints: {
                optional: [{
                    googAutoGainControl: false
                }, {
                    googEchoCancellation: false
                }]
            },
            enableTracking: true
        };

        var plivoBrowserSdk = new window.Plivo(options);

        var username = '<USERNAME-EP-1>';
        var password = '<PASSWORD-EP-1>';
        plivoBrowserSdk.client.login(username, password);

        click_to_call.click(function () {
            console.log('click to call');
            // Check if your browser support the WebRTC protocol
            if (plivoBrowserSdk.client.webRTC()) {
                if (hangup) {
                    plivoBrowserSdk.client.hangup();
                } else {
                    var dest = "<APPLICATION-SIP-URI>"; // sip:23653836968617659@app.plivo.com
                    plivoBrowserSdk.client.call(dest);
                }
                click_to_call.text(hangup ? 'CLICK TO CALL' : 'HANGUP');
                hangup = !hangup;
            } else {
                alert("Your browser doesn't support WebRTC");
            }
        });
    });

})(jQuery);

Remember to change username and password (see later)


  • Create two Plivo end-points:
    • the first (e.g.: EP-1) will be associated to the website button
    • the second (e.g.: EP-2) will be associated to the inbound voice service of the XCALLY Motion server (trunk)


You will be asked to assign a username and password to them (remember to save the password you chose because it will be used later), as in the following examples:

Remember to chose the Application type as XML and the Application name must be the one you have created before.


When both Endpoints have been created, you can see them in the Endpoints List. Expand them and you'll find the information (EP-2 SIP URI) you need to insert in the code file (in our example we named it dial.xml):



dial.xml
<Response>

    <Dial callerId="<CALLERID-NUMBER-CLICKTOCALL>" callerName="<CALLERID-NAME-CLICKTOCALL>">

        <User>sip:server2user181108113534@phone.plivo.com</User>

    </Dial>

</Response>


  • Insert the button in the website code, which must call the Plivo HTML application (DialServer1).


Refer to Plivo tutorial and documentation for further details about the steps listed above: https://developers.plivo.com/getting-started/calls/



The steps on the website are the following:

  • Insert the button in the website code, which must call the Plivo click-to-call javascript application (like in the example above id=clicktocall)
  • Include the libraries plivo.js and clicktocall.js


The steps on XCALLY Motion are the following:

  • create a new trunk that will be used to receive calls from the sip account (e.g.: EP-1) created on Plivo as follows (the data inserted refer to the example shown above):


Remember  o insert the Plivo user password in the Registry string(PASSWORD=EP-1 password).

  • create the inbound route for the number called, for example:

 

  • and configure its dialplan (Inbound Route-Actions), for example an IVR project or else.