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 😊