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

From innovaphone wiki
Jump to navigation Jump to search
Line 218: Line 218:
  Failed to load https://www.domain.tld/js/innovaphone/WidgetAuth.php?SID=xxx&SNO=xxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://domain.tld' is therefore not allowed access.
  Failed to load https://www.domain.tld/js/innovaphone/WidgetAuth.php?SID=xxx&SNO=xxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://domain.tld' is therefore not allowed access.


You try to load dynamically content from other Domain/Subdomain. Load the content from the same Domain/Subdomain or fix you Access-Control-Origin Policie
You try to load dynamically content from other Domain/Subdomain. Load the content from the same Domain/Subdomain or fix you Access-Control-Origin Policie.


=Known Issues=
=Known Issues=

Revision as of 07:57, 7 September 2018

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

Requirements

  • innovaphone PBX Version 12r1 or higher
  • A Port-license with UC-license for external WebRTC-User
  • WebRTC channel licenses
  • UC-license or MyPBX-license for displayed Operators
  • Reachable PBX from Internet (Please read: Reverse Proxy and No-Nos)
  • Encrypted connection (HTTPS) to the PBX and Web server with a valid SSL certificate
  • Access to your own Web server, preferably with PHP support
  • Consent of employees whose picture and Presence information is to be displayed on the Web
  • Operator must have opened the MyPBX

innovaphone PBX configuration

Example configuration for the user "extern-web"

Create Call Filter

Setup a new Filter to prevent calls via WebRTC to unintentional targets. For example a call to the Trunk line should be forbidden.

How to install widgets new-filter.png

Create WebRTC user

  • Telephone number is not necessary, as the user will not be called
  • Assign and remember a secure password
  • Activate Config VOIP in the Hardware id
(You must set a "Name" for "Hardware id")
How to install widgets new-user.png
  • Assign previous generated Call Filter
  • Activate Discard Config on Phone and Reject ext. Calls on Tab User
How to install widgets new-user-filter.png
  • Select WebRTC on Tab "WebRTC"
  • Activate UC-License

Configuration of Visibility

  • Add the new User to a new PBX Group called "extern-web" as active member
  • Operators who are presented on the Web page should restrict their visibility for the new group
  • Recommended: online status, presence and on the phone status, all other information is not necessary
How to install widgets visibility-PBX-Admin.png

WebRTC license on the PBX

  • is a "floating license", i.e. one license is used per connection
  • number of inbound connections cannot exceed the max number of licenses
  • amount of licenses have to be assigned to the PBX configuration
How to install widgets license-2.png

Installation on the Web server

  • Download toolbox package from Download Server
    • You need innovaphone-widgets.zip from the package
  • Extract innovaphone-widgets.zip and put all files to your Webserver
    • /js/innovaphone/
    • If necessary you can adjust paths and structure. If you change the structure please keep in mind that you must fix some path refernces (like "css/") and the pathPrefix in JS Parameters
  • Create and store images (photos, avatar) for internal subscribers

Confguration

  • Extend your Website with some CSS, JavaScript and HTML
    • We will deliver a sample called Widget.html
    • In this example we will use both examples. SideBar and BusinessCards. If you only use one of them you can remove unused files from your Website
add css files to your <head>
<link rel="stylesheet" href="/js/innovaphone/innovaphone.widget.SideBar.css">
<link rel="stylesheet" href="/js/innovaphone/innovaphone.widget.BusinessCards.css">
<link rel="stylesheet" href="/js/innovaphone/innovaphone.widget.general.css">
add js files to your <head>
<script src="/js/innovaphone/innovaphone.common.crypto.js"></script>
<script src="/js/innovaphone/innovaphone.pbxwebsocket.Connection.js"></script>
<script src="/js/innovaphone/innovaphone.pbxwebsocket.ToneGenerator.js"></script>
<script src="/js/innovaphone/innovaphone.pbxwebsocket.WebRtcEndpoint.js"></script>

<script src="/js/innovaphone/innovaphone.widget.SideBar.js"></script>
<script src="/js/innovaphone/innovaphone.widget.BusinessCards.js"></script>
For business card view create a container for positioning
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.
<div id="supporters-card-container"></div>
  • Adjust Layout to your corporate design

Initialization

Add js Parameter to your Website.

Please add the correct Link for urlPbx and urlAuth
<script>
var parameters = {
	urlPbx: "wss://pbx.example.com/PBX0/WEBSOCKET/websocket",
	urlAuth: "https://www.example.com/WidgetAuth.php",
	pathPrefix: "js/innovaphone/",
	username: null,
	password: null,
	device: null,
	physicalLocation: null,
	regContext: "0",
	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: '/js/innovaphone/WidgetDummy1.jpg', 'email': 'dummy1@innovaphone.com', department: 'Development'},
		{name: 'Dummy 2', shortcut: 'd2', phone: '211', img: '/js/innovaphone/WidgetDummy2.jpg', 'email': 'dummy2@innovaphone.com', department: 'Sales'},
	],
	status: {
                available: { text: 'Verfügbar', className: 'available', active: true },
                away: { text: 'Abwesend', className: 'not-available', active: false },
                lunch: { text: 'Beim Essen', className: 'not-available', active: false },
                vacation: { text: 'Im Urlaub', className: 'not-available', active: false },
                busy: { text: 'Beschäftigt', className: 'offline', active: false },
                dnd: { text: 'Nicht stören', className: 'offline', active: false },
                closed: { text: 'Offline', className: 'offline', active: false },
       },
};
new innovaphone.widget.SideBarWidget(parameters);
new innovaphone.widget.CardWidget(parameters);         
</script>


urlPBX: Secure Websocket connection to the PBX, domain name is needed no IP address (valid SSL certificate on PBX is required)

urlAuth: Adjust the authentication connection, domain name is needed no IP address (valid SSL certificate on Webserver is required)

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 extended with supporters.phone number

supporters:

name: is displayed
shortcut: the "Name" field of the PBX User
phone: the "Number" field of the PBX User
img: Link to avatar-image, 240 x 240 pixels
email: is linked with the button
department: is only displayed

status: predefined presense

text: id displayed
className: decide if supporte should be available [available / not-available / offline]
active: enable/disable presence on Website

Translations (optional)

If needed you can modify displayed Strings. Add the following settings to JS Parameters

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",
},

PBX Authentication

  • Authentication with SHA256 (strongly recommended)
- Password is not stored in JS Files
- Password will not be transmitted and can not be traced
- Requires a PHP script on the server, which generates a key (WidgetAuth.php)
- A unique key will be generated and compared against the key on the PBX
- The key is modified upon each request

The variables $username and $password in WidgetAuth.php must be Name and Password from PBX Object extern-web.

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

username and password in JS Parameters must be "null"

  • Authentication with username and password (not recommended, only for tests)
- Password will be stored in plaintext in your JS Files (Every can read them)
- Password is transmitted over the Internet and can traced
- Does not require a PHP script

To activate user/pass authentitacion use username and password fields in JS Parameters

Troubleshooting

Use Developer Tools in your Browser (F12) reload the page and check console messages, network requests and websocket traffic.

  • See that PHP-AUTH-Token was generated:
GET https://www.domain.tld/js/innovaphone/WidgetAuth.php?SID=xxx&SNO=xxx 200 OK 118ms
  • See that WebRtcEndpoint was connected
WebRTC: Endpoint: state=CONNECT
innovaphone.widget.BusinessCards.js:189 WebRtcEndpoint: WebRTC: Endpoint: state=CONNECT
innovaphone.widget.BusinessCards.js:189 WebRtcEndpoint: WebRTC: Endpoint: state=CREATE_SIG
innovaphone.widget.BusinessCards.js:189 WebRtcEndpoint: WebRTC: Endpoint: state=UP id=1
also the registration must be shown in the PBX registrations list
  • Error: missing UC License on PBX WebRTC User
WebRtcEndpoint: WebRTC: Endpoint: state=CONNECT
innovaphone.widget.SideBar.js:201 WebRtcEndpoint: WebRTC: Endpoint: state=WAIT_CONNECT error=ERROR_NO_LICENSE
  • Error: declined authentication
WebRtcEndpoint: WebRTC: Endpoint: state=CONNECT
innovaphone.widget.SideBar.js:201 WebRtcEndpoint: WebRTC: Endpoint: state=WAIT_CONNECT error=ERROR_CLIENT_AUTHENTICATION
  • Enable the commented log-function in the widget.*.js files.
function logFunction(text) {
	console.log("WebRTC demo: " + text);
}

Troubleshooting Common Errors

WebRtcEndpoint: WebRTC: Endpoint: state=WAIT_CONNECT error=ERROR_CLIENT_AUTHENTICATION
Failed to load https://www.domain.tld/js/innovaphone/WidgetAuth.php?SID=xxx&SNO=xxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://domain.tld' is therefore not allowed access.

You try to load dynamically content from other Domain/Subdomain. Load the content from the same Domain/Subdomain or fix you Access-Control-Origin Policie.

Known Issues

  • Sidebar Widget: Status object overwrite doesnt work
  • Sidebar Widget: Objects "extern-webrtc" and supporters must be on the same PBX

Related Articles

Tools clipart.png FIXME: pdf's has to be updated