Howto:Install the innovaphone Call-Me-Button Widgets (de): Difference between revisions
mNo edit summary |
mNo edit summary |
||
Line 150: | Line 150: | ||
Authentifizierung mit SHA (empfohlen) | Authentifizierung mit SHA (empfohlen) | ||
*Passwort wird nicht übertragen und kann nicht mitgelesen werden | *Passwort wird nicht übertragen und kann nicht mitgelesen werden | ||
*Benötigt ein PHP-Script auf dem Server, | *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 Schlüssel wird mit dem Schlüssel auf der PBX verglichen | ||
*Der Algorithmus wird bei jedem Aufruf verändert | *Der Algorithmus wird bei jedem Aufruf verändert |
Revision as of 12:47, 23 June 2016
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 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.
- 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
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
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:
- Nach dem Einspielen der Lizenzen müssen die Lizenzen für die PBX zugeordnet werden – auf der gleichen Konfigurationsseite, etwas oberhalb:
Installation auf dem Webserver
- 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 HLML-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.
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);
- //console.log("WebRTC demo: " + text);
}
Related Articles: Reference12r1:Concept myPBX Toolbox