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

> Tami · Cập nhật lần cuối ngày 10 thg 4, 2024

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](https://docs.squareomni.com/hc/squarehub-user-guide-cloud-version/en/website-live-chat/474) 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[​](https://docs.squareomni.com/docs/product/channels/live-chat/integrations/react-native-widget#2-add-the-plugin-to-your-project "Direct link to heading")

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](https://www.npmjs.com/package/react-native-webview) và [async-storage](https://github.com/react-native-async-storage/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**[**​**](https://docs.squareomni.com/docs/product/channels/live-chat/integrations/react-native-widget#ios-installation "Direct link to heading")

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[​](https://docs.squareomni.com/docs/product/channels/live-chat/integrations/react-native-widget#3-use-it-like-this "Direct link to heading")

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](https://github.com/squarehub/squarehub-react-native-widget/tree/develop/examples).