Your staff work inside iOS and Android apps the same way they do on a website: chat, voice and video, knowing who is signed in. Open them from your own support button, and close your screen when the visitor closes the chat.

Every option loads the same chat on a page whose address is one of the websites listed under the staff member's On your website, so nothing new needs allowing. Your API key never goes into the app.

npm install @custardai/react-native react-native-webview

import { Modal } from "react-native";
import { CustardChat } from "@custardai/react-native";

<Modal visible={open} animationType="slide" onRequestClose={() => setOpen(false)}>
  <CustardChat
    agentId="YOUR_STAFF_ID"
    site="https://yourwebsite.com"   // one of the addresses under "On your website"
    user={{ userId: user.id, email: user.email, fullName: user.name }}
    onClose={() => setOpen(false)}
    onAction={(a) => { if (a.action === "open_page") navigation.navigate(a.label); }}
  />
</Modal>

Microphone

iOS: add NSMicrophoneUsageDescription to Info.plist and allow inline media playback. Android: add RECORD_AUDIO and MODIFY_AUDIO_SETTINGS, ask for the permission at runtime, then grant the WebView's permission request.

Nothing showing?

Add data-debug="true" to the script tag and open the console (Safari Web Inspector for iOS, chrome://inspect for Android). Each step is logged with [CustardWidget], and window.CustardWidget.status() shows whether it is drawn, open or hidden on this path by data-hide-on. With data-launcher="false" there is no floating button by design; call open(). Both data-agent and data-agent-id work.

Want your own native chat screen instead? Use the API from your server.