@infoset/react-native NPM

GitHub

@infoset/react-native

Infoset react-native SDK allows you to integrate Infoset Chat with your react-native app.

Setup

This library is available on npm, install it with: npm i @infoset/react-native or yarn add @infoset/react-native.

Peer Dependecies

react-native-webview
react-native-url-polyfill

Usage

Import @infoset/react-native:

import { ChatWidget } from '@infoset/react-native';

Then simply mount the component and set isVisible to true to display the chat window:

function ExampleComponent() {
  return (
    <ChatWidget
      isVisible={true}
      apiKey="your_chat_url" // optional
      apiKey="your_chat_widget_api_key"
      iosKey="your_chat_widget_ios_key"
      androidKey="your_chat_widget_android_key"
      ...
    />
  )
}

Chat widget will be displayed when isVisible is true. You can get your apiKey, iosKey and androidKey from the Infoset dashboard. apiKey is required, and at least one of iosKey or androidKey is required.

Assign chats to tags

You can route your chats to specific tags by providing tags.

<ChatWidget
  ...
  tags={['Support', 'Recurring Customer']}
/>

Setting User Variables

You can provide your user's details such as name and email if they are known, so you will immediately know who you are talking to on the Infoset dashboard:

<ChatWidget
  ...
  visitor={{
    id: 123,
    email: 'example@infoset.app',
    firstName: 'John',
    lastName: 'Doe',
    ...
  }}
/>

See examples/src/app.tsx for all of the visitor fields.

Handling URLs

By default, all links in chat messages are opened in default browser. To change this behavior you can use the handleUrl to handle URLs yourself.

<ChatWidget
  ...
  handleUrl={(url) => console.log(`URL is ${url}`}
/>

See example app from /examples for complete example.

Available props

-- Widget | Name | Type | Default |Description | | ------------------------------ | ---------------- | ------------------------------ | -------------------------------------------------------------- | | isVisible | bool | REQUIRED / false | Show / hide the widget | | apiKey | string | REQUIRED | Infoset API key | | iosKey | string | undefined | IOS key given from Infoset | | androidKey | string | undefined | Android key given from Infoset | | color | string | '#fff' | Widget color for background of SafeAreaView | | onWidgetWillShow | func | () => void | Called before the widget show animation begins | | onWidgetShow | func | () => void | Called when the widget is completely visible | | onWidgetWillHide | func | () => void | Called before the widget hide animation begins | | onWidgetHide | func | () => void | Called when the widget is completely hiden | | onNewMessage | func | (payload: { author: Author, message: string, messageId: string}) => void | Called when the new message received | | onRoomOpened | func | (payload: { roomId: number }) => void | Called when the room opened | | onRoomClosed | func | (payload: { roomId: number }) => void | Called when the room closed | | onRoomReopened | func | (payload: { roomId: number }) => void | Called when the room reopened | | handleUrl | func | (url: string) => void | Called when a link is clicked | | visitor | object | undefined | Visitor data | | tags | array | undefined | Tags |