Widget SDK Chative.IO cho React Native

Giới thiệu

Chative Widget là một thành phần React Native cung cấp widget chat dễ sử dụng cho ứng dụng di động của bạn. Nó cho phép bạn tích hợp giao diện chat có thể tùy chỉnh với thiết lập tối thiểu.

Cài đặt

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

npm install @chative.io/react-native-widget
# hoặc
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 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 của bạn
      first_name: 'John',
      last_name: 'Doe',
      phone: '+1234567890',
      custom_field: 'CUSTOMER_FIELD_VALUE' // Thay thế khóa và giá trị bằng trường tùy chỉnh của bạn
  },
}

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

Props

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

Phương thức

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

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

Cách sử dụng

Đây là một 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 của bạn
        first_name: 'John',
        last_name: 'Doe',
        phone: '+1234567890',
        custom_field: 'CUSTOMER_FIELD_VALUE' // Thay thế khóa và giá trị bằng trường tùy chỉnh của bạn
    },
  }

  return (
    <View style={{ flex: 1 }}>
      <Button title="Mở Chat" onPress={handleOpenChat} />
      <ChativeWidget
        ref={widgetRef}
        user={user} // yêu cầu v0.5 trở lên
        channelId="your-channel-id"
        onClosed={() => console.log('Widget đã đóng')}
        onLoaded={() => console.log('Widget đã tải')}
        onNewMessage={(message) => console.log('Tin nhắn mới:', message)}
      />
    </View>
  );
}

Nếu bạn có bất kỳ thắc mắc nào, vui lòng liên hệ với chúng tôi qua live chat. Để biết thêm chi tiết về cách chúng tôi đã giúp khách hàng phát triển kinh doanh, bạn có thể xem blog của chúng tôi hoặc tham gia cộng đồng Discord để học hỏi và chia sẻ những điều mới 😊