react native zendesk chat Download - react native zendesk chat Download do código-fonte

react native zendesk chat

Código-Fonte de IA

v0.4.1 - Bug

Baixar

reagir-nativo-zendesk-chat

Módulo simples que suporta a exibição do Zendesk Chat em um aplicativo React Native.

Esta biblioteca pressupõe que você esteja familiarizado com a documentação oficial do Zendesk: iOS e Android.

VERSÕES

Para o Zendesk Chat v2, use a versão >= 0.4.0 (requer RN 0.59 ou posterior!)
Para versão RN >= 0.59, use a versão >= 0.3.0 (Zendesk Chat v1)
Para versão RN < 0.59, use a versão <= 0.2.2 (Zendesk Chat v1)

Problemas conhecidos

Começando

Com npm:

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

ou com fio:

yarn add react-native-zendesk-chat

Início rápido e uso

Configurar dependências nativas
iOS Se você estiver no react-native >= 0.60 e tiver a configuração do Cocoapods, basta:

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

Se você estiver em versões mais antigas do react-native, consulte a seção Configuração avançada abaixo

Android Se você estiver em react-native >= 0,60, o Android deverá detectar automaticamente essa dependência. Se você estiver em 0,59, pode ser necessário chamar react-native link

Chame o 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" ) ;

Mostrar a IU do bate-papo

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

Obtendo a `YOUR_ZENDESK_ACCOUNT_KEY`

Para obter a chave da sua conta zendesk, consulte as instruções em Inicializando o SDK no SDK do Zendesk.

Para obter a chave da sua conta, siga estas etapas:

No painel do Zendesk Chat, clique no seu perfil no canto superior direito e clique na opção ‘Verificar conexão’:
Na caixa de diálogo, copie o valor da chave da conta

Estilo

A alteração do estilo da interface do usuário é obtida principalmente por meio de técnicas nativas.

No Android, esta é a documentação oficial – e um exemplo pode ser adicionar estas 3 linhas ao tema do seu aplicativo

No iOS, as opções são mínimas – verifique a página oficial do documento

Migrando

De react-native-zendesk-chat <= 0.3.0

Para migrar de versões anteriores da biblioteca, você provavelmente deverá remover todas as etapas de integração aplicadas e recomeçar a partir do Início rápido.

As chamadas da API JS são muito semelhantes, com alterações principalmente aditivas.

Configuração avançada

Usuários avançados ou usuários executando versões mais antigas do react-native podem querer inicializar coisas nativamente.

iOS: configuração manual com Cocoapods

Se você estiver no iOS <0.60, pode ser necessário instalar manualmente o cocoapod:

Adicione uma referência ao seu Podfile:

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

em seguida, execute pod install: (cd ios; pod install)

ou manualmente:

No Xcode, arraste e solte node_modules/react-native-zendesk-chat/RNZendeskChat.m e node_modules/react-native-zendesk-chat/RNZendeskChat.h em seu projeto.

iOS: Configure `ZDCChat` em `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: configuração e configuração manual

Se você estiver em react-native <0,60, poderá chamar react-native link .

Se isso não funcionar, talvez seja necessário fazer uma instalação manual completa da seguinte maneira:

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

Adicionar import com.taskrabbit.zendesk.*; para as importações no topo do arquivo
Adicione new RNZendeskChatPackage(this) à lista retornada pelo método getPackages()

Anexe as seguintes linhas 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 ' )

Insira as seguintes linhas dentro do bloco de dependências em 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 '

também no projeto build.gradle

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

Para RN < 0,60:

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

Configure Chat em 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 );