Howto:Install the innovaphone Call-Me-Button Widgets (en)

This guide is related to the innovaphone Widgets version 12r1 ti implement the Call-Me-Button on the companys website.

Requirements

• innovaphone PBX Version 12r1 or higher, the myPBX Toolbox JavaSpripts are included
• A port license with UC and WebRTC channel license
• Access to your own Web server, preferably with PHP support
• Encrypted connection (HTTPS) to the Web server and the PBX with a valid SSL certificate
• Consent of employees whose picture and Presence information is to be displayed on the Web

innovaphone PBX configuration

• Create a new user on the PBX
  • Select the name so that it can be recognised again
  • Telephone number is not necessary, as the user will not be called
  • Assign and remember a secure password
  • Don’t forget the licenses, the WebRTC channel license is a dynamic license and is not tied to specific users.

• Create filters and assign to the new users
  • The trunk line for external calls should be blocked
  • Any number of black or white lists can be additionally defined

New PBX user configuration

Example configuration for the user "extern-web"

The new filter is defined under PBX, config, filter. The 'trunk line 0' is deactivated with the number "0" and "nok".

This filter is assigned to the new PBX user

Configuration of the subscriber who is presented online

Subscribers who are presented on the Web page should restrict their visibility for the new user

• Can be set by the administrator in PBX Administration
• Can be set by the subscriber in the myPBX interface
• Recommended: online status, presence and on the phone status, all other information is not necessary

WebRTC license on the PBX

• is a "floating license", i.e. one license is used per connection
• number of licenses should not exceed the max. number of inbound connections.
• can be seen in the PBX configuration under "PBX - Config - General":

• once licenses have been imported, they have to be assigned to the PBX - on the same configuration page, slightly higher:

Installation on the Web server

• Store the JavaScript, CSS, PHP, and other files on the Web server
• If necessary adjust the path
• You can place the files anywhere, but...
• … if possible leave the files together, because a parameter in the configuration refers to this directory
• PHP file in a directory that is accessible externally, such as "root"
• Create and store images (photos, avatar) for internal subscribers
• Extend HTML page with JavaScript
• For business card view: Create a container for positioning
• Adjust to corporate design
• Test and share

/js/*.css
/js/*.js
/js/*.mp3
/js/*.svg
/img/avatar*.png
/WebRtcAuth.php
/index.html

If the path js/ is changed, the value pathPrefix can be adjusted under parameters.

Initialization

File: index.html Include required CSS files in the header js files to be loaded preferably at the end of the HTML

var parameters = {


urlPbx: "wss://pbx.example.com/PBX0/WEBSOCKET/websocket",

urlAuth: "https://www.example.com/WebRtcAuth.php",

pathPrefix: "js/",

companyName: ‚Example AG',

companyStreet: 'Str. 99',

companyCity: ‚1234 City',

companyTel: '0321/ 4444- 0',

companyTrunk: '0321 / 4444',

companyFax: '0321 / 4444- 9',

companyEmail: 'info@example.com',

supporters: [

{name: 'Dummy 1', shortcut: ‚d1', phone: '210', img: 'img/avatar1.jpg', 'email': 'dummy1@innovaphone.com', department: 'Development'},

{name: 'Dummy 2', shortcut: ‚d2', phone: '211', img: 'img/avatar2.jpg', 'email': 'dummy2@innovaphone.com', department: 'Sales'}

]

};
new innovaphone.widget.SideBarWidget(parameters);
new innovaphone.widget.CardWidget(parameters);


urlPBX: Secure Websocket connection to the PBX, adapt domain name, no IP address, SSL certificate on domain name

urlAuth: Adjust the authentication connection, domain name

pathPrefix: Directory in which the files are stored - with / at the end

companyName, -Street, -City: is only displayed

companyTel, -Fax , is displayed in the SidebarWidget

companyEmail: is displayed in the SidebarWidget with link

companyTrunk: is displayed in the business card widget together with supporters.phone

supporters:

name: is displayed

shortcut: the "Name" field (h323) of the User

phone: Internal telephone extension number is dialled

img: Link to avatar-image, 240 x 240 pixels, .png or .jpg

email: is linked with the button

department: is only displayed

Translations (optional)

The text in inverted commas can be modified and translated. If there are no translations in place, English texts are shown.

,
translations: {


available: "Verfügbar",

unavailable: "Nicht verfügbar",

call: "Anruf",

videocall: "Videoanruf",

email: "E-Mail",

confirm: "Mit verlassen dieser Webseite wird Ihre Verbindung beendet. Bitte nutzen Sie den Rechtsklick mit der Option Link im neuen Tab öffnen.",

unsupported: "Dieser Browser unterstützt kein WebRTC"

}
Please note: When making changes to parameters, a comma must be placed after the closing ] from supporters.

Positioning the business cards

An empty DIV-container is inserted in HTML code where the business card is to be displayed. Responsive web design is used to display the business cards. The number of business cards that appear side by side is determined by the amount of space the browser has. This also works also for Web designs that have a fixed width.

Types of authentication

Authentication with SHA (recommended)

• Password is not transmitted and can not be traced
• Requires a PHP script on the server, which generates a key
• The key is compared against the key on the PBX
• The algorithm is modified upon each request

Authentication with user name and password (not recommended)

• Password is transmitted over the Internet and can be hacked
• Does not require a PHP script
• Is entered in innovaphone.widget.BusinessCards.js or. SideBar.js

The variables $username and $password in WebRtcAuth.php must correspond to the specifications in the innovaphone PBX.

The variable $realm must correspond to the system name of the innovaphone PBX.

The information remains protected if the WebRtcAuth.php file source code cannot be seen externally. Both the PBX and the JavaScript generate the same hash for authentication. The next authentication uses another new hash, so that the process can not be resolved.

Troubleshooting

• Use Firefox with the Firebug extension
• Open console and reload this page
• The following output is displayed if authentication is valid:

GET https://www.innovaphone.com/WebRtcAuth.php?SID=f970479ecc6757012c74005056975b0c&SNO=105655742 200 OK 118ms

• Otherwise take account of the error messages displayed
• Let logging be shown on the console by re-activating the commented log-function in the... widget.*.js file.

function logFunction(text) {

console.log("WebRTC demo: " + text);

}


Related Articles

• Reference12r1:Concept myPBX Toolbox
• https://www.innovaphone.com/content/downloads/innovaphone-Widgets-Webinar-EN.pdf
• https://www.innovaphone.com/content/downloads/innovaphone-Widgets-Installation_EN.pdf