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
- a yalst Theme.
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.
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:
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:
WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:theConfiguration];
webView.navigationDelegate = self;
NSURL *nsurl=[NSURL URLWithString:@"https://full_url_to_the_chat_SPA"];
NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurl];
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:
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.
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.
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.
- 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