Separater Webserver

Bei den LiveChat Clients handelt es sich um statische HTML Seiten, die auch über einen Third-Party Webserver (z.B. nginx, apache, IIS) ausgeliefert, oder in ein CMS integriert werden können. Dazu müssen die Webseiten inklusive der Konfiguration auf dem Webserver hinterlegt und erreichbar gemacht werden.

../_images/install-extern.png

UCServer veröffentlichen

Damit sich die LiveChat Clients von einem separaten Webserver zu Ihrem UCServer verbinden können, haben Sie zwei Möglichkeiten.

  • Sie richten eine direkte Verbindung zu Ihrem Webservice/UCServer ein, oder
  • Sie verwenden unsere Cloud Platform UCConnect.

Direkte Verbindung

Bei der direkten Verbindung müssen Sie genauso vorgehen, wie bereits im Kapitel Integrierte Webseiten beschrieben.

Es muss zuerst der UCServer aus dem Internet erreichbar gemacht werden. Dies erreichen Sie entweder über ein Portforwarding oder den Einsatz eines Proxy Mechanismus (Details siehe Best Practice - Veröffentlichung Webservice). Dabei ist zwingend darauf zu achten, nur sichere Verbindungen (HTTPS) mit einem vertrauenswürdigen Zertifikat (ausgestellt von einer allgemein vertrauenswürdigen Certification Authority) zu verwenden. Je nach eingesetztem Mechanismus muss das Zertifikat entweder im UCServer oder im Proxy hinterlegt werden.

Der im UCServer integrierte Webservice ist erreichbar unter: https://<server address>:7225

Wie Sie die Clients konfigurieren müssen, um sich direkt zu Ihrem UCServer zu verbinden, lesen Sie im Kapitel Server Verbindung.

Verbindung über UCConnect

Alternativ können Sie unsere Cloud Platform UCConnect verwenden. In der UCServer Verwaltung können Sie unter Online Dienste Ihren UCServer mit UCConnect verbinden.

Die Clients können sich von nun an über UCConnect zu Ihrem UCServer verbinden. Wie Sie die Clients konfigurieren müssen, um über UCConnect eine Verbindung zu Ihrem UCServer aufzubauen, lesen Sie im Kapitel Server Verbindung.

Note

Um UCConnect nutzen zu können, benötigen Sie außerdem eine ProCall Web Communication Services Lizenz. Diese Lizenz müssen Sie in Ihrem UCConnect Konto hinterlegen (https://portal.ucconnect.de).

Webseiten veröffentlichen

Als nächstes müssen Sie die Webseiten der LiveChat Clients über Ihren Webserver veröffentlichen. Stellen Sie zunächst sicher das Ihr Webserver HTTPS mit einem vertrauenswürdigen Zertifikat unterstützt, danach können Sie den Inhalt von LiveChat Clients in den gewünschten Pfad Ihres Webservers kopieren und die config.json entsprechend anpassen.

Integration in eigene Webseiten

Die LiveChat Clients, insbesondere das Widget, lassen sich auch einfach in bestehende Webseiten integrieren.

Serverseitige Integration

Bei der serverseitigen Integration passen Sie Ihr Template an und liefern sofort das richtige HTML an die Webseitenbesucher aus.

Als erstes müssen Sie hierfür die estos Web-Komponenten im Head ihres HTML Dokuments hinzufügen.

<html>
   <head>
      ...
      <script src="https://static.estos.com/p/v2/estos-components.js"></script>
      ...

Von nun an können Sie alle estos Komponenten auf Ihrer Seite nutzen. Sie müssen lediglich die gewünschte Komponente innerhalb des Body-Bereichs einfügen.

Widget

<body>
   ...
   <estos-widget configurl="./config.json"></estos-widget>
   ...
</body>

Multimedia Business Card

<body>
   ...
   <estos-directchat configurl="./config.json"></estos-directchat>
   ...
</body>

Portal

<body>
   ...
   <estos-portal configurl="./config.json"></estos-portal>
   ...
</body>

Agentenclient

<body>
   ...
   <estos-livechat configurl="./config.json"></estos-livechat>
   ...
</body>

Über den Parameter configurl geben Sie den Pfad zur Konfigurationsdatei an (siehe Konfigurierbare Features).

Warning

Wenn Sie die Konfigurationsdatei von einer anderen Domain inkludieren, muss der Webserver, der die Datei ausliefert, CORS unterstützen (Anleitungen wie Sie CORS bei Ihrem Webserver aktivieren, finden Sie hier).

IFrame Integration

Die Clients Portal und Multimedia Business Card lassen sich am besten mit einem IFrame in bestehende Webseiten einfügen.

<iframe src="https://your-server.com/portal.html"
        width="100%"
        height="600"
        frameborder="0"
        allow="microphone; camera">
</iframe>

Warning

Wenn der Inhalt des IFrames von einer anderen Domain geladen wird, müssen Sie das Attribut allow setzen (Hintergundinformation).

Achten Sie außerdem darauf, dass die Seite die den IFrame enthält, über ein gültiges Zertifikat verfügt und vom Browser als sicher erkannt wird.

Clientseitige Integration

Anstatt Ihre Webseite serverseitig anzupassen, können Sie die LiveChat Clients auch während der Laufzeit in Ihre Webseite integrieren. Hierfür müssen Sie folgendes Javascript Ihrer Seite hinzufügen.

Im Beispiel wird ein Widget inkludiert.

// 1. Create and attach client, e.g. estos-widget
var widget = document.createElement('estos-widget');
widget.setAttribute('configurl', 'https://call.yourcompany.com/config.json');
widget.setAttribute('sip', 'sip:user1@yourcompany.com');

document.body.appendChild(widget);

// 2. Create and attach the preloader
var preloader = document.createElement('script');
preloader.src = 'https://static.estos.com/p/v2/estos-components.js';

document.body.appendChild(preloader);

Verkürzte URLs für Multimedia Business Card

Die Visitenkarten sind zunächst nur über einen parametrisierte URL erreichbar, z.B. https://call.yourcompany.com/businesscard.html?sip=lena.frisch@yourcompany.com. Wollen Sie die verkürzte URL, z.B. https://call.yourcompany.com/lena.frisch verwenden, müssen Sie in Ihrem Webserver Rewrite-Regeln hinterlegen.

Beispiel nginx

Fügen Sie die folgende Zeile dem location-Block Ihrer nginx Konfiguration hinzu.

try_files $uri $uri/ /businesscard.html;

Beispiel Konfiguration:

server {

    server_name call.ucsoftware.de;

    location / {
        root /var/www/ucsoftware.estos.de;
        try_files $uri $uri/ /businesscard.html;
    }
}

Beispiel apache

Legen Sie folgende Konfiguration als .htaccess-Datei in dasselbe Verzeichnis wie businesscard.html. Als Voraussetzung muss die AllowOverride-Direktive für dieses Verzeichnis auch FileInfo beinhalten.

RewriteEngine on

# If requested resource exists as a file or directory go to it
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule (.*) - [L]

# Else rewrite requests to business card
RewriteRule (.*) /businesscard.html?sip=$1 [L]

Pop-Out Widget

Das LiveChat Widget kann auch in einem Pop-Out Modus verwendet werden, wenn die Integration in eine bestehende Webseite nicht möglich ist. Der LiveChat öffnet sich dann in einem eigenen Browserfenster. Technisch geschieht dies über GET Parameter beim Aufruf der Multimedia Business Card. Dabei wird der Software die zu verwendenden Gruppen für die Verteilungsfunktion übergeben.

Parameter

?group=GRUPPENNAME
Gruppe, die für die Verteilungsfunktion verwendet werden soll.
?initialView=textchatView
Direktes Starten des Textchat.
?initialView=videochatView
Direktes Starten eines Videochats.

Beispiel Konfiguration

businesscard.html?group=Support
businesscard.html?group=Support&group=Sales
businesscard.html?group=Support&initialView=textchatView