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

From innovaphone wiki
Jump to navigation Jump to search
mNo edit summary
Line 174: Line 174:
* Logging auf der Konsole ausgeben lassen, indem auskommentierte Log-Funktion in der …widget.*.js Datei wieder aktiviert wird.
* Logging auf der Konsole ausgeben lassen, indem auskommentierte Log-Funktion in der …widget.*.js Datei wieder aktiviert wird.
:<code>function logFunction(text) {<br>
:<code>function logFunction(text) {<br>
:://console.log("WebRTC demo: " + text);<br>
::console.log("WebRTC demo: " + text);<br>
:}<br></code>
:}<br></code>



Revision as of 14:11, 7 September 2017

Diese Anleitung bezieht sich auf die innovaphone Widgets ab Version 12r1 für die Implementierung von Call-Me-Buttons auf der Firmenwebseite.

Voraussetzungen

  • innovaphone PBX mit Version 12r1 oder höher, die JavaSpripts der myPBX Toolbox sind darin enthalten
  • Eine Port-Lizenz mit UC-Lizenz und WebRTC-Channel-Lizenz
  • Zugang zum eigenen Webserver, vorzugsweise mit PHP-Unterstützung
  • Verschlüsselte Verbindung (HTTPS) zum Webserver und zur PBX mit gültigem SSL-Zertifikat
  • Einverständnis der Mitarbeiter, auf dem Web mit Bild und Verfügbarkeit angezeigt zu werden

Konfiguration der innovaphone PBX

  • In der PBX einen neue Nutzer anlegen
    • Namen so wählen, dass er wieder erkannt werden kann
    • Rufnummer ist nicht notwendig, da er nicht angerufen wird
    • Sicheres Passwort vergeben und merken
    • Lizenzen nicht vergessen, die WebRTC-Channel-Lizenz ist eine dynamische Lizenz und wird nicht an spezielle Nutzer gebunden.
How to install widgets new-user.png
  • Filter anlegen und dem neuen Nutzer zuordnen
    • Das Amt für Rufe nach Extern sollte gesperrt werden
    • Beliebig viele positiv- oder negativ-Listen können zusätzlich definiert werden
How to install widgets new-filter.png
How to install widgets new-user-filter.png

Konfiguration neuer PBX-Nutzer

Beispielkonfiguration für den User „extern-web“

Unter PBX, Config, Filter wird der neue Filter definiert. Mit Nummer „0“ und Aktion „nok“ wird die „Amtsholung 0“ deaktiviert.

Dem neuen PXB-Nutzer wird dieser Filter zugeordnet:

Konfiguration der veröffentlichten Teilnehmer

Die Teilnehmer, die auf der Webseite präsentiert werden, sollten ihre Sichtbarkeit für den neuen Nutzer einschränken

  • Kann vom Administrator in der PBX-Administration gesetzt (oben)
  • Kann vom Teilnehmer in der myPBX Oberfläche gesetzt werden (rechts)
  • Empfohlen wird : Onlinestatus, Aktivität und Besetztstatus, alle anderen Informationen sind nicht notwendig
How to install widgets visibility-PBX-Admin.png
How to install widgets visibility-myPBX.png

WebRTC-Lizenz auf der PBX

  • Ist eine „floating license“ , also pro Verbindung wird eine Lizenz eingesetzt
  • Anzahl der Lizenzen sollte der max. Anzahl eingehender Verbindungen entsprechen.
  • In der PBX Konfiguration unter „PBX – Config – General“ erkennbar:
How to install widgets license-1.png
  • Nach dem Einspielen der Lizenzen müssen die Lizenzen für die PBX zugeordnet werden – auf der gleichen Konfigurationsseite, etwas oberhalb:
How to install widgets license-2.png

Installation auf dem Webserver

  • Download Files aus V12-toolbox.zip
  • JavaScript-, CSS-, PHP- und andere Dateien auf dem Webserver ablegen
  • ggf. Pfade anpassen
  • Dateiplatzierung ist beliebig, aber …
  • …Dateien möglichst zusammen lassen, weil ein Parameter in der Konfiguration auf dieses Verzeichnis verweist
  • PHP-Datei auf ein von außen zugängliches Verzeichnis, z.B. „root“
  • Bilder (Fotos, Avatar) für interne Teilnehmer erstellen und ablegen
  • HTML-Seite mit JavaScript erweitern
  • Bei Visitenkartenansicht: Container für die Positionierung anlegen
  • Corporate Design anpassen
  • Testen und freigeben

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

Wird der Pfad js/ geändert, kann der Wert pathPrefix unter parameters angepasst werden.

Implementierung auf der Webseite

Datei: index.html Einbinden benötigter CSS-Dateien im Header JS-Dateien bevorzugt am HTML-Ende laden

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 Verbindung zur PBX, Domainnamen anpassen, keine IP-Adresse, SSL-Zertifikat auf Domainnamen

urlAuth: Verbindung zur Authentifizierung, Domainnamen anpassen

pathPrefix: Verzeichnis, in denen die Dateien abgelegt sind – mit / am Ende

companyName, -Street, -City: wird nur angezeigt

companyTel, -Fax: wird im SidebarWidget angezeigt

companyEmail: wird im SidebarWidget angezeigt und verlinkt

companyTrunk: wird im BusinessCard Widget zusammen mit supporters.phone angezeigt

supporters:

name: wird angezeigt
shortcut: wird zur Authentifizierung an der PBX benutzt
phone: Interne Durchwahl wird gewählt
img: Link zum Avatar-Bild, 240 x 240 Pixel, .png oder .jpg
email: wird mit dem Button verlinkt
department: wird nur angezeigt

Übersetzungen (optional)

Der Text in Hochkommas kann beliebig verändert und übersetzt werden. Sofern die translations nicht gesetzt sind werden englische Texte angezeigt.

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

}
Achtung: Bei Ergänzung der parameters muss hinter dem schließenden ] von supporters ein Komma gesetzt werden.

Positionierung der Visitenkarten

An die Stelle, an der die Visitenkarten angezeigt werden sollen, wird ein leerer DIV-Container im HTML-Code eingefügt. Die Anzeige der Visitenkarten erfolgt im responsive Webdesign. Es werden so viele Visitenkarten nebeneinander angezeigt, wie der Browser gerade Platz zur Verfügung hat. Das funktioniert auch für Webdesigns mit fester Breite.

Authentifikation

Authentifizierung mit SHA (empfohlen)

  • Passwort wird nicht übertragen und kann nicht mitgelesen werden
  • Benötigt ein PHP-Script auf dem Server, das einen Schlüssel generiert
  • Der Schlüssel wird mit dem Schlüssel auf der PBX verglichen
  • Der Algorithmus wird bei jedem Aufruf verändert

Authentifizierung mit User-Name und Passwort (nicht empfohlen)

  • Passwort wird über das Internet übertragen und kann ausspioniert werden
  • Benötigt kein PHP-Script
  • Wird eingetragen in innovaphone.widget.BusinessCards.js oder .SideBar.js

Die Variablen $username und $password in WebRtcAuth.php müssen den Angaben in der innovaphone PBX entsprechen.

Die Variable $realm muss dem System Name der innovaphone PBX entsprechen.

How to install widgets realm.png

Sofern der Quelltext der Datei WebRtcAuth.php von außen nicht einsehbar ist, bleibt diese Information geschützt. Sowohl die PBX als auch das JavaScript errechnen den gleichen Hash zur Authentifizierung. Die nächste Authentifizierung benutzt wieder einen neuen Hash, so dass das Verfahren nicht aufgelöst werden kann.

Tipps zur Fehlersuche

  • Firefox mit Erweiterung Firebug nutzen
  • Konsole öffnen und Seite neu laden
  • Folgende Ausschrift erscheint bei gültiger Authentifizierung:
GET https://www.innovaphone.com/WebRtcAuth.php?SID=f970479ecc6757012c74005056975b0c&SNO=105655742 200 OK 118ms
  • Ansonsten dort aufgetretene Fehlermeldungen betrachten
  • Logging auf der Konsole ausgeben lassen, indem auskommentierte Log-Funktion in der …widget.*.js Datei wieder aktiviert wird.
function logFunction(text) {
console.log("WebRTC demo: " + text);
}

Related Articles: Reference12r1:Concept myPBX Toolbox