Para procesar la realización de llamadas salientes dentro de Kommo, debes implementar el panel de llamadas, añadir un teclado e integrar la funcionalidad Click-to-call. Para las llamadas entrantes, necesitas detectar la llamada entrante y mostrar una notificación al respecto.

Realizar llamadas

WebRTC es una tecnología que permite que los navegadores web y las aplicaciones móviles habiliten comunicación de audio, video y datos en tiempo real directamente entre pares (peer-to-peer) sin necesidad de plugins ni aplicaciones externas.

Tu integración puede ofrecer la posibilidad de marcar números, realizar llamadas salientes o contestar llamadas entrantes dentro de Kommo.

Puedes ofrecer la siguiente plantilla para mostrar los botones de llamada llamar/contestar, colgar/rechazar, silenciar/poner en espera.

Aquí tienes una plantilla JS para añadir un botón en la esquina izquierda que abra el marcador, donde puedes renderizar y destruir tu ventana modal:

this.callbacks = {
  init: () => {
    /**
     * Permite añadir un botón en la esquina inferior izquierda para abrir el marcador.
     */
    APP.widgets.notificationsPhone({
      ns: uniqueKey,
      click: () => {
        self.initKeypad();
      },
    });

    return true;
  },

  destroy: () => {
    /**
     * Si es necesario, puedes añadir este código para eliminar el botón que abre el marcador.
     */
    APP.widgets.destroyNotificationsPhone({
      ns: uniqueKey,
    });

    return true;
  },
};

Teclado numérico

Para marcar números desde la interfaz de la cuenta de Kommo, puedes mostrar una ventana modal con un teclado numérico para ingresar los números.

Para mostrar un teclado numérico, puedes utilizar cualquier método que se ajuste a tus necesidades, como utilizar el teclado del servicio VoIP llamando al SDK, escribir tus propias plantillas .twig, o implementarlo con JavaScript o HTML.

Llamada entrante

Analicemos en detalle el rol del UI/UX en las llamadas entrantes.

En primer lugar, necesitamos saber que la llamada está entrando. La llamada llega primero a la aplicación VoIP, que a su vez transmite la información sobre la llamada a través de nuestra API de integración.

Para rastrear una llamada, el widget tiene un Event listener onMessage que reconoce una llamada entrante. Después de eso, se ejecuta un callback que envía datos a Kommo indicando que se ha recibido una llamada, y se dibujan las ventanas modales con la visualización de la llamada entrante.

Junto con la información de la llamada, se reciben los datos necesarios, como el número telefónico del llamante o el ID de la llamada, que utilizaremos dentro de Kommo más adelante.

Si el usuario contesta la llamada, se inicializa la conexión y comienza la conversación.

Una vez que la conversación termina, los datos deben registrarse en Kommo mediante la API (si era un cliente; las llamadas entre empleados se descartan).Debes guardar información sobre el llamante, la duración y la grabación de la conversación, así como las notas de la llamada, si las hubiera.

Si el gerente no acepta la llamada, se registra información sobre la llamada con duración cero.

Notificación de llamada

Si decides mostrar notificaciones emergentes con información sobre las llamadas, puedes implementarlo en el frontend utilizando métodos del centro de notificaciones, como show_notification o add_call, o mediante la API de WebSocket cuando se establece una conexión permanente y una suscripción a eventos entre el cliente y el servidor.

También puedes añadir una notificación mediante la API si lo deseas, agregando un evento para la llamada que crea una notificación después de buscar el identificador de llamada. Esta notificación se vinculará a la tarjeta con ese número telefónico si existe; de lo contrario, permitirá crear un nuevo contacto.

La notificación aparecerá en la interfaz y, dependiendo del método utilizado, podría transmitirse a través de todos los canales de entrega activos.