react native zendesk chat

reaccionar-nativo-zendesk-chat

Módulo simple que admite la visualización de Zendesk Chat dentro de una aplicación React Native.

Esta biblioteca supone que está familiarizado con la documentación oficial de Zendesk: iOS y Android.

VERSIONES

• Para Zendesk Chat v2, use la versión >= 0.4.0 (¡esto requiere RN 0.59 o posterior!)
• Para la versión RN >= 0.59 use la versión >= 0.3.0 (Zendesk Chat v1)
• Para la versión RN <0.59, use la versión <= 0.2.2 (Zendesk Chat v1)

Problemas conocidos

Empezando

Con npm:

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

o con hilo:

yarn add react-native-zendesk-chat

Inicio rápido y uso

1. Configurar dependencias nativas
   iOS Si estás en react-native >= 0.60 y tienes configurado Cocoapods, entonces solo necesitas:

$ 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 tiene versiones nativas de reacción anteriores, consulte la sección Configuración avanzada a continuación

Android Si está en reaccionar nativo >= 0.60, Android debería detectar automáticamente esta dependencia. Si tiene 0.59, es posible que deba llamar react-native link

2. Llame al inicializador 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. Mostrar la interfaz de usuario del 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" ,
} ) ;

Obtención de YOUR_ZENDESK_ACCOUNT_KEY

Para obtener la clave de su cuenta de Zendesk, consulte las instrucciones en Inicialización del SDK en el SDK de Zendesk.

Para obtener su clave de cuenta, siga estos pasos:

1. En el Panel de Zendesk Chat, haga clic en su perfil en la esquina superior derecha y haga clic en la opción 'Verificar conexión':
2. En el cuadro de diálogo, copie el valor de la clave de la cuenta.

Estilo

El cambio del estilo de la interfaz de usuario se logra principalmente mediante técnicas nativas.

En Android, esta es la documentación oficial, y un ejemplo podría ser agregar estas 3 líneas al tema de tu aplicación.

En iOS, las opciones son más mínimas: consulte la página de documentación oficial

Migrar

Desde reaccionar-nativo-zendesk-chat <= 0.3.0

Para migrar desde versiones anteriores de la biblioteca, probablemente debería eliminar todos los pasos de integración que aplicó y comenzar de nuevo desde el Inicio rápido.

Las llamadas a la API de JS son muy similares, en su mayoría con cambios aditivos.

Configuración avanzada

Los usuarios avanzados o los usuarios que ejecutan versiones anteriores de reaccionar-nativo pueden querer inicializar cosas en forma nativa.

iOS: configuración manual con Cocoapods

Si tienes iOS <0.60, es posible que tengas que instalar manualmente cocoapod:

Agregue una referencia a su Podfile:

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

luego ejecute pod install: (cd ios; pod install)

o manualmente:

En Xcode, arrastre y suelte node_modules/react-native-zendesk-chat/RNZendeskChat.m y node_modules/react-native-zendesk-chat/RNZendeskChat.h en su proyecto.

iOS: Configure ZDCChat en 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: configuración y configuración manual

Si está en reaccionar-nativo <0.60, debería poder llamar react-native link .

Si esto no funciona, es posible que deba realizar una instalación manual completa de la siguiente manera:

1. Abra android/app/main/java/[...]/MainApplication.java

• Agregue import com.taskrabbit.zendesk.*; a las importaciones en la parte superior del archivo
• Agregue new RNZendeskChatPackage(this) a la lista devuelta por el método getPackages()

2. Agregue las siguientes líneas a 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. Inserta las siguientes líneas dentro del bloque de dependencias en android/app/build.gradle :

Para RN >= 0,60:

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

también en el proyecto build.gradle

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

Para RN < 0,60:

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

4. Configurar Chat en 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 );

Contribuyendo

• ¡Se recomiendan las solicitudes de extracción!
• ¡Sea respetuoso!
• La rama troncal de este repositorio se llama main

Licencia

react native zendesk chat tiene licencia MIT, como se encuentra en el archivo LICENCIA.