Supporting mobile devices

TalkJS works well in mobile web browsers and inside mobile apps, using a WebView. On this page you'll find an overview of resources, as well as ways to further enhance the user experience on mobile.

React Native

The following resources can help you integrate TalkJS into your React Native app:

Flutter

The following resources can help you integrate TalkJS into your Flutter app:

Mobile push notifications

If you embed TalkJS into a native app using WebView, you can add support for mobile push notifications.

Cordova, PhoneGap and Ionic

TalkJS works well inside apps built using Cordova, PhoneGap, and the Ionic framework. The following resources can help you integrate TalkJS into your app:

To make everything work smoothly, also consider adding the following settings:

1. Add TalkJS to an allow list

On some platforms, you need to add the TalkJS URIs to an allow list to be able to load TalkJS. You can do this as follows:

  1. Using Cordova Allow List, add a Content Security Policy rule that allows access to https://*.talkjs.com.
  2. TalkJS uses Google Cloud to enable file sharing. If you use file sharing, also add https://firebasestorage.googleapis.com to the allow list.

2. Allow external links

By default, Cordova opens all links inside your app. If you would like your users also to be able to open links in the device's system browser, then install cordova-plugin-inappbrowser. Despite its name, this plugin includes a feature to avoid using an in-app browser.

TalkJS automatically detects the presence of cordova-plugin-inappbrowser and ensures that external links open in the device's system browser.

Troubleshooting

This section provides troubleshooting instructions for issues that you may come across.

Chat isn't full width

Is the TalkJS chat UI not displaying at full width? Try one of the following:

  1. Check that the WebView inside of which a website with the TalkJS UI is displayed is set to 100%. TalkJS can only take up as much space as available within the WebView.
  2. Check that the width of the website that's inside the WebView is set to be the device's width. You can use the following code to fix the viewport width:
1<meta
2  name="viewport"
3  content="width=device-width"
4/>
  • If you're using one of the TalkJS mobile SDKs, then the width of the website inside the WebView is automatically set to be the device's width.
  1. Check that in the Layout section of the theme editor in your TalkJS dashboard, the width of the TalkJS UI is set to 100%.

Open external links and attachments on iOS (React Native without SDK)

Did you implement React Native prior to the release of the React Native SDK? Then by default on iOS, if a user opens an external link or attachment from a chatbox, it opens in the same window and they won't be able to go back.

To ensure that external links and attachments open correctly on iOS, you can use the onShouldStartLoadWithRequest callback. Once this callback is triggered, you can open the link in an external browser using React Native's Linking module, for example as follows:

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);