Nhảy tới nội dung

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-webviewasync-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

PropKiểuBắt buộcMô tả
channelIdstringID của kênh chat
user (v0.5 trở lên)ChativeWidgetUserKhôngThông tin về người dùng, được sử dụng để khởi động vào live chat
headerComponentReactElementKhôngThành phần header tùy chỉnh
containerStyleViewStyleKhôngKiểu tùy chỉnh cho container
insetTopnumberKhôngKhoảng cách trên (mặc định: 50 cho iOS, 20 cho Android)
insetBottomnumberKhôngKhoảng cách dưới (mặc định: 50 cho iOS, 20 cho Android)
onClosed() => voidKhôngCallback khi widget được đóng
onLoaded() => voidKhôngCallback khi widget được tải
onNewMessage() => voidKhôngCallback 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 😊