In order to process the performing of outgoing calls inside Kommo, you should implement the calling panel, add a keypad and integrate the Click-to-call feature. For incoming calls, you need to catch the incoming call and show a notification about it.

Making calls

WebRTC is a technology that allows web browsers and mobile apps to enable real-time audio, video, and data communication directly between peers (peer-to-peer) without the need for plugins or separate applications.

Your integration might provide the ability to dial numbers, perform outgoing calls or answer incoming calls inside Kommo.

You can provide the following template to show the call buttons call/answer, hangup/deny, mute/hold.

Here is a JS template for adding a button left corner to open the dialer where you can render and destroy your modal window:

this.callbacks = {
  init: () => {
    /**
     * Allows adding a button in the bottom left corner to open the dialer.
     */
    APP.widgets.notificationsPhone({
      ns: uniqueKey,
      click: () => {
        self.initKeypad();
      },
    });

    return true;
  },

  destroy: () => {
    /**
     * If necessary, you can add this code to remove the button for opening the dialer.
     */
    APP.widgets.destroyNotificationsPhone({
      ns: uniqueKey,
    });

    return true;
  },
};

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.

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.

In order 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 frontend using methods from the notification center, like show_notification or add_call, or by using WebSocket API when a permanent connection and event subscription are established between the client and the server.

You can also add a notification via API if you want, 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.