OMniLeads - Webphone Client addon

En este repositorio encontrará los archivos requeridos para instalar el addon WebPhone Client de OMniLeads. Este es un código que puede embeber en su página web, para permitir que sus clientes llamen a su negocio solo con un click, sin otra herramienta mas que el web browser.

Requisitos

1. Una instancia de OMniLeads

• release-1.3.2 minimamente instalado para el release-1.0.0 del webphone client.

• release-1.5.0 minimamente instalado para el release-2.0.0 del webphone client.

• release-1.7.0 minimamente instalado para el release-3.0.0 del webphone client.

• release-1.12.0 minimamente instalado para el release-3.5.0 del webphone client.

Importante

Esta instancia debe ser accesible desde Internet y debe trabajar con certificados confiables. Puede observar la documentación de OMnileads que habla sobre como instalar un servidor en la nube: OMniLeads Cloud.

2. La pagina web donde va a embeber el webphone tiene que estar usando HTTPS (Requisito de WebRTC).

Configuración en OMniLeads

Deje la configuración de OMniLeads en nuestras manos

Usted no necesita tener su propia instancia de OMniLeads para que funcione su cliente Webphone, le podemos proveer de un usuario y contraseña para conectarse a nuestro OMniLeads hosteado en la nube, 24/7. Para mas información puede contactarnos.

En la página de contacto puede encontrar el WebphoneClient funcionando!!!

Si decide usar nuestro OMniLeads hosteado, puede ir directamente a la seccion Embebiendo el webphone a su página web

Pasos para instalar el módulo WebphoneClient en OMniLeads

1. Ejecutar el script install.sh contenido en la carpeta que descargó.

2. Reiniciar el servicio OMniLeads para tener el nuevo código:

./install.sh
service omnileads restart

3. Logueese con su cuenta de admin y vaya a la página de admin https://OML_HOST/admin/. Vaya a la sección «Constance» y clickee en «Config»

4. Setear la variable WEBPHONE_CLIENT_ENABLED a True, clickeando en el box. Esto habilitará el módulo.

5. Setear la variable WEBPHONE_CLIENT_TTL. El tiempo de vida de las credenciales del webphonees de 1200 segundos (20 minutos)

6. Setear la variable WEBPHONE_VIDEO_DOMAIN con el servidor de jitsi a utilizar en caso de que quiera permitir llamadas de video.

Luego hacer click en «Save»

Registro de Key OMniLeads

Es condición necesaria que la instancia esté registrada, acción que se efectúa desde el Menú Ayuda>Registrar del panel de Administración:

Webphone Client Pro está disponible para versiones de OmniLeads 1.3.2 o superiores. Si tiene dudas en cómo obtener la key de activación, contacte a info@omnileads.net.

Configurando el WebPhone client

Con la variable WEBPHONE_CLIENT_ENABLED seteada en True, ahora puede crear un usuario WebphoneClient, logueandose a OMniLeads como admin:

1. Ir a Usuarios y Grupos –> Nuevo usuario. Escoger el rol «Webphone Client» para este usuario.

2. Puede ver el usuario creado en Usuarios y Grupos –> WebphoneClients

Nota

Recuerde el usuario y contraseña de este usuario. Los va a necesitar para para poder obtener las credenciales SIP de login usando la API de OMniLeads.

Acerca del Licenciamiento

Webphone Client es un módulo comercial, motivo por el cual su funcionamiento está sujeto a la activación de producto a partir de la vinculación de una key (llave de acceso) con el Servidor de Llaves.

El esquema de licenciamiento es de carácter permanente (key definitiva), y se brinda 1 año de actualizaciones para cobertura de bug-fixing y nuevas features sobre el release instalado. En caso de precisar upgrades de releases superado el año de la compra, se puede actualizar la key a un costo módico.

La key permite activar el módulo en 1 (una) sola instancia a la vez, y no está sujeta a la cantidad de agentes operando en la plataforma.

Si tiene dudas en cómo obtener la key de activación, contacte a info@omnileads.net.

Embebiendo el webphone a su página web

Si su página web esta hosteada en el CMS Wordpress vaya directamente a esta sección: WordPress plugin

Incluyendo el código JavaScript del webphone a su index.html

1. Copie todos los archivos .js dentro de la carpeta /static/js a su web server. Puede observar un template del archivo index.html en demo/templates/index.html para saber que debe modificar en su página si quiere agregar el WebPhone. De todas maneras vamos a describir que hacer:

2. Incluir todos los archivos .js en el html de su página, como se ve en el index.html del demo.

Importante

Mantener el orden de los archivos .js como se muestra a continuación.

{
  <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="js/state-machine-min" ></script>
  <script type="text/javascript" src="js/jssip.js" ></script>
  <script type="text/javascript" src="js/mustache-3.0.2.min.js" ></script>
  <script type="text/javascript" src="js/phoneJsTemplate.js" ></script>
  <script type="text/javascript" src="js/phoneJsFSM.js" ></script>
  <script type="text/javascript" src="js/phoneJsView.js" ></script>
  <script type="text/javascript" src="js/miniPhoneJs.js"></script>
  <script type="text/javascript" src="js/phoneJsController.js"></script>
  <script type="text/javascript" src="js/jitsi_external_api.js"></script>
}

3. Incluir el siguiente bloque <script></script>, donde se encuentra el contexto del módulo JavaScript. A continuación, está la explicación de las variables:

{
  <script type="text/javascript">
   var phone_controller = undefined;
   var miniPhoneConfig = {
     'sip_user': "<<sip_user>>",    // The sip User obtained from the POST request to the API
     'sip_password': "<<sip_password>>",    // The sip Password obtained from the POST request to the API
     'KamailioHost': "X.X.X.X",     // The LAN IP of your OMniLeads instance
     'WebSocketPort': "443",    // The Port you use to connect in web URL
     'WebSocketHost': "OML_HOST",    // The DNS you use to conect in web URL
     'container_id': 'webphone-container',  // The ID of the <div> containing all the webphone
     'container_class': 'webphone-body',    // The class of the <div> containing all the webphone
     'webphone_keys_id': 'webphone_keys',   // The ID of the <div> containing all the webphone buttons
     'phone_key_pad_id': 'phone_key_pad',   // The ID of the <div> containing the numpad
     'phone_actions_id': 'phone_actions',   // The ID of the <div> containing the buttons for make the calls
     'non_phone_actions_id': 'non_phone_actions', // The ID of the DIV containing the non calls buttons (show numpad and end call)
     'footer_img_id': 'footer_img_id',  // The ID of the DIV containing the footer (FTS logo)
     'video_container_id': 'video_container_id', // The ID of the div used for displaying the Video Call
     'reload_video_id': 'reload_video_id',       // The ID of the reload video <button>
     'images': {
       'video_green': '/path/to/img', // The path to the video_green image
       'phone_green': '/path/to/img', // The path to the phone_green image
       'phone_red': '/path/to/img',  // The path to the phone_red image
       'powered_by': '/path/to/img',  // The path to the powered_by image
       'numpad': '/path/to/img',  // The path to the numpad image
       'reload_video': '/path/to/img', // The path to the reload_video image
     }
     'buttons_class': 'key_pad_button',   // The class of the <div> containting the buttons of the numpad
     'show_keypad_button_id': 'show_key_pad', // The ID of the <div> containing the button "Toggle Keypad"
     'destinations': [                        // These are the buttons that are going to launch the calls, you must to configure the number to call in 'phone', and the 'name' to be displayed
       {'phone': '01155001121', 'name': 'Sales', 'index': '0'},
       {'phone': '01177660011', 'name': 'Help Desk', 'index': '1'},
       {'phone': '01177660012', 'name': 'Suggestions', 'index': '2'},
     ],
     'video_channels': [                      // These are the buttons that are going to launch video calls, you must to configure the number to call in 'phone', and the 'name' to be displayed
       {'phone': '01155001121', 'name': 'Video Sales', 'index': '0'},
       {'phone': '01177660011', 'name': 'Video Help Desk', 'index': '1'},
       {'phone': '01177660012', 'name': 'Video Suggestions', 'index': '2'},
     ],
     'extra_headers': [                       // SIP headers you want to add to the INVITE of call
       'OML-client: 110022993388',
       'X-Bar: bar',
     ],
     'video': {
       'width': 640,        // The width of the video call container
       'height': 480,       // The height of the video call container
       'video_domain':  "<<video_domain>>",    // The video_domain obtained from the POST request to the API
     }
}

Cambiando el contenido del html del WebPhone

Observe el archivo phoneJstemplate.js dentro de demo/static/js/. Este archivo define una variable que va a renderizar/generar el contenido html del webphone. Esto es posible gracias a una librería de JavaScript llamada mustache.

Ud puede cambiar el template HTML a su gusto pero no puede modificar las variables de mustache, las cuales estan definidas de esta manera: {{{{webphone_keys_id}}}}

Obteniendo las credenciales SIP de login a traves de la API de OMniLeads

El usuario y contraseña ingresados para el Usuario Webphone Client son usados para obtener las credenciales SIP, con el fin de loguearse al sistema telefónico dentro de OMniLeads. OMniLeads provee una API para obtener estas credenciales, que luego serán usadas por el WebPhone. Para obtenerlas, tiene que hacer un request POST hacia esta URL: “https://OML_HOST/api/v1/webphone/credentials/” usando un Esquema de Autenticación Básica.

Nota

Las credenciales SIP que da la API son efimeras. Se vuelven obsoletas luego del tiempo establecido por la variable WEBPHONE_CLIENT_TTL. Las credenciales se refrescan cada vez que la API es consultada, y esto ocurre cada vez que un cliente hace una llamada desde el webphone. Se setea por default 20 minutos porque consideramos que una llamada en promedio dura eso, pero si en su negocio algunas llamadas duran mas, considere incrementar el valor de esta variable.

Este es un ejemplo de una request hacia la URL de la API usango Postman. Es solo para mostrar la respuesta de la API:

Puede observar un ejemplo del código en python para conectarse a la API y obtener las credenciales en este archivo: demo/views.py

Cambiando el diseño del webphone

El DOM para esta aplicación es el siguiente:

Con este DOM ud puede configurar los ID’s y clases que desee, y puede usarlos en su archivo .css para cambiar el diseño por default que trae el webphone.

WordPress plugin

Creamos un sencillo plugin de WordPress, así usted puede insertar el WebPhone client como un Widget, en cualquier parte de su página web. El plugin aun no ha sido publicado en el repositorio de wordpress, por lo que tiene que ser instalado manualmente:

Installation

1. En la página de administración de Wordpress ir a Plugin -> Añadir nuevo y subir el archivo oml-webphone-client.zip.

2. Click en el botón «Instalar» y esperar a que instale.

3. Una vez instalado Activar el plugin en la lista de plugins.

Configuración

1. Ir a Settings -> OMniLeads WebphoneClient, allí va a configurar su webphone client con las credenciales del Usuario WebPhone Cliente que usted creó en su instancia OMniLeads. Luego ingrese la URL de la API.

2. Una vez configurado esto, ir al menu Widget, donde verá que disponible el «OML WebphoneClient Widget». Aquí se van a configurar mas cosas:

• Titulo: un titulo para su webphone

• KamailioHost: la IP LAN de su instancia de OMniLeads. Si nosotros estamos hosteando el OMniLeads preguntenos por este parámetro

• Opciones de estilo: el nombre de los IDs y clases para crear un diseño custom del webphone usando CSS. Observe la seccion Changelog

• Botones de llamada: puede insertar un máximo de cuatro botones de llamada. Acá configura el número a llamar y el nombre que va a tener el botón.

3. Click en guardar para salvar la configuración y ya puede observar en su página el widget insertado.

Actualización de plugin

Para actualizar el plugin es necesario primero:

1. En la página de administración de Wordpress ir a Plugin encontrar el plugin OMniLeads Webphone Addon

2. Desactivar y eliminar el plugin

3. Volver a instalarlo con el .zip actualizado.

Nota

Es necesario volver a configurar los datos en Settings -> OMniLeads WebphoneClient, pues el plugin se ha desinstalado y vuelto a instalar.

WebPhone Demo

Este es una demo de como funciona el webphone, utilizando Flask como backend. Todo el contenido esta en la carpeta demo. Para ejecutar este código ud debe:

1. Editar el objeto config en el archivo views.py con la configuración de su OMniLeads

config = {
     'URL_API_CREDENTIALS': 'https://OML_HOST/api/v1/webphone/credentials/', // Your OML instance
     'client_username': 'client_username',   // Your OML WebPhone Client User username.
     'client_password': 'clientpassword',    // Your OML WebPhone Client User password.
}

2. Editar estas variables en el archivo templates/index.html

'KamailioHost': "X.X.X.X", // This is the LAN IP of you OMniLeads instance
'WebSocketPort': "443", // This is the port you se to connect via Web browser to your OMniLeads instance
'WebSocketHost': "domain.example.com", // This is the domain name you use to connect via Web browser to your OMniLeads instance

3. Instalar flask y correrlo localmente

$ pip install Flask
$ pip install pyopenssl
$ cd demo/
$ FLASK_APP=webphone.py FLASK_DEBUG=1 flask run --cert=adhoc

Por ultimo, navegar a:

https://localhost:5000/

Changelog

Release 1.0.0:

• Initial release, possibility of edit, create and remove webphone client users

Release 2.0.0:

• Migrated the code to python3 and django 2.2.7

Release 3.0.0:

• Added compatibility of addon with OMniLeads 1.7.0

Release 3.5.0:

• Added the possibility to make video calls from the webphone.

Nota

A partir de la versión 3.5.0 existe la posibilidad de hacer Videollamada.