@lorikeetai/react-native-sdk

SDK containing embeddable React Native components that renders the LorikeetCX web widget inside a react-native-webview.

Installation

pnpm add @lorikeetai/react-native-sdk

Basic Usage

import { LorikeetWidgetView } from '@lorikeetai/react-native-sdk'

export default function Screen() {
  return (
    <LorikeetWidgetView
      publicKey="wk_xxx"
      authToken="your-auth-token"
      onWebViewMessage={(event) => console.log(event.nativeEvent.data)}
    />
  )
}

Props:

• publicKey (required): The public key for your Lorikeet account
• authToken (required): Authentication token for the user
• baseUrl (optional): Base URL for the Lorikeet API (defaults to https://chat.lorikeetcx.ai)
• customisations (optional): Widget customization options from @lorikeetai/web-sdk
• styles (optional): Style overrides for the header text
• onWebViewMessage (optional): Handler for messages from the webview

Headless components

You may use these if you want to compose the lorikeet widget itself. It comprises of 2 components - the widget view & header view - which are rolled up together in 'LorikeetWidgetView'.

LorikeetWidgetHeader

Header component for the widget.

<LorikeetWidgetHeader title='Testing' style={{ fontFamily: 'Inter' ... }} />

Props:

• title (required): The title text to display
• style (optional): Style for the header text
• icon (optional): Clickable icon to be rendered on the right side of the header. Defaults to a new chat icon
• onIconPress (optional): Callback when the header icon is pressed.

LorikeetWidgetWebView

WebView component that handles the widget content.

<LorikeetWidgetWebView
  uri={url}
  webviewProps={{
      scalesPageToFit: true,
      startInLoadingState: true,
      style: ...
  }}
/>

Props:

• uri (required): The URI that the web view will load
• baseUrl (optional): Base URL for the Lorikeet API (defaults to https://chat.lorikeetcx.ai)
• webviewProps (optional): Passed through to the webview component

Development

• Build: pnpm -w turbo build --filter=@lorikeetai/react-native-sdk
• Lint: pnpm --filter=@lorikeetai/react-native-sdk lint

License

MIT