Add a click to call link to your web applications using Toky

There are many useful things you can do in your web applications if you have a Toky account. If you have a CRM software developed by you or any system that operates on the web and you want to add Toky's click to call, you can do it easily using JavaScript and HTML.

Toky integrates with several CRM software and business applications to not only allow calls with one click but also synchronize call information automatically. Learn more about Toky integrations

What do you need to add click to call to your apps?

If you want to add the Toky click to call link to your own applications, you must meet the following requirements:

  • Get a Toky account. If you do not have one, you can create a free trial account
  • The application must run as a web app and you must be able to access its source code in order to modify HTML and javascript code.
  • When running your application you must have a Toky session open in another browser tab.

You can turn visitors into customers by allowing them to call you with a click on your website. Learn about our live calls widget!

Adding the click to call link to your web application

To allow your users to call any phone number by clicking on a link, we will use the Toky dialer in a pop-up window. For this we will use a function, which is called from the onClick event of an element <a href> that has the phone in its text like this:

<a href="#" onclick="return TokyPopup(this)">+1 844 332 6433</a>  

The function is this one:

function TokyPopup(obj) {  
    //this function only works for a elements, if you want to use another HTML element like button, you mus
    //change this code to get the proper atribute with the phone number.
        var number=obj.innerText;
        var title = 'Toky',w=300,h=500;
        var _options = 'scrollbars=no,resizable=no';
        url = 'https://app.toky.co/business/dialer#?call='+number;
        // Fixes dual-screen position Most browsers Firefox
        var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
        var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
        width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
        height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

        var _left = ((width / 2) - (w / 2)) + dualScreenLeft;
        var _top = ((height / 2) - (h / 2)) + dualScreenTop;
        var newWindow = window.open(url, title, _options +', width=' + w + ', height=' + h + ', top=' + _top + ', left=' + _left);

        // Puts focus on the newWindow
        if (window.focus) newWindow.focus();
    return false;
    }

You must modify your application so that the code return TokyPopup (this) is added to the onclick attribute and of a <a href element as seen in the example and in the text of the element must be the phone in international format.

<a href="#" onclick="return TokyPopup(this)">[[PHONE_NUMBER]]</a>  

In the following fiddle you will see the working sample:

In this example, you will see something more elaborate, where you can paste a list of phone numbers in the text field and after clicking on the Generate button, you will see a list of the phone numbers with a click to call button. In this example we used Vue.js and added a custom attribute phone to the button, which is used later in TokyPopup function.

If you want to better integrate Toky with your applications, we invite you to know our Developer API.

comments powered by Disqus