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

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

Etapa 1. Crie uma caixa de entrada de site no Trino AI

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

Etapa 2. Adicione o plugin ao seu projeto

Adicione um dos seguintes plugins ao seu projeto

yarn add @trinoai/react-native-widget

ou

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

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

Instalação iOS

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

cd ios && pod install

Passo 3. Use assim

Substitua  websiteToken e  baseUrl por valores apropriados.

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

const App = () => {
  const [showWidget, toggleWidget] = useState(false);
  const user = {
    identifier: 'john@gmail.com',
    name: 'John Samuel',
    avatar_url: '',
    email: 'john@gmail.com',
    identifier_hash: '',
  };
  const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
  const websiteToken = 'WEBSITE_TOKEN';
  const baseUrl = 'TRINOAI_INSTALLATION_URL';
  const locale = 'en';

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
          <Text style={styles.buttonText}>Open widget</Text>
        </TouchableOpacity>
      </View>
      {
        showWidget&&
          <TrinoaiWidget
            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;

E... pronto.