@velnai/chat-rn

Drop the Velnai web-chat widget into any React Native or Expo app.

npm install @velnai/chat-rn react-native-webview
# Expo:
npx expo install react-native-webview

Usage

import { VelnaiChat } from '@velnai/chat-rn'

export function ChatScreen({ user, navigation }) {
  return (
    <VelnaiChat
      publicKey="wac_xxx"
      visitorAttrs={{ email: user.email, plan: user.plan }}
      style={{ flex: 1 }}
      onReady={() => console.log('widget ready')}
      onMessageSent={() => console.log('visitor sent a message')}
    />
  )
}

Renders the chat full-screen — no floating-bubble UX in native (the bubble UX only makes sense on a website corner). Native back navigation dismisses the screen.

Props

| Prop | Type | What it does | |---|---|---| | publicKey | string | The agent's public key (wac_xxx). | | visitorAttrs | Record<string, string \| number \| boolean \| null> | Visitor identity, ≤16 keys. | | widgetBase | string | Override widget host. Default https://widget.velnai.com. | | onReady | () => void | Fires once the widget has booted. | | onMessageSent | () => void | Fires once per session when the visitor sends their first message (used to mark the visitor as "engaged" for retargeting). Does NOT fire on every message. | | onTicketCreated | () => void | Fires when the visitor escalates to a ticket. | | style | StyleProp<ViewStyle> | Style for the wrapping View. Default { flex: 1 }. |

How it works

Under the hood, this is a thin react-native-webview wrapper. The WebView loads the same widget that runs on the web — the same Preact app, same backend, same features — at https://widget.velnai.com/widget/host/index.html?embedded=1&key=…. The ?embedded=1 query flag tells the widget to skip its floating bubble and render the chat panel full-screen.

Visitor attrs flow through a tiny JavaScript bridge: on mount they're URL-encoded, and on update they're re-sent via webViewRef.injectJavaScript(...). Events bubble back up via window.ReactNativeWebView.postMessage(...) and fire the React callbacks.

Permissions

The chat widget supports voice messages, file uploads, and RTC voice calls. Your app needs the relevant permissions:

• iOS — add NSCameraUsageDescription, NSMicrophoneUsageDescription, NSPhotoLibraryUsageDescription to Info.plist.
• Android — android.permission.RECORD_AUDIO, android.permission.CAMERA in AndroidManifest.xml.

If your visitors don't need voice/file features, you can omit these.

License

MIT