- ReactNative: ^0.63.4
- @react-native-async-storage/async-storage: ^1.15.9
- react-native-document-picker: ^7.1.0
# Qiscus Multichannel main package
yarn add @qiscus-community/react-native-multichannel-widget
# Dependencies required for qiscus multichannel
yarn add @react-native-async-storage/async-storage react-native-document-picker
In order to use QiscusMultichannelWidge
t, you need to initialize it with your AppID (YOUR_APP_ID
). Get more information to get AppID from Qiscus Multichannel Chat page
// Wrap your outer most component with `MultichannelWidgetProvider`
// for example
import { MultichannelWidgetProvider } from '@qiscus-community/react-native-multichannel-widget';
<MultichannelWidgetProvider appId={APP_ID}>
<App />
</MultichannelWidgetProvider>;
After the initialization, you can access all the widget's functions.
Set UserId before start the chat, this is mandatory.
import { useMultichannelWidget } from '@qiscus-community/react-native-multichannel-widget';
// ... inside your component
const widget = useMultichannelWidget();
widget.setUser({
userId: 'unique-user-id',
displayName: 'Display Name for this user',
avatarUrl: 'https://via.placeholder.com/200',
});
// if you want to set user properties
widget.setUser({
userId: 'unique-user-id',
displayName: 'Display Name for this user',
avatarUrl: 'https://via.placeholder.com/200',
userProperties: {
extra_property_key: 'extra property value',
},
});
Use this function to check whether the user has already logged in.
import { useCurrentUser } from '@qiscus-community/react-native-multichannel-widget';
// ... inside your component
const user = useCurrentUser();
// check user value null or not
const isLoggedIn = useMemo(() => user == null, [user]);
Use this function to start a chat.
widget
.initiateChat()
.then(() => console.log('success initiating chat'))
.catch((e: unknown) => console.error('error while initiating chat'));
}
Use this function to clear the logged-in users.
widget.clearUser();
configure system message visibility by calling setShowSystemMessage(isShowing: Bool).
widget.setHideUIEvent();
We provide several functions to customize the User Interface.
Use this method to configure the widget properties. Channel Id is an identity for each widget channel. If you have a specific widget channel that you want to integrate into the mobile in-app widget, you can add your channel_id when you do initiateChat.
Method Name | Description |
---|---|
setRoomTitle | Set room name base on customer's name or static default. |
setRoomSubTitle | |
setRoomSubTitle(IRoomSubtitleConfig.Enabled) | |
setRoomSubTitle(IRoomSubtitleConfig.Disabled) | |
setRoomSubTitle(IRoomSubtitleConfig.Editable, "Custom subtitle") | |
setHideUIEvent | Show/hide system event. |
setAvatar | |
setAvatar(IAvatarConfig.Enable) | |
setAvatar(IAvatarConfig.Disabled) | |
setEnableNotification | Set enable app notification. |
setChannelId(channelId: channel_id) | Use this function to set your widget channel Id |
Method Name | Description |
---|---|
setNavigationColor | Set navigation color. |
setNavigationTitleColor | Set room title, room subtitle, and back button border color. |
setSendContainerColor | Set icon send border-color. |
setSendContainerBackgroundColor | Set send container background-color. |
setFieldChatBorderColor | Set field chat border-color. |
setFieldChatTextColor | Set field chat text color. |
setSystemEventTextColor | Set system event text and border color. |
setLeftBubbleColor | Set left bubble chat color (for: Admin, Supervisor, Agent). |
setLeftBubbleTextColor | Set left bubble text color (for: Admin, Supervisor, Agent). |
setRightBubbleColor | Set right bubble chat color (Customer). |
setRightBubbleTextColor | Set right bubble text color (Customer). |
setTimeLabelTextColor | Set time text color. |
setTimeBackgroundColor | Set time background color. |
setBaseColor | Set background color of the room chat. |
setEmptyTextColor | Set empty state text color. |
setEmptyBackgroundColor | Set empty state background color. |
- Get your APPID
- Go to Qiscus Multichannel Chat page to register your email
- Log in to Qiscus Multichannel Chat with yout email and password
- Go to ‘Setting’ menu on the left bar
- Look for ‘App Information’
- You can find APPID in the App Info
- Activate Qiscus Widget Integration
- Go to ‘Integration’ menu on the left bar
- Look for ‘Qiscus Widget’
- Slide the toggle to activate the Qiscus widget
- Run npm install
After cloning the example, you need to run this code to install all Cocoapods dependencies needed by the Example
yarn
- Set YOUR_APP_ID in the Example
- Open example/src/App.tsx
- Replace the
APP_ID
at line 12 with your appId
<MultichannelWidgetProvider appId={APP_ID}>
<App />
</MultichannelWidgetProvider>
- Start Chat
The Example is ready to use. You can start to chat with your agent from the Qiscus Multichannel Chat dashboard.