react native zendesk chat

react native zendesk chat

Kode Sumber AI

v0.4.1 - Bug

Unduh

reaksi-asli-zendesk-obrolan

Modul sederhana yang mendukung tampilan Zendesk Chat dalam Aplikasi React Native.

Perpustakaan ini mengasumsikan Anda sudah familiar dengan Dokumentasi Resmi Zendesk: iOS dan Android.

VERSI

Untuk Zendesk Chat v2 gunakan versi >= 0.4.0 (ini memerlukan RN 0.59 atau lebih baru!)
Untuk versi RN >= 0.59 gunakan versi >= 0.3.0 (Zendesk Chat v1)
Untuk versi RN <0.59 gunakan versi <= 0.2.2 (Zendesk Chat v1)

Masalah yang Diketahui

Memulai

Dengan npm:

npm install react-native-zendesk-chat --save

atau dengan benang:

yarn add react-native-zendesk-chat

Mulai Cepat & Penggunaan

Siapkan Ketergantungan Asli
iOS Jika Anda menggunakan react-native >= 0.60 dan Anda memiliki pengaturan Cocoapods, Anda hanya perlu:

$ yarn install # and see if there are any errors
$ (cd ios ; pod install) # and see if there are any errors
 # -- you may need to do `pod install --repo-update`

Jika Anda menggunakan versi react-native yang lebih lama, silakan lihat bagian Pengaturan Lanjutan di bawah

Android Jika Anda menggunakan react-native >= 0.60, Android harus mendeteksi ketergantungan ini secara otomatis. Jika Anda menggunakan 0,59, Anda mungkin perlu memanggil react-native link

Hubungi Inisialisasi JS:

 import ZendeskChat from "react-native-zendesk-chat" ;

// Once in your application:
ZendeskChat . init ( "YOUR_ZENDESK_ACCOUNT_KEY" ) ;

// Optionally specify the appId provided by Zendesk
ZendeskChat . init ( "YOUR_ZENDESK_ACCOUNT_KEY" , "APP_ID_PROVIDED_BY_ZENDESK" ) ;

Tampilkan UI Obrolan

 // On button press, when you want to show chat:
ZendeskChat . startChat ( {
	name : user . full_name ,
	email : user . email ,
	phone : user . mobile_phone ,
	tags : [ "tag1" , "tag2" ] ,
	department : "Your department" ,
	// The behaviorFlags are optional, and each default to 'true' if omitted
	behaviorFlags : {
		showAgentAvailability : true ,
		showChatTranscriptPrompt : true ,
		showPreChatForm : true ,
		showOfflineForm : true ,
	} ,
	// The preChatFormOptions are optional & each defaults to "optional" if omitted
	preChatFormOptions : {
		name : ! user . full_name ? "required" : "optional" ,
		email : "optional" ,
		phone : "optional" ,
		department : "required" ,
	} ,
	localizedDismissButtonTitle : "Dismiss" ,
} ) ;

Mendapatkan `YOUR_ZENDESK_ACCOUNT_KEY`

Untuk mendapatkan kunci akun zendesk Anda, lihat petunjuk di Menginisialisasi SDK di Zendesk SDK.

Untuk mendapatkan kunci akun Anda, ikuti langkah-langkah berikut:

Di Dasbor Obrolan Zendesk, klik profil Anda di sudut kanan atas dan klik opsi 'Periksa Koneksi':
Dalam dialog, salin nilai kunci akun

Penataan gaya

Mengubah Gaya UI sebagian besar dicapai melalui teknik asli.

Di Android, ini adalah dokumentasi resmi -- dan contohnya mungkin menambahkan 3 baris ini ke tema aplikasi Anda

Sedangkan di iOS, pilihannya lebih minim -- periksa halaman dokumen resmi

Bermigrasi

Dari reaksi-asli-zendesk-chat <= 0.3.0

Untuk bermigrasi dari versi perpustakaan sebelumnya, Anda mungkin harus menghapus semua langkah integrasi yang Anda terapkan, dan memulai kembali dari Mulai Cepat.

Panggilan JS API sangat mirip, dengan sebagian besar perubahan tambahan.

Pengaturan Lanjutan

Pengguna tingkat lanjut, atau pengguna yang menjalankan versi react-native yang lebih lama mungkin ingin menginisialisasi sesuatu secara asli.

iOS: Menyiapkan Secara Manual dengan Cocoapods

Jika Anda menggunakan iOS <0.60, Anda mungkin perlu menginstal kakaopod secara manual:

Tambahkan referensi ke Podfile Anda:

 pod 'RNZendeskChat', :git => 'https://github.com/taskrabbit/react-native-zendesk-chat.git'

lalu jalankan pod install: (cd ios; pod install)

atau secara manual:

Di Xcode, seret dan lepas node_modules/react-native-zendesk-chat/RNZendeskChat.m dan node_modules/react-native-zendesk-chat/RNZendeskChat.h ke dalam proyek Anda.

iOS: Konfigurasikan `ZDCChat` di `AppDelegate.m` :

# import < ZDCChat/ZDCChat.h >

// ...

// Inside the appropriate appDidFinishLaunching method
[ZDCChat initializeWithAccountKey: @" YOUR_ZENDESK_ACCOUNT_KEY " appId: " YOUR_ZENDESK_APP_ID " ];

// And access other interesting APIs

Android: Pengaturan & Konfigurasi Manual

Jika Anda menggunakan react-native <0,60, Anda seharusnya dapat memanggil react-native link .

Jika ini tidak berhasil, Anda mungkin perlu melakukan instalasi manual lengkap sebagai berikut:

Buka android/app/main/java/[...]/MainApplication.java

Tambahkan import com.taskrabbit.zendesk.*; ke impor di bagian atas file
Tambahkan new RNZendeskChatPackage(this) ke daftar yang dikembalikan oleh metode getPackages()

Tambahkan baris berikut ke android/settings.gradle :

include ' :react-native-zendesk-chat '
project( ' :react-native-zendesk-chat ' ) . projectDir = new File (rootProject . projectDir,	' ../node_modules/react-native-zendesk-chat/android ' )

Masukkan baris berikut ke dalam blok dependensi di android/app/build.gradle :

Untuk RN >= 0,60:

 dependencies {
	//
  api group : ' com.zendesk ' , name : ' chat ' , version : ' 2.2.0 '
  api group : ' com.zendesk ' , name : ' messaging ' , version : ' 4.3.1 '

juga di proyek build.gradle

Tambahkan gradle maven { url 'https://zendesk.jfrog.io/zendesk/repo' }

Untuk RN <0,60:

compile project( ' :react-native-zendesk-chat ' )

Konfigurasikan Chat di android/app/main/java/[...]/MainActivity.java

 // Note: there is a JS method to do this -- prefer doing that! -- This is for advanced users only.

// Call this once in your Activity's bootup lifecycle
Chat . INSTANCE . init ( mReactContext , key , appId );