Hướng dẫn Cài đặt và Sử dụng Chative Widget cho React Native

Chative Widget là một thành phần React Native cung cấp một widget chat dễ sử dụng cho các ứng dụng di động của bạn.

Cài đặt

Để cài đặt Chative Widget SDK cho React Native, hãy chạy lệnh sau:

npm install @chative.io/react-native-widget
# or
yarn add @chative.io/react-native-widget

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.

import { ChativeWidget } from '@chative.io/react-native-widget';

...

const user = {
  user_id: 'UNIQUE_USER_ID',
    user: {
      email: 'acme@example.com', // Địa chỉ email của người dùng
      first_name: 'John',
      last_name: 'Doe',
      phone: '+1234567890',
      custom_field: 'CUSTOMER_FIELD_VALUE' // Thay bằng key và giá trị của trường tuỳ chỉnh
  },
}

<ChativeWidget
  ref={widgetRef}
  user={user} // Yêu cầu v0.5 trở lên
  channelId="your-channel-id"
  headerComponent={<YourCustomHeader />}
  containerStyle={{ backgroundColor: 'lightgray' }}
/>

Thuộc tính (Props)

Prop	Type	Required	Description
channelId	string	Yes	ID của kênh chat
user (yêu cầu v0.5 trở lên)	ChativeWidgetUser	No	Thông tin về người dùng, được sử dụng để khởi động cùng live chat
headerComponent	ReactElement	No	Thành phần header tùy chỉnh
containerStyle	ViewStyle	No	Kiểu dáng tùy chỉnh cho vật chứa
insetTop	number	No	Khoảng cách trên cùng (mặc định: 50 cho iOS, 20 cho Android)
insetBottom	number	No	Khoảng cách dưới cùng (mặc định: 50 cho iOS, 20 cho Android)
onClosed	() => void	No	Callback khi widget đóng
onLoaded	() => void	No	Callback khi widget được tải
onNewMessage	() => void	No	Callback khi nhận được tin nhắn mới

Phương thức (Methods)

Các phương thức sau có sẵn qua ref:

• show(): Hiển thị widget chat
• hide(): Ẩn widget chat
• reload(): Tải lại widget

Sử dụng

Dưới đây là ví dụ cơ bản về cách sử dụng ChativeWidget trong ứng dụng React Native của bạn:

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import ChativeWidget from '@chative.io/react-native-widget';

export default function App() {
  const widgetRef = useRef(null);

  const handleOpenChat = () => {
    widgetRef.current?.show();
  };

  const handleCloseChat = () => {
    widgetRef.current?.hide();
  };

  const user = {
  user_id: 'UNIQUE_USER_ID',
    user: {
      email: 'acme@example.com', // Địa chỉ email của người dùng
      first_name: 'John',
      last_name: 'Doe',
      phone: '+1234567890',
      custom_field: 'CUSTOMER_FIELD_VALUE' // Thay bằng key và giá trị của trường tuỳ chỉnh
  },
}

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Chat" onPress={handleOpenChat} />
      <ChativeWidget
        ref={widgetRef}
        channelId="your-channel-id"
        user={user} // Yêu cầu v0.5 trở lên
        onClosed={() => console.log('Widget closed')}
        onLoaded={() => console.log('Widget loaded')}
        onNewMessage={(message) => console.log('New message:', message)}
      />
    </View>
  );
}