How to integrate a web phone into your system?

Calls straight from the browser without additional apps and settings might not be a world’s wonder, but it is a useful feature. With Zadarma API you can integrate such a webphone into your web app or any system.

Let’s talk more about placing WebRTC on your website.

WebRTC on your website

The main difference between a CRM system and an Excel spreadsheet with a list of contacts is the history of client interactions. And these interactions consist mainly of calls that end up in deals.

That is why most CRM systems need an integration with telephony for comfortable and full-fledged work. And WebRTC is the easiest way to integrate.

When the setup is complete, it will look like a webphone in the corner of the browser that can be used to make and receive calls. It looks like this:

How to integrate web-phone into your website?

Start with logging in. To receive call rights you will need authorization keys. Yours – if the system is for your company or client keys -–if the system is for wide.

Now step by step:

1. Your users register with Zadarma, enable PBX and copy API keys from our system to yours. Important: it has to be done for every account. If you are developing a system for yourself, it only has to be done once.
2. After copying a key you need to match Cloud PBX user and your system users. Basically, assign each employee a phone number. API and method /v1/pbx/internal/ will help you with that. Upload a list of your PBX numbers and a list of client’s numbers (and ask to specify what PBX number each employee has).

For example:

<?php
 
use Zadarma_API\Api;
 
if (isset($_GET['zd_echo'])) {
    exit($_GET['zd_echo']);
}
 
require_once __DIR__ . '/../vendor/autoload.php';
 
$key = 'YOUR_KEY';
$secret = 'YOUR_SECRET';
 
$api = new Api($key, $secret);
$pbxInternal = $api--->getPbxInternal();
//your code to save $pbxInternal->numbers
 
$balance = $api->getBalance();
 
?> 

To add a code to the website, first, you need to request a temporary key (that is active for 72 hours) via method /v1/webrtc/get_key/. And then add a widget with that key to your interface:

<?php
 
/**
 * SIP login or login of PBX extension number
 */
$login = 'YOUR_LOGIN';
 
$webrtcKey = $api--->getWebrtcKey($login)->key;
//your code to save $webrtcKey, expiration time 72 hours.
 
?>

<script src="https://my.zadarma.com/webphoneWebRTCWidget/v8/js/loader-phone-lib.js?v=23"></script>
<script src="https://my.zadarma.com/webphoneWebRTCWidget/v8/js/loader-phone-fn.js?v=23"></script>
<script>
    if (window.addEventListener) {
        window.addEventListener('load', function () {
            zadarmaWidgetFn('<?= $webrtcKey?>', '<?= $login?>', 'square' /*square|rounded*/, 'en' /*ru, en, es, fr, de, pl, ua*/, true, "{right:'10px',bottom:'5px'}");
        }, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', function () {
            zadarmaWidgetFn('<?= $webrtcKey?>', '<?= $login?>', 'square' /*square|rounded*/, 'en' /*ru, en, es, fr, de, pl, ua*/, true, "{right:'10px',bottom:'5px'}");
        });
    }
</script>

Please note, that this is an example. You can copy an active code from your personal account.

Here instead of YOUR_KEY input a key generated for you, instead of YOUR_SIP enter your SIP number or full PBX extension number login, that you are planning to make calls from.

IMPORTANT!

Do not place the widget in open source, otherwise anyone will be able to make calls from your account.

---

After finishing with these simple settings, your clients and/or employees will be able to make and receive calls straight from your system.

And a bit more

When the integration is all set, you might ask yourself what else can you add to it? At least allow your users to see call statistics and take certain actions. For example, create a lead or a ticket.

Here is just a few of CRM integration features:

• Pop-up window with caller’s information and a link to the client’s card;
• Call statistics and recordings in the client’s card;
• Calls from CRM in one click;
• Automatic contact, lead and deal creation during calls from new clients;
• Automatic call routing to the responsible agent when receiving a call from an existing client;

You can find detailed instructions for these features here.