Skip to content

Latest commit

 

History

History
110 lines (84 loc) · 3.67 KB

README.md

File metadata and controls

110 lines (84 loc) · 3.67 KB

npm version GitHub

Infoset

@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

  1. react-native-webview
  2. react-native-url-polyfill

Usage

  1. Import @infoset/react-native:
import { ChatWidget } from '@infoset/react-native';
  1. 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