react native zendesk chat

React-Native-Zendesk-Chat

Einfaches Modul, das die Anzeige von Zendesk Chat in einer React Native-Anwendung unterstützt.

Bei dieser Bibliothek wird davon ausgegangen, dass Sie mit der offiziellen Dokumentation von Zendesk vertraut sind: iOS und Android.

VERSIONEN

• Verwenden Sie für Zendesk Chat v2 Version >= 0.4.0 (dies erfordert RN 0.59 oder höher!)
• Für RN-Version >= 0.59 verwenden Sie Version >= 0.3.0 (Zendesk Chat v1)
• Für RN-Version < 0.59 verwenden Sie Version <= 0.2.2 (Zendesk Chat v1)

Bekannte Probleme

Erste Schritte

Mit npm:

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

oder mit Garn:

yarn add react-native-zendesk-chat

Schnellstart und Nutzung

1. Richten Sie native Abhängigkeiten ein
   iOS Wenn Sie React-Native >= 0.60 verwenden und Cocoapods eingerichtet haben, müssen Sie nur Folgendes tun:

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

Wenn Sie ältere React-Native-Versionen verwenden, lesen Sie bitte den Abschnitt „Erweiterte Einrichtung“ unten

Android Wenn Sie React-Native >= 0.60 verwenden, sollte Android diese Abhängigkeit automatisch erkennen. Wenn Sie 0,59 verwenden, müssen Sie möglicherweise react-native link aufrufen

2. Rufen Sie den JS-Initialisierer auf:

 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. Zeigen Sie die Chat-Benutzeroberfläche an

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

Erhalten des YOUR_ZENDESK_ACCOUNT_KEY

Um Ihren Zendesk-Kontoschlüssel zu erhalten, lesen Sie die Anweisungen unter Initialisieren des SDK im Zendesk SDK.

Um Ihren Kontoschlüssel zu erhalten, führen Sie die folgenden Schritte aus:

1. Klicken Sie im Zendesk Chat-Dashboard auf Ihr Profil in der oberen rechten Ecke und dann auf die Option „Verbindung prüfen“:
2. Kopieren Sie im Dialogfeld den Kontoschlüsselwert

Styling

Das Ändern des UI-Stylings wird meist durch native Techniken erreicht.

Auf Android ist dies die offizielle Dokumentation – und ein Beispiel könnte das Hinzufügen dieser drei Zeilen zu Ihrem App-Theme sein

Unter iOS sind die Optionen minimaler – schauen Sie sich die offizielle Dokumentationsseite an

Migration

Von React-Native-Zendesk-Chat <= 0.3.0

Um von früheren Versionen der Bibliothek zu migrieren, sollten Sie wahrscheinlich alle von Ihnen angewendeten Integrationsschritte entfernen und mit dem Schnellstart von vorne beginnen.

Die JS-API-Aufrufe sind sehr ähnlich, mit meist additiven Änderungen.

Erweiterte Einrichtung

Fortgeschrittene Benutzer oder Benutzer, die ältere Versionen von React-Native verwenden, möchten möglicherweise Dinge in Native initialisieren.

iOS: Manuelles Einrichten mit Cocoapods

Wenn Sie iOS < 0.60 verwenden, müssen Sie den Cocoapod möglicherweise manuell installieren:

Fügen Sie einen Verweis auf Ihr Podfile hinzu:

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

Führen Sie dann pod install aus: (cd ios; pod install)

oder manuell:

Ziehen Sie in Xcode node_modules/react-native-zendesk-chat/RNZendeskChat.m und node_modules/react-native-zendesk-chat/RNZendeskChat.h per Drag & Drop in Ihr Projekt.

iOS: ZDCChat in AppDelegate.m konfigurieren:

# 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: Manuelle Einrichtung und Konfiguration

Wenn Sie „react-native“ < 0,60 verwenden, sollten Sie react-native link aufrufen können.

Wenn dies nicht funktioniert, müssen Sie möglicherweise eine vollständige manuelle Installation wie folgt durchführen:

1. Öffnen Sie android/app/main/java/[...]/MainApplication.java

• import com.taskrabbit.zendesk.*; zu den Importen oben in der Datei
• Fügen Sie new RNZendeskChatPackage(this) zur Liste hinzu, die von der Methode getPackages() zurückgegeben wird

2. Hängen Sie die folgenden Zeilen an android/settings.gradle an:

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

3. Fügen Sie die folgenden Zeilen in den Abhängigkeitsblock in android/app/build.gradle ein:

Für RN >= 0,60:

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

auch im Projekt build.gradle

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

Für RN < 0,60:

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

4. Konfigurieren Sie Chat in 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 );

Mitwirken

• Pull-Requests sind erwünscht!
• Seien Sie respektvoll!
• Der Stammzweig dieses Repos heißt main

Lizenz

react native zendesk chat ist MIT-lizenziert, wie in der LICENSE-Datei zu finden ist.