Como instalar chat ao vivo em um aplicativo React Native?

Se você tem um aplicativo React Native, pode adicionar o widget de chat ao vivo do Chatwoot para conversar com seus visitantes em tempo real. Isso pode ser feito em três etapas simples usando o plugin Chatwoot.

Passo 1. Crie uma caixa de entrada no Chatwoot

Consulte o guia completo para instruções detalhadas sobre como configurar uma caixa de entrada no Chatwoot.

Passo 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

Essa biblioteca depende de react-native-webview e async-storage. Siga as instruções fornecidas na documentação para configurá-los corretamente.

Instalação no iOS

Se você está usando versões do React Native superiores a 60.0, a instalação é bem simples.

cd ios && pod install

Passo 3. Configure o uso do plugin

Substitua websiteToken e baseUrl pelos valores corretos.

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 = {

    identifier: '[email protected]',

    name: 'John Samuel',

    avatar_url: '',

    email: '[email protected]',

    identifier_hash: '',

  };

  const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };

  const websiteToken = 'WEBSITE_TOKEN';

  const baseUrl = 'CHATWOOT_INSTALLATION_URL';

  const locale = 'pt';

  return (

    <SafeAreaView style={styles.container}>

      <View>

        <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>

          <Text style={styles.buttonText}>Abrir widget</Text>

        </TouchableOpacity>

      </View>

      {

        showWidget &&

          <ChatWootWidget

            websiteToken={websiteToken}

            locale={locale}

            baseUrl={baseUrl}

            closeModal={() => toggleWidget(false)}

            isModalVisible={showWidget}

            user={user}

            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;