@qiscus-community/react-native-multichannel-widget v2.0.2

Widget Documentation React Native

Requirements

• ReactNative: ^0.63.4

Dependency

• @react-native-async-storage/async-storage: ^1.15.9
• react-native-document-picker: ^7.1.0

Installation

# 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

How To Use

Initialization

In order to use QiscusMultichannelWidget, 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 The User

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',
  },
});

Get Login Status

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]);

Start Chat

Use this function to start a chat.

widget
  .initiateChat()
  .then(() => console.log('success initiating chat'))
  .catch((e: unknown) => console.error('error while initiating chat'));
}

Clear User

Use this function to clear the logged-in users.

widget.clearUser();

Hide system message

configure system message visibility by calling setShowSystemMessage(isShowing: Bool).

widget.setHideUIEvent();

Customization

We provide several functions to customize the User Interface.

Config

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.

Color

How to Run the Example

1. 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

2. Activate Qiscus Widget Integration

• Go to ‘Integration’ menu on the left bar
• Look for ‘Qiscus Widget’
• Slide the toggle to activate the Qiscus widget

3. Run npm install

After cloning the example, you need to run this code to install all Cocoapods dependencies needed by the Example

yarn

4. 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>

5. Start Chat

The Example is ready to use. You can start to chat with your agent from the Qiscus Multichannel Chat dashboard.