Como instalar o chat em app React Native

Use este guia para instalar o widget de chat da IAra em um app React Native.

Antes de começar

• Crie uma caixa de entrada do tipo Site na IAra.
• Copie websiteToken e baseUrl.
• Confirme com a Digi2B qual pacote do widget móvel está habilitado para sua instalação.
• Instale as dependências nativas exigidas pelo pacote.

Instalação

Use o pacote indicado para sua conta. Em contas IAra, o pacote pode ser disponibilizado como:

yarn add @iara/react-native-widget

ou:

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

Em iOS, rode:

cd ios && pod install

Exemplo de uso

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

export default function App() {
  const [showWidget, setShowWidget] = useState(false);

  const user = {
    identifier: 'cliente-123',
    name: 'Maria Souza',
    avatar_url: '',
    email: '[email protected]',
    identifier_hash: '',
  };

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

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <TouchableOpacity style={styles.button} onPress={() => setShowWidget(true)}>
          <Text style={styles.buttonText}>Abrir atendimento</Text>
        </TouchableOpacity>
      </View>

      {showWidget && (
        <IaraWidget
          websiteToken="SEU_WEBSITE_TOKEN"
          locale="pt_BR"
          baseUrl="https://app.digi2b.com"
          closeModal={() => setShowWidget(false)}
          isModalVisible={showWidget}
          user={user}
          customAttributes={customAttributes}
        />
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    height: 48,
    paddingHorizontal: 16,
    backgroundColor: '#1F93FF',
    borderRadius: 8,
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 16,
  },
});

Como testar

1. Abra o app em simulador ou dispositivo real.
2. Toque em Abrir atendimento.
3. Envie uma mensagem pelo widget.
4. Confirme se a conversa aparece na caixa de entrada da IAra.