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 параметры более минимальны — посетите официальную страницу документации.

Миграция

Из реакции-native-zendesk-chat <= 0.3.0

Чтобы перейти с предыдущих версий библиотеки, вам, вероятно, следует удалить все примененные вами шаги интеграции и начать заново с быстрого запуска.

Вызовы JS API очень похожи, в основном с дополнительными изменениями.

Расширенная настройка

Опытные пользователи или пользователи, работающие на более старых версиях реагирования, могут захотеть инициализировать вещи в нативном режиме.

iOS: настройка вручную с помощью Cocoapods

Если вы используете iOS <0.60, вам может потребоваться вручную установить Cocopod:

Добавьте ссылку на свой подфайл:

 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: ручная установка и настройка

Если вы используете React-Native <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 :

Для РН >= 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 ' )

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 имеет лицензию MIT, как указано в файле LICENSE.