ดาวน์โหลด react native zendesk chat ดาวน์โหลด - react native zendesk chat ดาวน์โหลดซอร์สโค้ด

react native zendesk chat

โค้ดแหล่งที่มา AI

v0.4.1 - Bug

ดาวน์โหลด

โต้ตอบพื้นเมือง zendesk แชท

โมดูลอย่างง่ายที่รองรับการแสดง Zendesk Chat ภายใน React Native Application

ไลบรารีนี้จะถือว่าคุณคุ้นเคยกับเอกสารอย่างเป็นทางการของ Zendesk: iOS และ Android

รุ่นต่างๆ

สำหรับ Zendesk Chat v2 ให้ใช้เวอร์ชัน >= 0.4.0 (ต้องใช้ RN 0.59 หรือใหม่กว่า!)
สำหรับเวอร์ชัน RN >= 0.59 ให้ใช้เวอร์ชัน >= 0.3.0 (Zendesk Chat v1)
สำหรับเวอร์ชัน RN < 0.59 ให้ใช้เวอร์ชัน <= 0.2.2 (Zendesk Chat v1)

ปัญหาที่ทราบ

เริ่มต้นใช้งาน

ด้วยเวลา 12.00 น.:

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

หรือด้วยเส้นด้าย:

yarn add react-native-zendesk-chat

การเริ่มต้นอย่างรวดเร็วและการใช้งาน

ตั้งค่าการพึ่งพาเนทิฟ
iOS หากคุณใช้ react-native >= 0.60 และคุณมีการตั้งค่า Cocoapods คุณเพียงแค่ต้อง:

$ 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`

หากคุณใช้เวอร์ชัน React-Native รุ่นเก่า โปรดดูส่วนการตั้งค่าขั้นสูงด้านล่าง

Android หากคุณใช้ react-native >= 0.60 Android ควรตรวจจับการพึ่งพานี้โดยอัตโนมัติ หากคุณอยู่ที่ 0.59 คุณอาจต้องเรียก react-native link

เรียก JS Initializer:

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

แสดง UI แชท

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

กำลังรับ `YOUR_ZENDESK_ACCOUNT_KEY`

หากต้องการรับคีย์บัญชี zendesk ของคุณ โปรดดูคำแนะนำในการเริ่มต้น SDK ใน Zendesk SDK

หากต้องการรับรหัสบัญชีของคุณ ให้ทำตามขั้นตอนเหล่านี้:

ในแดชบอร์ด Zendesk Chat ให้คลิกที่โปรไฟล์ของคุณที่มุมขวาบน และคลิกตัวเลือก 'ตรวจสอบการเชื่อมต่อ':
ในกล่องโต้ตอบ ให้คัดลอกค่าคีย์บัญชี

จัดแต่งทรงผม

การเปลี่ยนสไตล์ UI ส่วนใหญ่ทำได้โดยใช้เทคนิคดั้งเดิม

สำหรับ Android นี่เป็นเอกสารอย่างเป็นทางการ และตัวอย่างอาจเพิ่ม 3 บรรทัดเหล่านี้ในธีมแอปของคุณ

ในขณะที่ใช้ iOS ตัวเลือกจะมีน้อยมาก ตรวจสอบหน้าเอกสารอย่างเป็นทางการ

การย้ายถิ่นฐาน

จาก react-native-zendesk-chat <= 0.3.0

หากต้องการย้ายจากไลบรารีเวอร์ชันก่อนหน้า คุณควรลบขั้นตอนการผสานรวมทั้งหมดที่คุณใช้ และเริ่มต้นใหม่จากการเริ่มต้นอย่างรวดเร็ว

การเรียก JS API นั้นคล้ายกันมาก โดยส่วนใหญ่มีการเปลี่ยนแปลงเพิ่มเติม

การตั้งค่าขั้นสูง

ผู้ใช้ขั้นสูงหรือผู้ใช้ที่ทำงานบน react-native เวอร์ชันเก่าอาจต้องการเริ่มต้นสิ่งต่าง ๆ ในภาษาเนทิฟ

iOS: การตั้งค่าด้วยตนเองด้วย Cocoapods

หากคุณใช้ iOS < 0.60 คุณอาจต้องติดตั้ง Cocopod ด้วยตนเอง:

เพิ่มการอ้างอิงถึง Podfile ของคุณ:

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

จากนั้นรัน pod install: (cd ios; pod install)

หรือด้วยตนเอง:

ใน Xcode ให้ลากและวาง node_modules/react-native-zendesk-chat/RNZendeskChat.m และ node_modules/react-native-zendesk-chat/RNZendeskChat.h ลงในโปรเจ็กต์ของคุณ

iOS: กำหนดค่า `ZDCChat` ใน `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: การตั้งค่าและการกำหนดค่าด้วยตนเอง

หากคุณใช้ react-native < 0.60 คุณควรจะสามารถเรียก react-native link ได้

หากไม่ได้ผล คุณอาจต้องดำเนินการติดตั้งด้วยตนเองโดยสมบูรณ์ดังนี้:

เปิด android/app/main/java/[...]/MainApplication.java

เพิ่ม import com.taskrabbit.zendesk.*; เพื่อการนำเข้าที่ด้านบนของไฟล์
เพิ่ม new RNZendeskChatPackage(this) ลงในรายการที่ส่งคืนโดยเมธอด getPackages()

เพิ่มบรรทัดต่อไปนี้ต่อท้าย 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 ' )

แทรกบรรทัดต่อไปนี้ภายในบล็อกการอ้างอิงใน android/app/build.gradle :

สำหรับ RN >= 0.60:

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

ยังอยู่ในโครงการ build.gradle

เพิ่ม gradle maven { url 'https://zendesk.jfrog.io/zendesk/repo' }

สำหรับอาร์เอ็น < 0.60:

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

กำหนดค่า Chat ใน 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 );