Integrating the Chat in Native Apps

Overview

It is possible to offer the live chat for the visitor not just on web pages but in native apps as well. Such an app has to embed a WebView for the Chat Single Page App (SPA).

The Chat SPA powers the Chat on Mobile and the Tab Chat Directly on the Page in yalst. Basically it consists first of a customisable query form for collecting data pre-chat and seconds of the actual chat UI.

The Tab Chat Directly on the Page you’ll have most likely already encountered when creating the integration code as Admin as it is the first option there.

When embedding the chat in smartphone apps though, you’ll want to use the Chat on Mobile variant of the Chat SPA. It has the upper toolbar for changing the language and closing the chat and is optimised for touch screen.

Customising the Chat

The layout can be customised in the same ways as the Chat on Mobile by

  • define colours in the Admin Area,
  • customise the jQuery Mobile Theme using jQuery Themeroller

The functionality can be changed by injecting JavaScript into the SPA using

  • native WebView JavaScript bridge (see below), or
  • yalst Theme.

The Chat SPA offers a JavaScript API for interacting with your injected code.

Responsibilities for the Host App

There is no code generator for host apps as there is for host web pages in the yalst Admin Area.

It is the responsibility of the host app to guide the user towards the chat, e.g. by painting a chat button, detecting taps on the chat button and showing a view with the WebView containing the Chat SPA.

The app has to determine the availability of the service itself. Yalst provides web APIs for this purpose.

Here are some settings for configuring the Chat SPA using url query parameters:

  • site (required): yalst instance id (e.g. 1-1)
  • from (essential): text string shown in the incoming chat notification for the agent (could be the name of the host app)
  • direct(optional, boolean 1/0): skips the query form before chat start
  • dept (optional): character identifying a yalst department for routing the chat.
  • chat_id_param (optional): pick up a running chat
  • session_id_param (optional): pick up a running chat
  • department_id_param (optional): pick up a running chat

Embedding a WebView with the Chat SPA in a host app it needs not many more lines of code than for integration on a web page:

iOS

There is are a lot of guides and tutorials available for embedding a WKWebView in an iOS app.

The general procedure is given in a few lines of code as found e.g. on Stackoverflow:

As quick demo you can install the WKWebView Test app from the App Store and load a WKWebView with the address of the Chat SPA:

https://<yalst-server>/yalst/mobile/index.php?site<site id>&from=My%20Sample%App

For the JavaScript bridge between the Chat SPA and the host app one can use [WKWebView evaluateJavaScript] and WKUserContentController

Background Execution

Closing the host app has the same effect on a running chat as closing Mobile Safari or hiding the browser tab with the host web page on the desktop: The chat is put into a Sleep Mode indicated with a blue color bar in the agent’s chat window. The next time the app is activated it fetches the messages the agent might have send in the meantime.

In order to notify the user immediately the host app is required to enable Background Fetch Mode or Push Notifications. Background chat updates will be implemented in a later version or yalst.

Android

The procedure is similar to iOS: You’ll have to embed a WebView in your Android app. WebView is updated with Chrome from Android 4.4 on. However transferring files requires Android 5.

The sample app is configured to embed the live support chat for yalst.

The source code of the Android Sample App will be available on Github.

Background Execution

When closing the Android host app the Chat SPA can continue to run in the background to fetch messages from the agent. It however has no means to show a notification to the user. This must be implemented by the native host app.

On the other hand the Chat SPA can be put into Sleep Mode like on iOS. Entering and leaving Sleep Mode is not done automatically – events need to be sent by the host app.

Screenshots

Limitations (Roadmap)

  • The download of transferred images into the Camera Roll is currently not working on iOS.
  • The next update of the Android Sample App will resolve these issues:
    • The upload of files e.g. from the Photo Gallery
    • Download of the chat transcript
    • Cache performance

 

yalst 9.4 Live-Chat mit vielen Neuerungen erschienen

Was ist neu?

  • Popup-, Tab- und mobiler Chat nun weitgehend mit identischem Funktionsumfang
  • Anzeige von Firma/Organisation, Branche und Website bei Besuchern
  • komplett überarbeiteter Operator-Monitor für Administratoren und Teamleiter
  • flexible Unterlogins und Zugriffsrechte für die Administration

und vieles mehr…

Popup-, Tab- und mobiler Chat mit identischem Funktionsumfang

Pünktlich zu Jahresbeginn sind wir mit einer neuen yalst-Live-Chat-Version am Start, die eine Vielzahl an Neuerungen und Verbesserungen bietet. Bereits mit dem letzten Update haben wir mit dem Tab-Chat eine Möglichkeit geschaffen, direkt in einer Webseite zu chatten, ohne dass sich ein Popup-Fenster öffnet. Allerdings fehlten noch eine Reihe von Funktionen des Popup-Chats wie z.B. die Datei-Übertragung oder der Chat mit zwei Operatoren. Bis auf zwei Ausnahmen (Chat mit registrierten Benutzern und Audio-/Video-Chat) haben wir diese nun alle nachgerüstet. Auch die Einladungen in Tab-Chats haben wir verbessert. Und – last but not least – können Sie den Chat-Tab jetzt flexibel an jedem Seitenrand platzieren, ganz einfach mit Hilfe unseres verbesserten HTML-Codegenerators.


Anzeige und Statistik von Firmenname, Branche und Website – fast eine eigene Software

Wenn Sie den yalst-Live-Chat schon länger nutzen, werden Sie unseren informativen Besucher-Monitor schätzen, der Ihnen einen schnellen Überblick verschafft, wieviele Besucher gerade auf Ihrer Website sind, aus welcher Region sie kommen und welche Seiten sie betrachten. Aber wäre es für eine gezielte Einladung und Beratung nicht auch gut zu wissen, welcher Firma oder Organisation ein Besucher angehört? Mit yalst-Live-Chat 9.4 werden Ihnen in der Business-Edition zu Besuchern, die das Internet über eine IP-Adresse nutzen, welche sich einer Firma oder Organisation zuordnen lässt, und, die in unserer Datenbank eingetragen ist, Firmenname, Branche und Website angezeigt. Unsere Datenbank umfasst derzeit über 31.000 Einträge und wird ständig erweitert. Die Anzeige ist natürlich nicht nur im Besucher-Monitor integriert, sondern auch im Chat-Fenster des Operators, den Chat-Historien und diversen Statistiken. Über eine neue Firmen-Statistik lässt sich auch im Nachhinein nachvollziehen, welche Unternehmen Ihre Website besucht haben und welche Inhalte sie sich angeschaut haben – eine ideale Grundlage für eine aktive Kontaktaufnahme per E-Mail oder Telefon. Aus unserer neuen Branchenstatistik können Sie leicht nachvollziehen, welche Branchen sich für Ihr Internetangebot interessieren. Allein für diese Funktionen hätten Sie bisher ein separates Produkt benötigt.

Die Warteschlangen-Funktionen

Für Ihre Besucher, die auf einen Chat warten, gibt im yalst-Live-Chat 9.4 neue Warteschlangen-Funktionen. So kann beispielsweise Besuchern in der Warteschlange ausgegeben werden, an welcher Position sie sich gerade befinden und wie lange es voraussichtlich noch dauert, bis ein Operator verfügbar sein wird.

 

Der Operator-Monitor – nun alles auf einen Blick

In der Administration haben wir den Operator-Monitor komplett überarbeitet. Mit dem neuen Vollbild-Modus haben Sie z.B. die Möglichkeit, das aktuelle Operator-Geschehen auf einem großen Wandmonitor anzuzeigen. Zusätzlich ermöglicht der Operator-Monitor nun das Mitlesen laufender Chats und das Senden von Mitteilungen an angemeldete Operatoren. Weiterhin wird nun noch angezeigt, wie lange ein Operator sich schon in einem bestimmten Zustand (aktiv, inaktiv oder busy) befindet.

 

Mehrere Unterlogins für Abteilungen, Statistikgruppen und die Komplettstatistiken

Für den Zugriff auf die Statistiken in der Administration können Sie schon seit geraumer Zeit Unterlogins einrichten, allerdings nur einen für alle Statistiken, einen pro Abteilung und einen pro Statistikgruppe. Diese Beschränkungen entfallen mit yalst-Live-Chat 9.4, Sie können nun beliebig viele Unterlogins für Ihre Abteilungs- und Gruppenleiter sowie externe Partner anlegen. Für jeden Benutzer können Sie darüber hinaus Rechte vergeben (Zugriff auf die Chat-Historie, Zugriff auf den Operator-Monitor, Ausloggen von Operatoren und Nachrichtenversand an Operatoren).

Ebenfalls in der Administration finden Sie eine neue Operator-Conversion-Statistik. Wenn Sie das Conversion-Tracking von yalst nutzen, z.B. um Verkäufe über die Website statistisch zu erfassen, können Sie dieser Statistik entnehmen, welche Operatoren durch Ihre Beratung zu welchen Verkäufen geführt hat. Dies ermöglicht u.a. eine erfolgsbasierte Vergütung Ihrer Online-Berater.

Auf vielfachen Wunsch sind Chat-Transkript-Mails jetzt Theme-fähig. Sie können dort Design-Anpassungen vornehmen sowie Texte am Anfang und am Ende der E-Mail hinzufügen.

Diese und weitere Neuerungen, Detailverbesserungen und Bugfixes machen yalst zu Ihrer universellen Software für Live-Support, Besucheranalyse und E-Marketing. Version 9.4 ist das beste und stabilste yalst, welches wir bisher veröffentlicht haben. Alle yalst-Live-Chat-Mietlösungen wurden automatisch auf die neue Version umgestellt. Besitzer von Kauflösungen empfehlen wir über unseren Kundenbereich ein Update beziehen (kostenfrei für Kunden mit Wartungsvertrag, ansonsten kostenpflichtig).