VoIP API features

Telephony (VoIP) in Kommo is the integration of Kommo with a third-party company that provides a virtual telephony service through widgets.

The essence of Kommo integration and virtual PBX is that data exchange takes place for certain events. There are several such events, the features come from them. Now we will take a look at each feature in detail and give examples of their implementation.

Click 2 call

When a user works in Kommo, it is possible to request any feature by clicking on the phone number or e-mail address of a contact.

Example of click 2 call

foto

This feature is implemented by the ready-made function add_action ().

Parameters of the function add_action()

Parameter Description
type The type of the transmitted parameter, can be: “email”, “phone”
action A function that will be requested when you click on a phone number or email address

Let’s take a look at an example of using the add_action() function by placing it in the init callback function, the callbacks object of the script.js structure. Learn more about the structure of script.js here.

Example

/* script.js */
init: function(){
    self.add_action('phone', function(data){
        self.crm_post (
          'http://127.0.0.1/file.php',
          {
              call_to: data.value
          },
          function(msg){
              alert('Data is sent');
          },
          'text',
          function(){
            alert ('Error');
          }
        );
    });
}

It’s important to note that you need to declare the widget’s connection point in manifest.json. To perform the function add_action (), you need to set connection points, that contain displayed phone numbers or email addresses. Either set a limited range of trigger points, at your discretion. Read more about the areas of points here. In the example, there are all points where you can find phone numbers and email addresses.

Example

/* manifest.json */
"locations":[
  "ccard-1",
  "clist-1",
  "lcard-1",
  "llist-1",
  "cucard-1",
  "culist-1",
  "comcard-1"
]

To change the sign on the button that is called when you click on the phone number or email address, it is necessary in the i18n directory of your widget structure, make the appropriate changes in the localization file *.json, as indicated in the example below. If the “call_action” parameter is not set, the name of your widget will be substituted in the button label by default, which is a mandatory parameter in manifest.json. The value of “call_action” will be inserted into the button automatically when the widget is initialized.

Example

/* en.json */
{
  "widget": {
  "call_action": "Call"
  }
}

Incoming call card

There is a feature in Kommo to display a notification window in the lower right corner. As an example of use, there is an incoming call notification requested by the VoIP.

At the moment of receiving a call to the user’s phone, the virtual PBX can request an information about the calling contact via the Kommo API and transfer it to the user.

To search, you should use the contacts/list method by passing the phone number to the query field. Just like all API methods, this method is requested by an authorized user, and the rights of the user to access contacts are taken into account. So, to identify the caller’s number, this contact must be in the Kommo database and the corresponding user should have the rights to view the contact card.

It is necessary to set the minimum timeout for querying, since otherwise, in case of degradation of the connection between the PBX and Kommo, there may be problems with calls.

To deliver an information about an incoming call to a client-side JS script, web-sockets technologies are usually used, when a permanent connection and an event subscription are established between the client and the server. You can use the technology of periodic calls through JS to a third-party server. To do this, every few seconds on the client side, the JS file is loaded from the target server, where an array with the channel state is defined (there is a call; there is no call for a specific internal phone of the user).

The choice of method depends on the technical capability on the side of the virtual PBX to support the web-sockets connection. It is also necessary to take into account the user’s internal numbers and their correspondence with the users authorized in Kommo who are browsing the interface.

Incoming call card example

foto

To implement an incoming call card, you can use the provided object. There is a function created to work with it that you can find in the example.

Example

/* script.js */
 self.add_call_notify = function(data){
        var w_name = self.i18n('widget').name,
        date_now = Math.ceil(Date.now()/1000),
        lang = self.i18n('settings'),
        n_data = {
            from: data.from,
            to: data.to,
            duration: data.duration,
            link: data.link,
            text: w_name + ': ' + data.text,
            date: date_now,
          element: data.element
        };
 /* Check if there is an incoming caller’s contact id in the system */
        if (n_data.element.id > 0){     //If there is an already existing id , create a link for this contact in Kommo
       text = 'calls: '+n_data.element.name+' Go to the contact
card;
       n_data.text = text;
       n_data.from = data.from;
         if (n_data.from.length

The text parameter is required to pass to the add_call function, and if there is a link in it, it should meet the regular expression:(.*href=.*[\?\&]phone=)(.*?)([\&\'\"].*)

In order to find information for a contact with only the phone number of the incoming call, you can use the jquery request.

Example

/* script.js */
var notifications_data = {};
$.get('//'+window.location.host+'/private/api/contact_search.php?SEARCH='+ /*phone number*/ , function(res){
    notifications_data.id = $(res).find('contact > id').eq(0).text();
    notifications_data.name = $(res).find('contact > name').eq(0).text();
    notifications_data.company = $(res).find('contact > company > name').eq(0).text();
    });

It's important to note that you need to declare the widget's connection point in manifest.json. To perform the incoming call card function, it is recommended to set the everywhere point. It defines that your widget will work in any point of Kommo, it will allow you to receive notifications of an incoming call, regardless of the user's work in Kommo. For more information about the connection points, click here.

Example

/* manifest.json */
"locations":[
                "everywhere"
            ]

You can also display the information about a completed call by passing the incoming data:

Example

/* script.js, changed input data */
var notify_data={};
notify_data.from = 'Jack Nicholson';
notify_data.to = 'Jeff Stevens';
notify_data.element = { id: 1003619, type: "contact" };
notify_data .duration = 60,
notify_data.link = 'https://example.com/dialog.mp3';
notify_data.text = 'Widget text';

Example of changed input data

foto

Creating a contact card

In the Kommo, you can create a contact card, if an incoming call comes from a contact that is not yet in your account.

Notification Example

foto

To implement this feature, it is necessary to make changes to the method described in the "Incoming call card".

Example

self.add_call_notify = function(data){
        var w_name = self.i18n('widget').name,
            date_now = Math.ceil(Date.now()/1000),
            lang = self.i18n('notifications'),
            text,
            n_data = {
                to: data.to,
                duration: data.duration,
                date: date_now,
                n_data.element = data.element
            };
      /* Check if there is an incoming caller’s contact id in the system */
     if (n_data.element.id > 0){  //If there is an already existing id , create a link for this contact in Kommo
       text = 'Calls you: '+n_data.element.name+' Go to the contact
card';
       n_data.text = text;
       n_data.from = data.from;
         if (n_data.from.length Create a contact';
            n_data.text = text;
            n_data.header = 'Incoming call '+ data.from+'';
      //Please note, that if you create a new contact, n_data.from is not filled in!
          }
    APP.notifications.add_call(n_data);
};
   /* Data that imitates an incoming information */
    var notify_data={};
    notify_data.from = '+1 (415) 523 77 43';
    notify_data.to = 'User Name';
    self.add_call_notify(notify_data);

Smart forwarding

When you receive a call, in addition to the caller name information, you can also get the Kommo user ID who is responsible for the caller's contact card. From the account information you can get the phone number of the responsible user and forward the call to the person who works with the contact.

To implement this feature, you will need to make several queries to our API in order to get the phone number of the user responsible for the calling contact card.

Example

$phone_number = /* Incoming call phone number */;
$subdomain = /* Your account — subdomain */;
$link='https://'.$subdomain.'.kommo.com/private/api/v2/json/contacts/list?query='.$phone_number;  //API request for a search of contact card
$curl=curl_init(); #Save cURL session descriptor
#Set necessary options for cURL session
curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);
curl_setopt($curl,CURLOPT_USERAGENT,'amoCRM-API-client/1.0');
curl_setopt($curl,CURLOPT_URL,$link);
curl_setopt($curl,CURLOPT_HEADER,false);
curl_setopt($curl,CURLOPT_COOKIEFILE,dirname(__FILE__).'/cookie.txt');
curl_setopt($curl,CURLOPT_COOKIEJAR,dirname(__FILE__).'/cookie.txt');
curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,0);
curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,0);
$out=curl_exec($curl); #Initiate an API request and save a response in a variable
$code=curl_getinfo($curl,CURLINFO_HTTP_CODE);
curl_close($curl);
$Response=json_decode($out,true);
        /* We receive a responsible user ID,  from a response of a user card request */
       $responsible_user_id = $Response['response']['contacts'][0]['responsible_user_id'];

$responsible_user_id is the ID of the user responsible for the card of the contact making the call. Because the user data in the Kommo account and in the database of the VoIP widget match, which is one of the conditions for connecting the VoIP widget, you can transfer the incoming call to the responsible user.

Call result

The feature is implemented by launching a modal window in which you can create a new lead or contact, specifying a note or to-do that will be associated with the created entity.

Example of a call result

foto

Please note that in order to successfully launch the modal window, your widget’s script should start as shown in the example below.

Example

define(['jquery', 'lib/components/base/modal'], function($, Modal){
    /* Here is your widget’s script */
});

As an example of implementing this feature, we create a modal window with a markup for entering information and describe the requests to the API for adding information to the database. For more information about the structure of requests for adding entities via API requests, read here.

Example

setTimeout(self.call_result,30000); //set a function request delay for the call result feature
this.call_result = function() {
  /* Compose the markup of the data entry form, which will be displayed in the modal window */
  var data = [];
  data.push('&ltstyle type="text/css" style="display: none"&gt'+
    'input[type="text"] {'+
    'border: 1px solid #696969;'+
    'border-radius: 3px;'+
    '-webkit-border-radius: 3px; //rounding of corners (Google Chrome)'+
    '-moz-border-radius: 3px; //rounding of corners (FireFox)'+
    'margin: 2px;'+
    'padding: 2px'+
    '}'+
    'input[type=submit] {'+
    'background-color: #20B2AA;'+
    'border: 1px #008B8B;'+
    'border-radius: 3px;'+
    'padding: 3px'+
    '}'+
    '&lt/style&gt'+
    '&ltform method="post" name="lead_data" id="call_result_data"&gt'+
    '&ltlabel for="inputs"&gtCall result +1(415)523-77-43&lt/label&gt&ltbr&gt&ltbr&gt' +
    '&ltdiv id="inputs"&gt'+
    '&ltinput id="contact" type="text" name="contact_name" placeholder="Contact’s name"&gt&ltbr&gt&ltbr&gt'+
    '&ltinput id="lead" type="text" name="lead_name" placeholder="Lead name"&gt&ltbr&gt&ltbr&gt'+
    '&ltinput id="lead_note" type="text" name="note" placeholder="Note"&gt&ltbr&gt&ltbr&gt'+
    '&ltlabel for="lead_task"&gtTo-do type&lt/label&gt&ltbr&gt'+
    '&ltselect name="task_type"&gt'+
    '&ltoption value=1&gtFollow-up&lt/option&gt'+
    '&ltoption value=2&gtCall&lt/option&gt'+
    '&ltoption value=3&gtMeeting&lt/option&gt'+
    '&ltoption value=4&gtEmail&lt/option&gt'+
    '&lt/select&gt&ltbr&gt&ltbr&gt'+
    '&ltlabel for="lead_task_text"&gtSet a To-do&lt/label&gt&ltbr&gt'+
    '&ltinput id="lead_task_text" type="text" name="text" placeholder="To-do"&gt&ltbr&gt&ltbr&gt'+
    '&lt/div&gt'+
    '&ltinput type="submit" value="Save"&gt'+
    '&lt/form&gt');
  modal = new Modal({
    class_name: 'modal-window',
    init: function ($modal_body) {
      $modal_body
        .trigger('modal:loaded') //it starts a modal window displaying
        .html(data)
        .trigger('modal:centrify')  //it configures the modal window
        .append('&ltspan class="modal-body__close"&gtCancel&lt/span&gt');
    },
    destroy: function () {
    }
  });
  $('#call_result_data input[type="submit"]').click(function(e) {
    e.preventDefault();
    var data;   // a variable which will contain a serialization data
    data = $(this).parent('form').serializeArray();
    setTimeout('$(".modal-body__close").trigger("click")',1000);
    if(data[1]['value'] != ""){
      var lead_data = [];
      lead_data = {
        "request":  {
          "leads":  {
            "add":  [{
              "name":data[1]['value']
            }]
          }
        }
      };
      $.post('https://cnst.kommo.com/private/api/v2/json/leads/set', lead_data, function(response) {
        var lead_id = response.response.leads.add[0].id;
        if(lead_id != 0) {
          if(data[0]['value'] != ""){
            var contact_data = [],
              task_data = [],
              note_data = [];
            contact_data  = {
              "request":  {
                "contacts":  {
                  "add":  [{
                    "name":data[0]['value'],
                    "linked_leads_id": lead_id
                  }]
                }
              }
            };
            $.post('https://cnst.kommo.com/private/api/v2/json/contacts/set', contact_data, function(response)
            {
              var contact_id = response.response.contacts.add[0].id;
            }, 'json');}
          if(data[3]['value'] != ""){
            task_data = {
              "request":  {
                "tasks":  {
                  "add":  [{
                    "element_id":  lead_id,
                    "element_type":  2,
                    "task_type": data[3]['value'],
                    "text":  data[4]['value']
                  }]
                }
              }
            };
            $.post('https://cnst.kommo.com/private/api/v2/json/tasks/set', task_data, function(response) {},
              'json');}
          if(data[2]['value'] != ""){
            note_data = {
              "request":  {
                "notes":  {
                  "add":  [{
                    "element_id":  lead_id,
                    "element_type":  2,
                    "note_type":  4,
                    "text":  data[2]['value']
                  }]
                }
              }
            };
            $.post('https://cnst.kommo.com/private/api/v2/json/notes/set', note_data, function(response) {},
              'json');}
        }
      }, 'json');
    }
  });
};

Call logging

Call logging is being done in the events of the corresponding contact, in the corresponding types of outgoing and incoming call events. If the PBX supports call recording, the user will see a link and a player to listen to the call recording.

  • via the notes method (Add events)
  • via the calls/add method (Add calls)

It's simpler to add a call as a note. This does not require a special service key. However, to add a call via notes, you must pass element_id of the contact card. The calls/add method does not require this parameter. It’s searching for the contact card itself.

To add records to events, you should use the calls/add method. In this case, events are added only to an existing contact found by the phone number. Therefore, we mark in the database sent and not sent records of calls. And we try to add not sent calls (cards for which have not yet been created) once again within 18 hours. If the contact card is not created 18 hours later, then the call will not be added to the system.

The result of adding calls that is displayed in the contact card

foto

Error message

In order to notify the user about the problems that occur in background processes, it is necessary to use a separate JS-object that will display an error message to the user when he makes a call. For example, an error message about a failed connection to the server.

We recommend using such notifications if JS on the page performs some background actions (they are requested as hidden from the user, not by his request). In such cases, you can notify the user that something went wrong and what actions he needs to take.

Error message example

foto

Parameters

Parameter Type Description
header string Widget’s name will be displayed in the headline
text string Error message
date timestamp Date

callbacks: object of callback functions. When you add a new message or an error occurs, the AJAX request is passed to the server, which returns the number of this message if the data is successfully saved. Depending on the success of the request, one of the passed functions of this object is triggered.

Example

var  errors = APP.notifications,
    date_now = Math.ceil(Date.now()/1000),
    header = self.get_settings().widget_NAME,
    text = 'error'
    var n_data = {
        header: header, //widget’s name
                text:'
'+text+'
',//error notification text
                date: date_now //date
            },
        callbacks = { done: function(){console.log('done');}, //successfully added and saved AJAX done
        fail: function(){console.log('fail');}, //AJAX fail
        always: function(){console.log('always');} //it always requests
    };
    errors.add_error(n_data,callbacks);
APP.notifications.show_message_error(n_data, callbacks); //Manual request of your notification error.

Adding calls to the Incoming leads

In Kommo, there is the «Incoming lead» entity, that receives all leads from various integrations, including VoIP.

Incoming calls from unknown numbers (there is no linked contact in the system) that are received by the user, will appear in the "Incoming leads" column. The user can not manually move a request to "Incoming leads".

For widgets that work with SIP: the request will disappear from «Incoming leads» if the user creates a contact or a company with this phone number. The request is a brief information about the call: the caller’s phone number, the time of the call, the duration of the call. You can listen to the call or download it.

The user can add a note or plan a to-do in the call result modal window, and they will be linked to the lead if the "Incoming lead" is accepted. When you drag an incoming lead and drop it in one of the pipeline’s lead stages, a lead and a contact (with the caller’s phone number) are automatically created. The name of the lead will look like "Call from and a phone number", the name of the contact will look like "Autocontact phone number". If the request is declined, it will disappear from the "Incoming leads", the information about the call will disappear as well.

Example of adding calls to the "Incoming leads"

foto

Incoming leads adding method.


Method URL


POST /api/v2/incoming_leads/sip

Parameters

Parameter Type Description
add/source_name
require 		string Lead source’s name
add/source_uid
require 		string Lead’s unique identifier
add/pipeline_id int Digital Pipeline’s id, if this parameter is not sent then the lead will be added to the “Incoming Leads” of the first pipeline
add/created_at timestamp The date and the time of incoming lead creation
add/incoming_lead_info array An array that contains an incoming lead data
add/incoming_entities
require 		array An array that contains created entities elements data. It’s required because when an incoming
lead is accepted, the corresponding element of the entity will be created.
add/incoming_entities/leads array An array that contains the data for
creating a new lead. It may contain all
parameters and custom fields that are available to “Leads” in the account.
add/incoming_entities/contacts array An array that contains the data for creating a new contact. It may contain all parameters and custom fields that are available to “Contacts” in the account.
add/incoming_entities/companies array An array that contains the data for creating a new company. It may contain all parameters and custom fields that are available to “Companies” in the account.
add/incoming_lead_info/to
require 		int A user’s identifier who accepted the call
add/incoming_lead_info/from
require 		string External phone number
add/incoming_lead_info/date_call
require 		timestamp The date and the time of the call
add/incoming_lead_info/duration
require 		int Call duration
add/incoming_lead_info/link
require 		string Call recording link
add/incoming_lead_info/service_code
require 		string The code of the widget or the service through which the call was made
add/incoming_lead_info/uniq
require 		string Unique call code
add/incoming_lead_info/add_note
require 		bool Flag, if this parameter is passed, then upon acceptance of the request into the created entities, an event about the made call will be added.

Example

{
   add: [
      {
         source_name: "QSOFT",
         source_uid: "a1fee7c0fc436088e64ba2e8822ba2b3",
         created_at: "1510261200",
         pipeline_id: "41563",
         incoming_entities: {
            leads: [
               {
                  name: "Web design",
                  created_at: "1509483600",
                  status_id: "13667502",
                  responsible_user_id: "504141",
                  price: "83000",
                  tags: "websites, frontend",
                  notes: [
                     {
                        note_type: "7",
                        element_type: "lead",
                        text: "Send a contract’s duplicate"
                     }
                  ],
                  custom_fields: [
                     {
                        id: "4399917",
                        values: [
                           "3692247",
                           "3692248"
                        ]
                     }
                  ]
               }
            ],
            contacts: [
               {
                  name: "Jeff Colbert",
                  custom_fields: [
                     {
                        id: "4396818",
                        values: [
                           {
                              value: "89457898713",
                              enum: "WORK"
                           }
                        ]
                     },
                     {
                        id: "4396819",
                        values: [
                           {
                              value: "email@email.com",
                              enum: "WORK"
                           }
                        ]
                     },
                     {
                        id: "4400115",
                        values: [
                           {
                              value: "1 Market St",
                              subtype: "address_line_1"
                           },
                           {
                              value: "San Francisco",
                              subtype: "city"
                           },
                           {
                              value: "20011",
                              subtype: "zip"
                           },
                           {
                              value: "US",
                              subtype: "country"
                           }
                        ]
                     }
                  ],
                  responsible_user_id: "504141",
                  date_create: "1509483600"
               }
            ],
            companies: [
               {
                  name: "QSOFT"
               }
            ]
         },
         incoming_lead_info: {
            to: "41565",
            from: "+19456153101",
            date_call: "1509483600",
            duration: "54",
            link: https://www.example.com/records/2017/11/01/98431.mp3,
            service_code: "CkKwPam6",
            uniq: "a1fee7c0fc436088e64ba2e8822ba2b3ewrw",
            add_note: "Agreed to cooperate"
         }
      }
   ]
}

Call list

You can create call lists from lists of contacts, companies and leads. To do this, you should specify the elements of the list that you want to add, and by clicking on the "more" tab, you can add the selected items to your call list.

You can implement automatic calling with the time interval specified in the widget settings. In the composed call list you can pause an auto-calling or skip one of the list items and move on to the next one.

We give some key features of the composing of the call list in the example. You can check out a complete and exhaustive example of the call list implementation in the example of a full-featured VoIP widget here.

Example of selecting items

foto

Call list example

foto

In order to compose a call list, first, you need to implement the function of selecting items from the entities list. An example of implementing the selection of items for the script.js structure of your widget.

Example

this.callbacks = {
contacts: { //Choose entities elements from lists of contacts or companies
        selected: function () {
          var data = self.list_selected()['selected'],
            nothing_added = true;
          $.each(data, function (k, v) {
            (function (v) {
              var call_element = {},
                list_model = APP.data.current_list.where({id: v.id}),
                company;
              list_model = list_model[0] || {};
/* Receive a data from each selected element */
              call_element.element_id = v.id;
              call_element.element_type = list_model.get('element_type');
              call_element.type = list_model.get('element_type');
              call_element.phone = v.phones[0] || false;
/* Companies list scope is the same as contacts scope— clist. In this regard, we need to
additionally
clarify an entity that selected elements are related */
              call_element.entity = call_element.element_type == 1 ? 'contact' : 'company';
              call_element.element = {};
              call_element.element.text = list_model.get('name')['text'];
              call_element.element.url = list_model.get('name')['url'];
              company = list_model.get('company_name') || false;
              if (company) {
                call_element.company = {};
                call_element.company.text = company.name;
                call_element.company.url = company.url;
              }
              if (call_element.phone) {
                self.__CallsList.addCall(call_element);   //Pass selected elements to your processing function, addCall is not a finished SDK method , it’s given as an example
                nothing_added = false;
                $(document).trigger('list:cookies:update');
              } else if (nothing_added && k == data.length - 1) {
                self.notifers.show_message_error({
                  text: self.i18n('caller').nothing_to_add,
                  without_header: true
                });
              }
            })(v);
          });
        }
      },
      leads: {  //Choose elements from  leads list
        selected: function () {
          var data = self.list_selected()['selected'];
          (function (data) {
            self.tools.request({
                selected: data
              },
              'get_contacts_by_leads',
              function (data) {
 
                data.contacts = data.contacts || [];
                if (data.contacts.length

Since we recommend setting the “everywhere” scope for all VoIP widgets in manifest.json, there is no need to specify additional scopes to select items from the list.

Next, we need to put the selected items in a list view. In the example, there is a render of a *.twig format template, with the structure of the template itself.

Example

render: function (calls) {
        var _this = this;
        _this.widget.getTemplate( //Choose a call_list template
          'call_list',
          {},
          function (template, base_params) {
            _this.$el.html(template.render(_.extend(base_params, {
              list_expanded: 0,
              open_contact: !(cookie.get(_this.widget.params.widget_code + '_open_contact') == '0'),
              lang: _this.lang
            })));
            _this.$el.find('#sortable_calls_list').sortable({ //calls sorting
              items: 'div.amo__vox__implant_call__list_wrapper__list__task',
              handle: '.icon-sortable',
              axis: 'y',
              containment: '#vox_imp__call_list_wrapper .amo__vox__implant_call__list_wrapper__list',
              scroll: false,
              tolerance: 'pointer',
              stop: function () {
                _this.startSort();
              }
            });
            calls = calls || [];
            if (calls.length > 0) {
              _this.calls.push(calls);  //Add to your array for calling, calls is not a finished SDK method, it’s given as an example
            }
          }
        );
        return this;
      }

Example of a *.twig template for the call list. 

&ltdiv id="vox_imp__call_list_wrapper" class="{{ widget_code }}_call__list_wrapper{% if list_expanded %} expanded{% endif %}
{{ widget_code
}}"&gt
  &ltdiv class="{{ widget_code }}_call__list_wrapper__header"&gt
    &ltspan id="clear_call_list" class="{{ widget_code }}_call__list_wrapper__header_icon icon-clear"
          title="{{ lang.clear }}"&gt&lt/span&gt

    &ltdiv class="{{ widget_code }}_call__list_wrapper__header_additional_option"&gt
      &ltspan id="clear_call_list" class="{{ widget_code }}_call__list_wrapper__header_clear"&gt{{ lang.clear }}&lt/span&gt
    &lt/div&gt
    &ltspan class="{{ widget_code }}_call__list_wrapper__header_name"&gt{{ lang.call_list }}:&lt/span&gt

    &ltdiv class="{{ widget_code }}_call__list_wrapper__header__switcher"&gt
      &ltspan class="{{ widget_code }}_call__list_wrapper__header__switcher_text"&gt{{ lang.open_contact_w_calling }}&lt/span&gt

      &ltdiv class="switcher_wrapper"&gt
        &ltlabel for="call_list_switcher"
               class="switcher call_list_switcher switcher__{% if open_contact == 1 %}on{% else %}off{% endif %}"
               id=""&gt&lt/label&gt
        &ltinput type="checkbox" value="Y" name="call_list_switcher" id="call_list_switcher" class="switcher__checkbox"&gt
      &lt/div&gt
    &lt/div&gt
  &lt/div&gt
  &ltdiv class="{{ widget_code }}_call__list_wrapper__hint"&gt{{ lang.empty_calls_list }}&lt/div&gt
  &ltdiv class="{{ widget_code }}_call__list_wrapper__list custom-scroll" id="sortable_calls_list"&gt&lt/div&gt
&lt/div&gt
&ltdiv class="{{ widget_code }}_call__footer {{ widget_code }}"&gt
  &ltdiv id="vox_imp__call_list_btn" class="{{ widget_code }}_call__btn {{ widget_code }}_call__list_btn"
       title="{{ lang.call_list }}"&gt
    &ltspan class="nav__notifications__counter call_list_notifications"&gt&lt/span&gt
  &lt/div&gt
  &ltdiv class="{{ widget_code }}_call__status"&gt
    &ltdiv class="{{ widget_code }}_call__status__contact"&gt&lt/div&gt
    &ltdiv class="{{ widget_code }}_call__status__talk"&gt
      &ltspan class="{{ widget_code }}_call__status__talk__time"&gt&lt/span&gt
      &ltspan id="vox_implant__icon_wrapper" class="{{ widget_code }}__icon_wrapper"&gt
                &ltspan id="vox_imp__rec_call" class="{{ widget_code }}_call__status__talk__rec rec_is_on"
                      title="{{ lang.talk_recording }}"&gt&lt/span&gt
                &ltspan id="vox_imp__play_call" class="{{ widget_code }}_call__status__queue_pause"
                      title="{{ lang.pause }}"&gt&lt/span&gt
            &lt/span&gt
    &lt/div&gt
  &lt/div&gt
  &ltdiv class="{{ widget_code }}_call_options"&gt
    &ltdiv id="vox_imp__mic_btn" class="{{ widget_code }}_call__btn {{ widget_code }}_call__mute_mic_btn mute_is_on"
         title="{{ lang.mute_speaker }}"&gt&lt/div&gt
    &ltdiv class="{{ widget_code }}_call__btn {{ widget_code }}_call__skip_btn" title="{{ lang.skip }}"&gt&lt/div&gt
    &ltdiv id="vox_imp__dial_btn" class="{{ widget_code }}_call__btn {{ widget_code }}_call__dial_btn"
         title="{{ lang.dialling }}"&gt&lt/div&gt
    &ltdiv id="vox_imp__hung_up_btn" class="{{ widget_code }}_call__btn {{ widget_code }}_call__phone_btn js-hungup_call"&gt
    &lt/div&gt
  &lt/div&gt
&lt/div&gt

Built-in call feature (WebRTC)

WebRTC is a technology that provides you to make and receive calls right in your browser. Please note that not all browsers or not all browsers versions support this technology. You can find more information about the currently supported browsers on the official technology page.

WebRTC is an open source solution, and some widgets use it for integrating Kommo with virtual PBXs.

The displaying of the working feature of making calls looks different in different browsers. In Mozilla Firefox, this is the microphone icon. In the Google Chrome browser, the active feature is displayed as a red sign on the tab and the camera icon on the right side of the address bar that confirms an access to your microphone.

Example of a built-in call

foto

Example of implementing WebRTC into Kommo.

Example

initYourWidget: function () {
    $.getScript('///*link*//your_script.min.js', _.bind(function () {
 
    /* Your VoIP script processing*/
 
    }, this));
 
  initialize: function (params) {
  APP.widgets.notificationsPhone({
              ns: this.widget.ns,
             click: _.bind(function () {
                  this.$el.toggle();  //Displaying a WebRTC interface window
              }, this)
    });
}