Integrasi React Native In-App Widget pada Mobile Application Anda

Selain menyediakan In-App Widget untuk Android dan iOS, Qiscus juga menyediakan In-App Widget untuk React Native bagi Anda yang mempunyain mobile application berbasis React Native. Untuk mengetahui lebih lanjut mengenati apa saja keuntungan dari In-App Widget Anda dapat mengunjungi artikel sebelumnya di halaman ini. Proses integrasi React Native In-App Widget ini pun juga tidak kalah mudah dengan Android maupun iOS In-App Widget.

Berikut merupakan langkah-langkah dalam melakukan integrasi Qiscus Widget pada sistem React Native:

  1. Anda harus memiliki akun Qiscus Multichannel Chat terlebih dahulu. Untuk mendapatkannya, Anda dapat melakukan registrasi dengan menggunakan email.
Group 421.png

2. Login ke Qiscus Multichannel Chat dengan menggunakan email dan password yang sudah terdaftar

Group 422.png

3. Kunjungi halaman ‘Setting

Group 419.png

4. Klik menu ‘App Information

Group 420.png

5. App ID dapat ditemukan pada kolom ‘App Information’

6. Kunjungi halaman ‘Integration

Group 423.png

7. Pilih ‘Qiscus Widget

Group 424.png

8. Aktifkan toggle Qiscus Widget

Group 425.png

9. Jika Anda ingin mengintegrasikan dengan channel Qiscus Widget secara spesifik, Anda membutuhkan channel_id dari Qiscus Widget tersebut yang dapat diperoleh dari bagian dibawah ini:

yfaz7vcbbuazjkjbl2aa.png

10. Tambahkan library Qiscus ke aplikasi Anda dengan menjalankan 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. Buka example/src/App.tsx

12. Ganti bagian YOUR_APP_ID menjadi appId yang telah Anda peroleh pada langkah 5

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

13. Anda dapat mengintegrasikan spesifik Qiscus Widget dengan mengimplementasikan kode dibawah ini. channelId diperoleh dari langkah 9.

widget.setChannelId(channel_id);

14. Integrasi sudah selesai, pelanggan dapat berkomunikasi melalui mobile application React Native Anda

Screenshot_2021-12-15-13-13-53-114_com.example.reactnativemultichannelwidget.jpg

15. Anda dapat merespon pelanggan melalui dashboard Qiscus Multichannel Chat.

Group 4.png

Sangat mudah bukan? Jika Anda membutuhkan tutorial yang lebih mendalam, Anda dapat mengunjungi halaman dokumentasi berikut ini. Selain itu Anda juga dapat menghubungi tim kami di sini jika menemukan kendala saat melakukan proses integrasi Qiscus Widget ke dalam sistem React Native.

You May Also Like
WhatsApp API Chat
Selengkapnya

WhatsApp Business API 101

WhatsApp Business API memiliki cara kerja khusus yang membedakannya dari WhatsApp Personal. Tak ayal, butuh beberapa adaptasi yang…