@infoset/react-native
v1.7.0
Published
Infoset React Native SDK
Downloads
50
Readme
@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
totrue
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: '[email protected]',
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 |