Integrate the Qiscus In-App Widget into your React Native Mobile Application

Besides providing the In-App Widget for Android and iOS systems, Qiscus is also now able to provide an In-App Widget for mobile applications functioning in the React Native system. Check out this article to learn more about the benefits of using our Qiscus In-App Widgets. The integration process of the In-App Widgets into the React Native system is also as simple as integrating to the Android and iOS systems.

Here are the steps to integrate the Qiscus In-App Widget into the React Native system:

  1. First things first, you will need to own a registered Qiscus Multichannel Chat account. If you do not own this yet, simply register for one using your email address

2. Once you have access, simply login to your Qiscus Multichannel Chat account with your registered email and password.

3. Visit the ‘Setting’ page

4. Then, click the ‘App Information’ menu

5. Look for the App ID in the ‘App Information’ column

6. Then, click the ‘Integration’ page

7. Select the ‘Qiscus Widget’ button

8. At this step, you will need to activate the Qiscus Widget toggle

9. Whenever you integrate your Qiscus Widget into a specific Qiscus Widget channel, you will need the channel_id of yourQiscus Widget as shown in the image below:

10. Then, add the Qiscus library to your application by running the yarn

# Qiscus Multichannel main package
yarn add @qiscus-community/[email protected]

# Dependencies required for qiscus multichannel
yarn add @react-native-async-storage/async-storage react-native-document-picker

11. Next, open the example/src/App.tsx

12. Change the YOUR_APP_ID section into appId which you obtained in Step 5

<MultichannelWidgetProvider appId={APP_ID}>
<App />
</MultichannelWidgetProvider>

13. You can integrate a specific Qiscus Widget by implementing the code below. Please note that channelId is obtained from Step 9

widget.setChannelId(channel_id);

14. Congratulations! You have completed the integration process. Now your customers will be able to communicate with you on your React Native mobile application

15. You can respond to customers via the Qiscus Multichannel Chat dashboard as usual.

16. Isn’t it simple? If you require a more detailed set of guidelines, visit the documentation page here. You can also contact our team here if you encounter any problems when integrating the Qiscus Widget into the React Native system.

You May Also Like