Como instalar o chat ao vivo em um aplicativo React Native?

Última atualização em 10 de Abr, 2024

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

Passo 1. Crie uma caixa de entrada de website no Yuzap

Por favor, consulte este guia para instruções detalhadas sobre como configurar uma caixa de entrada de website no Yuzap.

Passo 2. Adicione o plugin ao seu projeto

Adicione um dos seguintes plugins ao seu projeto (Nota: O nome exato do plugin @yuzap/react-native-widget pode precisar ser confirmado/criado para Yuzap).

yarn add @yuzap/react-native-widget

ou

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

Esta biblioteca depende de react-native-webview e async-storage. Por favor, siga as instruções fornecidas nas documentações dessas bibliotecas.

Instalação iOS

Se você estiver usando versões do React Native > 60.0, é relativamente direto.

cd ios && pod install

Passo 3. Use-o assim

Substitua websiteToken e baseUrl pelos valores apropriados.

import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import YuzapWidget from '@yuzap/react-native-widget'; // Adaptado de ChatwootWidget e @chatwoot/react-native-widget

const App = () => {
  const [showWidget, toggleWidget] = useState(false);

  const user = {
    identifier: '[e-mail]',
    name: 'John Samuel',
    avatar_url: '',
    email: '[e-mail]',
    identifier_hash: '', // Gerado a partir do HMAC SHA256 do identifier usando a identity_validation_token da caixa de entrada
  };

  const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
  const websiteToken = 'TOKEN_DO_WEBSITE_YUZAP'; // Substitua pelo seu token do website Yuzap
  const baseUrl = 'URL_INSTALACAO_YUZAP'; // Substitua pela URL base da sua instalação Yuzap (ex: https://app.yuzap.com)
  const locale = 'pt-BR'; // Define o idioma do widget

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
          <Text style={styles.buttonText}>Abrir Chat</Text>
        </TouchableOpacity>
      </View>
      {showWidget && (
        <YuzapWidget
          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', // Cor de exemplo
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#fff',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    paddingLeft: 10,
    paddingRight: 10,
    fontSize: 16,
    fontWeight: '600',
  },
});

export default App;

E... pronto. Confira o exemplo completo aqui (Nota: A URL do exemplo completo precisa ser confirmada/criada).