Add chat to your mobile app

Put ZenTalk chat inside your own iOS or Android app. Your app users get the same chat as your website: your AI agent, your team, files, voice notes, payments and bookings. Your team answers from the same inbox.

How it works

• Your app adds a chat button, or uses the ready made floating button.
• Tapping it slides the chat up full screen. The X button, or the Android back button, slides it away.
• The chat loads in the background when the app starts, so it opens instantly and keeps counting unread replies while it is closed. Your app can show that count as a badge.
• In the inbox, the visitor's page shows the app screen they were on, for example com.acme.shop/Checkout.
• Links in the chat open in the phone's browser.

Before you start

1. Open Sites, pick the site the app belongs to, and copy its key from Install. You can reuse your website's site or create a separate one for the app.
2. Send this page to your app developer. Setup takes a few lines of code on each platform.

A site with a domain set still works in the app. You do not need to change it.

React Native

npm install @zentalk/react-native-chat react-native-webview
cd ios && pod install

import { ZenTalkProvider, ZenTalkLauncher, ZenTalk } from '@zentalk/react-native-chat';

export default function App() {
  return (
    <ZenTalkProvider siteKey="YOUR_SITE_KEY" appId="com.acme.shop">
      <Navigation />
      <ZenTalkLauncher />
    </ZenTalkProvider>
  );
}

// Any other button:
ZenTalk.open();

Flutter

dependencies:
  zentalk_chat: ^0.2.0

ZenTalk.instance.init(siteKey: 'YOUR_SITE_KEY', appId: 'com.acme.shop');

MaterialApp(
  builder: (context, child) => ZenTalkOverlay(child: child!),
  home: Scaffold(
    body: const HomeScreen(),
    floatingActionButton: const ZenTalkLauncher(),
  ),
);

// Any other button:
ZenTalk.instance.open();

iOS (Swift)

In Xcode, open File > Add Package Dependencies, pastehttps://github.com/ZenTalkHQ/zentalk-chat-ios, and addZenTalkChat to your app target. Then:

import ZenTalkChat

ZenTalk.shared.configure(siteKey: "YOUR_SITE_KEY")
ZenTalk.shared.preload()

// Your chat button:
ZenTalk.shared.present()

ZenTalk.shared.onUnreadChange = { count in updateBadge(count) }

Add NSMicrophoneUsageDescription to Info.plist so visitors can send voice notes.

Android (Kotlin or Java)

The library is on Maven Central. Add it to your app module's dependencies:

dependencies {
    implementation("com.usezentalk:zentalk-chat:0.2.0")
}

Then:

// Application.onCreate()
ZenTalk.configure(this, siteKey = "YOUR_SITE_KEY")
ZenTalk.preload()

// Your chat button:
ZenTalk.open(activity)

The library brings its own chat screen, file picker and microphone prompt. The microphone is only requested when the visitor taps it.

Any other framework

Ionic, Capacitor, .NET MAUI or anything with a WebView can load the chat page directly, full screen:

https://cdn.usezentalk.com/chat.html?key=YOUR_SITE_KEY&sdk=webview

Your developer can find the full list of options and app events in the developer guide that ships with the SDK.

Logged-in users

• Pass the user's name, email and phone when you set up the chat, or call identify when they sign in. Agents then see who they are talking to. It only fills empty fields, so it never overwrites what an agent typed.
• For verified details, turn on Verify your customers on the site and have your server sign the user's details. Pass the signed token as identityJwt.
• When the user logs out, call reset(). The next person who signs in on that phone starts a fresh chat and cannot see the previous conversation.

Screens and conversions

• setScreen('Checkout') tells your team which screen the visitor is on.
• track('purchase', { value: 49 }) records a sale against the visitor's latest chat, the same as on your website.

A chat link without an app

The same page works as a plain link for an email signature, a text message or a social profile. It opens straight into the chat:

https://cdn.usezentalk.com/chat.html?key=YOUR_SITE_KEY

Push notifications

When the app is closed or in the background, your app users get a push notification for every reply from your team or your AI agent. It comes from your own app, with your app's name and icon, because ZenTalk sends it through your Firebase project or your Apple key. Tapping it opens the chat.

1. Open Sites, pick the site, and click Mobile app push.
2. For Android (and iOS apps that use Firebase), upload your Firebase service account file with Choose JSON file. You create it in the Firebase console under Project settings, Service accounts, Generate new private key.
3. For iOS apps that do not use Firebase, upload your APNs .p8 key and fill in the Key ID, Team ID and bundle ID.
4. Click Send test push to check the credentials.
5. Your developer passes the phone's push token to the chat and opens the chat when a notification is tapped.

ZenTalk.setPushToken(await messaging().getToken());
messaging().onNotificationOpenedApp((m) => ZenTalk.handlePush(m.data));

ZenTalk.instance.setPushToken(token);
FirebaseMessaging.onMessageOpenedApp.listen((m) => ZenTalk.instance.handlePush(m.data));

ZenTalk.shared.setDeviceToken(deviceToken)
ZenTalk.shared.handlePush(response.notification.request.content.userInfo)

ZenTalk.setPushToken(token)
ZenTalk.handlePush(this, intent)

• No notification is sent while the visitor is reading the chat.
• A burst of replies is folded into one notification, so the phone does not buzz over and over.
• After reset() on logout, the previous user's replies no longer reach that phone.