react native zendesk chat Télécharger - react native zendesk chat Téléchargement du code source

react native zendesk chat

Code Source AI

v0.4.1 - Bug

Télécharger

réagir-native-zendesk-chat

Module simple qui prend en charge l’affichage de Zendesk Chat dans une application React Native.

Cette bibliothèque suppose que vous connaissez la documentation officielle de Zendesk : iOS et Android.

VERSIONS

Pour Zendesk Chat v2, utilisez la version >= 0.4.0 (cela nécessite RN 0.59 ou version ultérieure !)
Pour la version RN >= 0.59, utilisez la version >= 0.3.0 (Zendesk Chat v1)
Pour la version RN < 0.59, utilisez la version <= 0.2.2 (Zendesk Chat v1)

Problèmes connus

Commencer

Avec npm :

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

ou avec du fil :

yarn add react-native-zendesk-chat

Démarrage rapide et utilisation

Configurer les dépendances natives
iOS Si vous utilisez React-Native >= 0.60 et que vous avez configuré Cocoapods, il vous suffit de :

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

Si vous utilisez d'anciennes versions de React-Native, veuillez consulter la section Configuration avancée ci-dessous.

Android Si vous utilisez React-Native >= 0.60, Android devrait détecter automatiquement cette dépendance. Si vous êtes sur 0,59, vous devrez peut-être appeler react-native link

Appelez l'initialiseur 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" ) ;

Afficher l'interface utilisateur de chat

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

Obtention du `YOUR_ZENDESK_ACCOUNT_KEY`

Pour obtenir votre clé de compte Zendesk, consultez les instructions dans Initialisation du SDK dans le SDK Zendesk.

Pour obtenir votre clé de compte, procédez comme suit :

Dans le tableau de bord Zendesk Chat, cliquez sur votre profil dans le coin supérieur droit et cliquez sur l'option « Vérifier la connexion » :
Dans la boîte de dialogue, copiez la valeur de la clé de compte

Stylisme

La modification du style de l'interface utilisateur est principalement réalisée grâce à des techniques natives.

Sur Android, il s'agit de la documentation officielle. Un exemple pourrait être l'ajout de ces 3 lignes au thème de votre application.

Sur iOS, les options sont plus minimes – consultez la page de documentation officielle

Migration

De réagir-native-zendesk-chat <= 0.3.0

Pour migrer à partir des versions précédentes de la bibliothèque, vous devez probablement supprimer toutes les étapes d'intégration que vous avez appliquées et recommencer à partir du Quick Start.

Les appels de l'API JS sont très similaires, avec des modifications principalement additives.

Configuration avancée

Les utilisateurs avancés ou les utilisateurs exécutant des versions plus anciennes de React-Native voudront peut-être initialiser les choses en natif.

iOS : configuration manuelle avec Cocoapods

Si vous utilisez iOS < 0.60, vous devrez peut-être installer manuellement le cocoapod :

Ajoutez une référence à votre Podfile :

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

puis exécutez pod install : (cd ios; pod install)

ou manuellement :

Dans Xcode, faites glisser et déposez node_modules/react-native-zendesk-chat/RNZendeskChat.m et node_modules/react-native-zendesk-chat/RNZendeskChat.h dans votre projet.

iOS : configurez `ZDCChat` dans `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 : installation et configuration manuelles

Si vous utilisez React-Native < 0,60, vous devriez pouvoir appeler react-native link .

Si cela ne fonctionne pas, vous devrez peut-être effectuer une installation manuelle complète comme suit :

Ouvrez android/app/main/java/[...]/MainApplication.java

Ajoutez import com.taskrabbit.zendesk.*; aux importations en haut du fichier
Ajoutez new RNZendeskChatPackage(this) à la liste renvoyée par la méthode getPackages()

Ajoutez les lignes suivantes à 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 ' )

Insérez les lignes suivantes dans le bloc de dépendances dans android/app/build.gradle :

Pour RN >= 0,60 :

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

également dans le projet build.gradle

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

Pour RN < 0,60 :

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

Configurez Chat dans 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 );