react native zendesk chat

رد فعل-الأصلي-zendesk-دردشة

وحدة بسيطة تدعم عرض Zendesk Chat داخل تطبيق React Native.

تفترض هذه المكتبة أنك على دراية بالوثائق الرسمية لـ 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)

القضايا المعروفة

ابدء

مع نبم:

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

أو مع الغزل:

yarn add react-native-zendesk-chat

التشغيل السريع والاستخدام

1. إعداد التبعيات الأصلية
   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`

إذا كنت تستخدم إصدارات رد الفعل الأصلية الأقدم، فيرجى مراجعة قسم الإعداد المتقدم أدناه

Android إذا كنت تستخدم الإصدار React-Native >= 0.60، فيجب على Android اكتشاف هذه التبعية تلقائيًا. إذا كنت تستخدم الإصدار 0.59، فقد تحتاج إلى الاتصال react-native link

2. استدعاء مُهيئ 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" ) ;

3. إظهار واجهة مستخدم الدردشة

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

للحصول على مفتاح حسابك، اتبع الخطوات التالية:

1. في لوحة معلومات دردشة Zendesk، انقر فوق ملف التعريف الخاص بك في الزاوية اليمنى العليا وانقر فوق خيار "التحقق من الاتصال":
2. في مربع الحوار، انسخ قيمة مفتاح الحساب

التصميم

يتم تغيير تصميم واجهة المستخدم في الغالب من خلال التقنيات الأصلية.

على نظام Android، هذه هي الوثائق الرسمية - ومن الأمثلة على ذلك إضافة هذه الأسطر الثلاثة إلى سمة تطبيقك

بينما على نظام التشغيل iOS، تكون الخيارات أقل بكثير - تحقق من صفحة المستند الرسمية

الهجرة

من رد الفعل الأصلي-zendesk-chat <= 0.3.0

للترحيل من الإصدارات السابقة للمكتبة، ربما ينبغي عليك إزالة جميع خطوات التكامل التي طبقتها، والبدء من جديد من البداية السريعة.

استدعاءات JS API متشابهة جدًا، مع تغييرات إضافية في الغالب.

الإعداد المتقدم

قد يرغب المستخدمون المتقدمون، أو المستخدمون الذين يعملون على إصدارات أقدم من React-Native في تهيئة الأشياء باللغة الأصلية.

iOS: الإعداد يدويًا باستخدام Cocoapods

إذا كنت تستخدم نظام التشغيل iOS <0.60، فقد تحتاج إلى تثبيت الكاكاوبود يدويًا:

أضف مرجعًا إلى ملف Podfile الخاص بك:

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

ثم قم بتشغيل تثبيت pod: (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: الإعداد والتكوين اليدوي

إذا كان مستوى رد فعلك <0.60، فمن المفترض أن تكون قادرًا على استدعاء react-native link .

إذا لم ينجح ذلك، فقد تحتاج إلى إجراء تثبيت يدوي كامل كما يلي:

1. افتح android/app/main/java/[...]/MainApplication.java

• إضافة import com.taskrabbit.zendesk.*; إلى الواردات في الجزء العلوي من الملف
• أضف new RNZendeskChatPackage(this) إلى القائمة التي تم إرجاعها بواسطة طريقة getPackages()

2. قم بإلحاق الأسطر التالية بـ 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 ' )

3. أدخل الأسطر التالية داخل كتلة التبعيات في 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' }

بالنسبة إلى RN <0.60:

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

4. قم بتكوين 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 );

المساهمة

• يتم تشجيع طلبات السحب!
• كن محترماً!
• يسمى فرع الجذع في هذا الريبو main

رخصة

react native zendesk chat مرخص من معهد ماساتشوستس للتكنولوجيا، كما هو موجود في ملف الترخيص.