Cách cài đặt live chat trên ứng dụng React Native?

Nếu bạn có ứng dụng React Native, bạn có thể thêm widget live chat SquareHub và trò chuyện với khách truy cập theo thời gian thực. Điều này có thể thực hiện trong 3 bước đơn giản bằng cách sử dụng plugin SquareHub.

Bước 1. Tạo website inbox trong SquareHub​

Vui lòng tham khảo hướng dẫn này để có hướng dẫn chi tiết về cách thiết lập website inbox trong SquareHub.

Bước 2. Thêm plugin vào dự án của bạn​

Thêm một trong các plugin sau vào dự án của bạn.

yarn add @squarehub/react-native-widget

hoặc

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

Thư viện này phụ thuộc vào react-native-webview và async-storage. Vui lòng làm theo hướng dẫn được cung cấp trong tài liệu.

Cài đặt iOS​

Nếu bạn đang sử dụng phiên bản React Native > 60.0, quá trình này khá đơn giản.

cd ios && pod install

Bước 3. Sử dụng như sau​

Thay thế websiteToken và baseUrl bằng các giá trị phù hợp.

import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import SquareHubWidget from '@squarehub/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 = 'SQUAREHUB_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&&
          <SquareHubWidget
            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;

Vậy là xong. Xem ví dụ đầy đủ tại đây.