Making calls inside Kommo
In order to process the performing of outgoing calls inside Kommo, you should consider adding the calling panel, adding keypad and performing click to call. For incoming calls, you should catch the incoming call and show a notification about it.
Making calls
Your integration could provide the ability to dial numbers, perform outgoing calls or answer incoming calls inside Kommo.
To show the call buttons: call/answer, hangup/deny, mute/hold, you can provide a template.
<div class="voip__call-menu"
style=" position: fixed; left: 65px; right: 0; bottom: 0; z-index: 100; display: none" >
<div class="voip__call-footer">
<div class="voip__call-status">
</div>
<div class="voip__call-options">
<span class="voip__talk-time">00:00</span>
<button class="voip__call-btn voip__call-mute-btn hide"></button>
<button class="voip__call-btn voip__call-dial-btn"></button>
<button class="voip__call-btn voip__call-phone-btn"></button>
<button class="voip__call-btn voip__hangup-phone-btn"></button>
</div>
</div>
</div>
Keypad
To perform dialing numbers from Kommo account interface, you can provide a modal window with a keypad for dealing numbers.
To show a keypad, you can use any way that suits you, like using the VoIP service keypad by calling the SDK, writing your own template twig files, javascript or html. For example, you can provide your own keypad by calling the templates for drawing the keypad in your script.js.
For example, we can have a template file keypad_block.twig which displays the keypad
<div id="voip__keypad_wrapper" class="{{ base_class }}_call__keypad_wrapper {{ base_class }}">
<div class="{{ base_class }}_call__keypad_title">{{ lang.transfer_title }}</div>
<div class="{{ base_class }}_call__keypad_display">
<input class="{{ base_class }}_call__keypad_display__phone text-input" autocomplete="off" maxlength="" type="tel" value="" placeholder="" />
<button class="{{ base_class }}_call__keypad_backspace__btn {{ base_class }}_call__keypad_display__btn__icon"></button>
</div>
<div class="{{ base_class }}_call__keypad_keyboard">
{% for key in keypad_keys %}
<div id="{{ key.id }}" class="{{ base_class }}_call__keypad_keyboard__item" data-num="{{ key.num }}">
<span class="{{ base_class }}_call__keypad_keyboard__item_number">{{ key.num }}</span>
<span class="{{ base_class }}_call__keypad_keyboard__item_words">{{ key.text }}</span></div>
{% endfor %}
</div>
</div>
And then you can render the template inside your script providing the keys as input
this.initKeypad = function () {
var keypad_keys = [
{ num: "1", text: "", id: "keypad_key_one" },
{ num: "2", text: "abc", id: "keypad_key_two" },
{ num: "3", text: "def", id: "keypad_key_three" },
{ num: "4", text: "ghi", id: "keypad_key_four" },
{ num: "5", text: "jkl", id: "keypad_key_five" },
{ num: "6", text: "mno", id: "keypad_key_six" },
{ num: "7", text: "pqrs", id: "keypad_key_seven" },
{ num: "8", text: "tuv", id: "keypad_key_eight" },
{ num: "9", text: "wxyz", id: "keypad_key_nine" },
{ num: "*", text: "", id: "keypad_key_asterisk" },
{ num: "0", text: "+", id: "keypad_key_zero" },
{ num: "#", text: "", id: "keypad_key_lattice" },
];
widget.getTemplate(
"/templates/phone/keypad_block.twig",
{},
function (template, base_params) {
self.$panel.append(
template.render(
_.extend(base_params, {
keypad_keys : keypad_keys ,
lang: widget.lang,
})
)
);
bindDialEvents();
}
);
}
this.callbacks = {
init: function () {
self.initKeypad();
return true;
},
}Incoming call
Let’s analyze in detail the role of UI/UX in incoming calls.
First of all, we need to know that the call is coming. The call comes first to the VoIP application, which in turn transmits information about the call via our integration API.
To track a call, the widget has an Event listener onMessage that recognizes an incoming call. After that, a callback is launched, which sends data to Kommo that a call has been received, modal windows are drawn with an incoming call display.
Along with the information about the call, the necessary data is received, such as the caller’s phone number or the call id, which we will use inside Kommo later.
If the user answers the call, the connection is initialized and the conversation begins. After the conversation is over, data should be recorded (if it was a customer, calls between employees are cut off) in Kommo using the API. You should save information about the caller, the duration and recording of the conversation, notes to the call, if there were any.
If the manager does not accept the call, information about the call with zero duration is recorded.
Call notification
If you decide to display pop-up notifications with information about calls, you can implement this in the front end using methods from the notification center, like show_notification or add_call, or by using web sockets technologies when a permanent connection and event subscription are established between the client and the server.
You can also perform the notification in the back-end or the front-end as you like, by adding an event for the call which creates a notification after searching for the caller ID, connected to the card with this phone number if it exists, and if not linked to create a new contact.
The notification will appear in the interface, and depending on the used method it might be transmitted over all active delivery channels. All methods are clarified in the call notification API.