Zirro Desk for React Native

Zirro Desk is intentionally a small integration. Start with the basic setup and only add trusted identity if your product needs stronger identity assurance.

Step 1: Install and open support

npm install @zirrohq/desk-react-native react-native-webview

import { ZirroDeskWidget } from "@zirrohq/desk-react-native";

<ZirroDeskWidget
  workspaceId="your-workspace-id"
  apiBaseUrl="https://api.zirrodesk.com"
  user={{ id: currentUser.id, email: currentUser.email }}
  onClose={() => setSupportOpen(false)}
/>

That is the complete normal integration. workspaceId is public configuration, and user is optional. Supplying it avoids asking a signed-in customer for the same details again. Never put a private server key in a mobile application.

The SDK presents the hosted support experience full screen, including knowledge, tickets, and messages.

Logout and account switching

Changing user.id automatically starts the next customer with isolated support state. To explicitly clear support state during logout, hold a ref:

const desk = useRef<ZirroDeskWidgetHandle>(null);

await signOut();
desk.current?.reset();

<ZirroDeskWidget ref={desk} workspaceId={workspaceId} apiBaseUrl={apiBaseUrl} />

Trusted identity (optional)

The basic integration above remains valid. For stronger identity assurance:

1. An admin creates a signing secret in Zirro Desk's Widget installation panel.
2. Keep that secret on your backend only.
3. Your backend signs an HS256 JWT lasting no more than 24 hours.
4. Pass the returned token as identityToken.

Required claims:

{
  "kind": "widget_identity",
  "sub": "your-stable-customer-id",
  "workspace_id": "your-workspace-id",
  "name": "Ada",
  "email": "[email protected]",
  "phone": "+2348000000000",
  "iat": 1785859200,
  "exp": 1785862800
}

<ZirroDeskWidget
  workspaceId={workspaceId}
  apiBaseUrl="https://api.zirrodesk.com"
  user={currentUser}
  identityToken={tokenFromYourBackend}
/>

External links

External article links open with React Native Linking by default. Override onOpenExternalUrl when your app has its own in-app browser or allow-list.

Local development

Pass mobileUrl="http://localhost:5174/mobile.html" and widgetScriptUrl="http://localhost:5174/src/main.ts". Android emulators usually require 10.0.2.2; physical phones require the development machine's LAN address.

Release checks

npm run build
npm run publish:check

The public package is published under the @zirrohq npm organization.