Embebiendo el Webphone
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
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:
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.
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:
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.