Embedding the Webphone

Embedding the webphone into your website

If your website is hosted on the Wordpress CMS, go directly to this section: WordPress plugin

Including the webphone JavaScript code to your index.html

1. Copy all the .js files inside the /static/js folder to your web server. You can see a template of the index.html file in demo/templates/index.html to know what you need to modify in your page if you want to add the WebPhone. Anyway, let's describe what to do:

2. Include all .js files in your page's html, as seen in the index.html of the demo.

Important

Keep the order of the .js files as shown below.

{
  <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>
}

1. Include the following block, where the JavaScript module context is located. Below is the explanation of the 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
     }
}

Changing the content of the WebPhone html

Take a look at the phoneJstemplate.js file inside demo/static/js/. This file defines a variable that will render/generate the html content of the webphone. This is made possible by a JavaScript library called mustache.

You can change the HTML template to your liking but you cannot modify the mustache variables, which are defined like this: {{{{webphone_keys_id}}}}

Obtaining SIP login credentials through the OMniLeads API

The username and password entered for the Webphone Client User are used to obtain the SIP credentials, in order to log in to the phone system within OMniLeads. OMniLeads provides an API to obtain these credentials, which will then be used by the WebPhone. To obtain them, you have to make a POST request to this URL: “https://OML_HOST/api/v1/webphone/credentials/” using a Basic Authentication Scheme.

Note

The SIP credentials provided by the API are ephemeral. They become obsolete after the time set by the WEBPHONE_CLIENT_TTL variable. The credentials are refreshed every time the API is queried, and this happens every time a client makes a call from the webphone. The default is set to 20 minutes because we consider that an average call lasts that long, but if in your business some calls last longer, consider increasing the value of this variable. This is an example of a request to the API URL using Postman. It is just to show the API response:

You can see an example of the python code to connect to the API and get the credentials in this file: demo/views.py

Changing the design of the webphone

The DOM for this application is as follows:

With this DOM you can set any IDs and classes you want, and you can use them in your .css file to change the default layout that the webphone brings.

Next Previous