Supporting Mobile Devices

TalkJS has been designed from the ground to work well in mobile web browsers and inside mobile apps (using a Webview).

TalkJS is responsive, so if your app is as well, the most of it should just work great out of the box. This page lists some ways you can improve the user experience on mobile.

Fixing the viewport

For more native-like user experiences on mobile devices, we recommend fixing the width and height of the viewport, so that the chat fills the screen perfectly. Additionally, you probably want to disable zoom so that touch interactions become as fast as in native apps (most mobile browsers add a 300ms tap delay unless you disable zoom).

The code below accomplishes both these steps.

1<meta
2  name="viewport"
3  content="width=device-width, initial-scale=1, maximum-scale=1"
4/>

Note: On iOS 10+, Safari will not actually disable zoom with this setting, but it will still support immediate touch interactions.

Mobile push notifications

If you embed TalkJS into a native app using Webviews, you can use our support for mobile push notifications as described here.

Cordova, PhoneGap and Ionic

TalkJS has been designed to work well inside Cordova-based apps, and you ought to be able to follow the usual web-based integration steps.

However, you need to add a few little settings to make everything work smoothly:

1. Whitelist TalkJS

On some platforms, you need to whitelist the TalkJS URIs to be able to load TalkJS.

  1. Install cordova-plugin-whitelist, and scroll down to the section about Content Security Policies.
  2. Add a Content Security Policy which allows access to https://*.talkjs.com.
  3. We depend on Google Cloud for the file sharing feature. If you use file sharing, also add https://firebasestorage.googleapis.com

By default, Cordova will open all links inside your app, which includes external links that your users may share amongst each other. If you don't want that, install cordova-plugin-inappbrowser. Don't worry about the plugin's confusing name, it includes a feature to avoid using an in-app browser :-)

TalkJS will automatically detect the presence of this plugin and ensure that external links are opened in the device's system browser.

React Native

For React Native, we have made available a SDK that will greatly simplify the work of integrating TalkJS into your application. Please check out our React Native Getting Started guide, or view our TalkJS React Native examples for reference.

The section below is meant only as a reference for users who had implemented React Native prior to the release of the SDK. New projects involving React Native should use the SDK

On Android, the webview will by default open the default browser to handle any links clicked. This is not the case on iOS. If you try to open a link or attachment from a chatbox in a default WebView, it will open in the same window and you won't be able to go back.

We recommend implementing a workaround using the onShouldStartLoadWithRequest callback. Once this callback is triggered you can open the link in an external browser using React Native's Linking module.

1import { Linking, Platform } from 'react-native';
2

3const webview = React.createRef();
4

5return (
6  <WebView
7    ref={webview}
8    source={{ html: html, baseUrl: baseUrl }}
9    //TalkJS initialization code
10    injectedJavaScript={injectedJavaScript}
11    onShouldStartLoadWithRequest={(request) => {
12      const url = request.url;
13      if (
14        Platform.OS === 'ios' &&
15        request.navigationType === 'click' &&
16        Linking.canOpenURL(url)
17      ) {
18        Linking.openURL(url); // Open link in separate Safari window.
19        return false; // Stops webview from loading the clicked link.
20      }
21      return true;
22    }}
23  />
24);

Flutter

For Flutter, we have made available a SDK that will greatly simplify the work of integrating TalkJS into your application. Please check out our Flutter Getting Started guide, or view our TalkJS Flutter examples for reference.