Chatbot Widget

Một widget chatbot mạnh mẽ, dễ dàng tích hợp vào các dự án React hoặc website bất kỳ thông qua script tag.

Cài đặt

Sử dụng npm:

npm install @ducthai/chatbot-widget

Sử dụng yarn:

yarn add @ducthai/chatbot-widget

Cách sử dụng

1. Trong dự án React (ES Module)

import { ChatWidget } from '@ducthai/chatbot-widget';
import '@ducthai/chatbot-widget/dist/style.css'; 

function App() {
  const config = {
    chatKey: 'YOUR_API_KEY',
    title: 'Hỗ trợ khách hàng',
    primaryColor: '#4f46e5',
    user: {
      code: 'user_123',
      name: 'Nguyễn Đức Thái',
    }
  };

  return (
    <div className="App">
      <ChatWidget {...config} />
    </div>
  );
}

2. Sử dụng qua Script tag (UMD)

Dành cho các trang web không dùng React (HTML thuần, PHP, Wordpress...):

<script src="https://unpkg.com/@ducthai/chatbot-widget/dist/chatbot-widget.umd.js"></script>
<script>
  // Chờ cho script load xong rồi init
  window.addEventListener('load', function() {
    ChatbotWidget.init({
      chatKey: 'YOUR_API_KEY',
      title: 'Hỗ trợ trực tuyến',
      user: {
        code: 'guest_01',
        name: 'Khách hàng'
      }
    });
  });
</script>

Các thuộc tính cấu hình (Props)

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | --- | --- | --- | --- | | chatKey | string | Bắt buộc | API Key để kết nối server | | user | UserInfo | Bắt buộc | Thông tin người dùng (code, name, avatar) | | title | string | 'Chatbot' | Tiêu đề trên header của widget | | primaryColor | string | '#4f46e5' | Màu sắc chủ đạo của giao diện (Hex code) | | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Vị trí hiển thị của nút chat |

Phát triển

# Cài đặt dependencies
npm install

# Chạy ở chế độ phát triển
npm run dev

# Build thư viện
npm run build

License

MIT © Nguyen Duc Thai