Como instalar chat ao vivo com React Native

Se você tiver um aplicativo React Native, poderá adicionar o widget de chat ao vivo do Chatwoot e conversar com seus visitantes em tempo real. Isso pode ser feito em 3 etapas simples usando o plugin Chatwoot.

Etapa 1. Crie uma caixa de entrada para um site no Chatwoot​

Consulte este guia para obter instruções detalhadas sobre como configurar uma caixa de entrada para um site no Chatwoot.

Etapa 2. Adicione o plugin ao seu projeto​

Adicione um dos seguintes plugins ao seu projeto.

yarn add @chatwoot/react-native-widget

ou

npm install --save @chatwoot/react-native-widget --save

Esta biblioteca depende de react-native-webview e async-storage. Siga as instruções fornecidas na documentação.

Instalação no iOS​

Se você estiver usando versões do React Native superiores a 60.0, é relativamente simples.

cd ios && pod install

Etapa 3. Use assim​

Substitua websiteToken e baseUrl pelos valores apropriados.

import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import ChatWootWidget from '@chatwoot/react-native-widget';

const App = () => {
const [showWidget, toggleWidget] = useState(false);
const user = {
identificador: 'john@gmail.com',
nome: 'John Samuel',
url_do_avatar: '',
e-mail: 'john@gmail.com',
hash_do_identificador: '',
};
const customAttributes = { accountId: 1, pricingPlan: 'pago', status: 'ativo' };
const websiteToken = 'WEBSITE_TOKEN';
const baseUrl = 'CHATWOOT_INSTALLATION_URL';
const locale = 'en';

retornar (
<SafeAreaView style={styles.container}>
<Exibir>
<TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
<Text style={styles.buttonText}>Abrir widget</Text>
</TouchableOpacity>
</Exibir>
{
mostrarWidget&&
<ChatWootWidget
websiteToken={websiteToken}
locale={locale}
baseUrl={baseUrl}
closeModal={() => toggleWidget(false)}
isModalVisible={mostrarWidget}
usuário={usuário}
customAttributes={customAttributes}
/>
}

</SafeAreaView>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},

button: {
height: 48,
marginTop: 32,
paddingTop: 8,
paddingBottom: 8,
backgroundColor: '#1F93FF',
borderRadius: 8,
borderWidth: 1,
borderColor: '#fff',
justifyContent: 'center',
},
buttonText: {
color: '#fff',
textAlign: 'center',
paddingLeft: 10,
fontWeight: '600',
fontSize: 16,
paddingRight: 10,
},
});

export default App;

E… pronto. Confira o exemplo completo aqui.