Add Chatting to a React Native app

1. Get your site ID

Open Widget → Installation in Chatting. Copy the value shown as data-site-id.

2. Install Chatting

npm install @usechatting/react-native

3. Connect your app

import { ChattingClient } from "@usechatting/react-native";

export const chattingClient = new ChattingClient({
  siteId: "your-site-id"
});

4. Add a support screen

import { ChattingConversationScreen } from "@usechatting/react-native";
import { chattingClient } from "./chatting-client";

export function SupportScreen() {
  return <ChattingConversationScreen client={chattingClient} />;
}

Messages sent here appear in your Chatting inbox. Team replies appear in the app while the screen is open.

Keep conversations after the app closes (optional)

Add persistSession: true so customers can reopen the same conversation later.

import { ChattingClient } from "@usechatting/react-native";

export const chattingClient = new ChattingClient({
  siteId: "your-site-id",
  persistSession: true
});

Show who is messaging (optional)

If the customer is signed in, pass their account profile to the support screen. The profile needs an email and can also include their name.

<ChattingConversationScreen
  client={chattingClient}
  profile={signedInCustomer}
/>

Notify customers about replies (optional)

You only need this if customers should receive a phone notification when your team replies and the app is not open.

npx expo install expo-notifications

After your app gets an Expo push token, give it to Chatting:

import { Platform } from "react-native";

await chattingClient.registerPushToken({
  pushToken: expoPushToken,
  platform: Platform.OS
});

When the customer opens the notification, show the support screen again to load the latest reply.

Test the chat

1. Open the support screen and send a message
2. Open the conversation in your Chatting inbox
3. Reply and confirm the response appears in the app

Your mobile support chat is ready