react native zendesk chat下載 - react native zendesk chat原始碼下載

react native zendesk chat

Ai源碼

v0.4.1 - Bug

下載

反應本機 zendesk-聊天

支援在 React Native 應用程式中顯示 Zendesk Chat 的簡單模組。

該程式庫假設您熟悉 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：

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`

如果您使用的是較舊的反應本機版本，請參閱下方的進階設定部分

Android如果您使用的是 React-native >= 0.60，Android 應該會自動偵測此依賴項。如果你使用的是0.59，你可能需要呼叫react-native link

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

顯示聊天使用者介面

 // 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 帳號金鑰，請參閱 Zendesk SDK 中初始化 SDK 中的說明。

若要取得您的帳戶金鑰，請依照下列步驟操作：

在 Zendesk Chat 儀表板中，點擊右上角的個人資料，然後點擊「檢查連線」選項：
在對話方塊中，複製帳戶金鑰值

造型

更改 UI 樣式主要是透過本機技術實現的。

在 Android 上，這是官方文件 - 一個範例可能是將這 3 行添加到您的應用程式主題中

在 iOS 上，選項更少——查看官方文件頁面

遷移

來自react-native-zendesk-chat <= 0.3.0

要從先前版本的庫遷移，您可能應該刪除應用程式的所有整合步驟，並從快速入門重新開始。

JS API 呼叫非常相似，主要是附加變更。

進階設定

高級用戶或在舊版本的react-native上運行的用戶可能希望在本機中初始化事物。

iOS：使用 Cocoapods 手動設定

如果您使用的 iOS < 0.60，您可能需要手動安裝 cocoapod：

新增對您的 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：在`AppDelegate.m`中設定`ZDCChat` ：

# 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' }

對於 RN < 0.60：

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

在android/app/main/java/[...]/MainActivity.java中設定Chat

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