Live-Unterstützung Programmieranleitung

Zum Verwenden der Live-Unterstützung auf einem Unternehmens-Portal oder einer Webseite muss der folgende Code-Schnipsel in die entsprechende Seite eingefügt werden: 

<script type="application/javascript" src="https://IHR-HELPDESK-SERVER/livesupport/lib/livesupport.js" async></script>

Hierbei ist zu beachten, dass der Platzhalter IHR-HELPDESK-SERVER durch die Adresse des INETAPP-Servers, ggf. inklusive Port und Applikations-Kontext ersetzt wird.

Zugriffseinstelllungen

Die Kommunikation der Live-Unterstützung zwischen der Webseite und dem INETAPP-Server läuft via AJAX (Fetch-API) über die Web API Schnittstelle. Es ist also zwingend nötig, dass der INETAPP-Server von außen erreichbar ist.

Mit "außen" ist in diesem Fall gemeint:

  • Wird die Live-Unterstützung in einem internen Unternehmensportal eingesetzt, dann muss der INETAPP-Server in diesem Netzwerkbereich verfügbar sein
  • Wird die Live-Unterstützung auf einer öffentlichen Webseite eingesetzt, dann muss der INETAPP-Server im Internet zur Verfügung stehen.

Hinweis: Damit nicht der gesamte INETAPP-Server über das Internet erreichbar ist, besteht die Möglichkeit mittels Proxy und Firewall nur den Sub-Kontext https://IHR-HELPDESK-SERVER/livesupport zu veröffentlichen.

Hinweis: Die Fetch-API wird von älteren Browsern nicht unterstützt. Daher wird für diese - automatisch - ein zusätzliches JavaScript mit einem Polyfill geladen.

Hinweis: Eine Verbindung mit einem gültigen SSL Zertifikat ist obligatorisch.

Cross Origin Zugriff (CORS)

Das Einbetten der Live-Unterstützung erfolgt in der Regel auf einer Webseite mit einem anderen Hostnamen. Zum Beispiel:

  • Der INETAPP-Server läuft auf: https://support.mein-unternehmensportal.de
  • Die Webseite läuft auf: https://www.meine-website.de

Das Weiterleiten von Informationen, z.B. Cookies, zwischen diesen beiden Seiten wird vom Browser zunächst verhindert. Um den Zugriff dennoch zu ermöglichen, muss in der INETAPP ⇒ Konfiguration ⇒ Allgemein ⇒ Webserver ⇒ Erlaubte Cross Origin die Adresse der Webseite angegeben werden, auf der die Live-Unterstützung verwendet werden soll.

Hinweis: Die Einstellung Erlaubte Cross Origin ist eine erweiterte Einstellung

Anmeldung und Zugriffsberechtigungen

Für gewöhnlich sind für den Zugriff auf die Web API weitere Zugriffsberechtigungen nötig. Das Live-Unterstützung-Plugin benützt in diesem Fall einen eigenständigen Mechanismus, um Benutzern ohne Anmeldung einen Zugriff auf Teile der Web API zu ermöglichen.

Hierfür werden unter Anderem diverse Header Felder verwendet. Es ist also sicherzustellen, dass diese Felder zwischen dem INETAPP-Server und dem Browser des Benutzers ausgetauscht werden können. Dies ist besonders bei Verwendung des INETAPP-Servers hinter einem Load-Balancer oder Proxy zu beachten.

Hinweis: Solange die Kommunikation mit einem Supporter läuft und das Ticket im INETAPP aktiv ist, kann der Benutzer die Webseite neu laden und wird den gleichen Gesprächsverlauf angezeigt bekommen. Sowohl Benutzer, wie auch Supporter können das Gespräch einseitig beenden. Danach muss der Benutzer auf der Webseite für ein neues Gespräch von vorne beginnen.

Automatisches Dispatching

In der Konfiguration kann bereits eine Ressource für das automatische Dispatching einer Live-Unterstützungsanfrage eingestellt werden. Für die Verwendung des Chat-Fensters in verschiedenen Portalen, Webseiten oder Themenbereichen auf einer Webseite ist es gegebenenfalls sinnvoll, verschiedene Ressourcen mit jeweils spezialisierten Mitarbeitern zu verwenden.

Hierfür ist möglich, das HTML zum Einbetten des Chat-Fensters um ein Attribut data-dispatch-to zu erweitern. Als Wert wird die UUID der entsprechenden Ressource benötigt. Diese kann aus dem Benutzer- und Gruppenmanager kopiert werden.

Der HTML Code sieht dann wie folgt aus: 

<script data-dispatch-to="ca6j2572ogyuojxn1azfujog2" type="application/javascript" src="https://IHR-HELPDESK-SERVER/livesupport/lib/livesupport.js" async></script>

Anwesenheitserkennung

Die Anwesenheitserkennung ist in zwei Stufen aufgeteilt:

  1. Wird generell Support angeboten - also z.B. Anhand der Öffnungszeiten des Büros
  2. Steht ein Supporter (Dispatcher oder Ressource-Mitarbeiter) bereit, um die Anfrage zu bearbeiten

Genereller Support und Öffnungszeiten

Über eine Option in der Konfiguration wird gesteuert, ob der Live-Unterstützungs-Dialog auf der Webseite das Stellen einer Anfrage zulässt oder einen Hinweis ausgibt, dass der Benutzer außerhalb der Öffnungszeiten eine Frage stellt.

Diese Option kann über die Aufgabenplanung automatisch geschaltet werden, also z.B. um 09:00 Uhr auf verfügbar und um 17:00 Uhr auf nicht verfügbar.

Steht ein Supporter bereit

Steht kein Mitarbeiter für die Beantwortung einer Live-Unterstützungs-Anfrage zur Verfügung - sprich er ist nicht angemeldet - wird eine weitere Mitteilung an den Benutzer ausgegeben, dass gerade kein Supporter zur Verfügung steht. Das Erstellen der Anfrage ist dennoch möglich. Das ist insofern sinnvoll, als dass eine Benachrichtigung an den Supporter verschickt wird, dass eine neue Live-Unterstützungs-Anfrage gestellt wurde.

Die folgenden Mitarbeiter können für das Bearbeiten einer Live-Unterstützungs-Anfrage herangezogen werden:

  • Dispatcher - wenn die Anfrage nicht automatisch autorisiert wird
  • Ressource-Mitarbeiter - mit Schreibberechtigungen für die Ressource oder mit Schreibberechtigungen auf alle Tickets

Corporate Design

Die Live-Unterstützung kann in der Konfiguration an das Corporate Design der Webseite, auf der es angezeigt wird, angepasst werden. Die Anzahl der Einstellungen wurde hier jedoch auf ein Minimum reduziert.

Sind weitere Anpassungen nötig, so können diese mit einem eigenen CSS-Style erweitert werden. Das HTML für das Live-Unterstützungs-Fenster wird direkt an den <body> des DOM angefügt. Als Einstiegsknoten verwendet es das folgende HTML, wobei die Zahlenfolge in LiveSupport1234567890 per Zufall ermittelt wird: 

<div class="LiveSupportRoot LiveSupport1234567890">
...
</div>

Eine benutzerdefiniertes CSS sollte also als Präfix immer div.LiveSupportRoot[class*=LiveSupport] verwenden, damit die Styles die nötige CSS-Spezifität bekommen. Zum Beispiel: 

<style type="text/css">
div.LiveSupportRoot[class*=LiveSupport] {
  font-size: 30px;
}
</style>

Hinweis: Es bietet sich an, für das Schreiben von CSS-Styles LESS oder SCSS zu verwenden, da jede Regel mit dem Präfix versehen werden muss.