# 🤖 Demo ChatBot Widget JavaScript

## Chào mừng đến với demo ChatBot Widget!

Đây là demo cho ChatBot Widget JavaScript - một file JS độc lập có thể tự render ra khung chat.

### 🎯 Đặc điểm:

- File JS độc lập - Chỉ cần include 1 file
- Tự động render - Tự tạo HTML và CSS
- Không xung đột - CSS được namespaced
- Dễ cấu hình - Thay đổi theme, position, etc.
- API đầy đủ - Mở, đóng, gửi tin nhắn
- Chức năng Tabs - Tạo chứng từ và Tra cứu
- Suggestions Menu - Menu gợi ý với tabs
- CTGS Management - Quản lý chứng từ ghi sổ

### 🧪 Test Controls:

### 🔧 API Data Management:

#### 📋 API Configuration:

User ID:
Token HTTPTC:
Mã Đơn Vị:
Năm:
Tháng:
Mã Cán Bộ:
Tên Cơ Quan:
MSQHNS:
Lập Biểu (kthcNlb):
Kế Toán (kthcPtkt):

#### 📊 Current API Data:

    Click "Load API Data" to see current data

### 📋 Cách sử dụng:

#### 1. Cơ bản (Chỉ cần 1 dòng):

<script src="https://api.muvietplus.net/chatbot-widget.js"></script>

✅ Tự động hoạt động - Widget JS tự động kết nối tới server, không cần cấu hình!

#### 2. Với cấu hình tùy chỉnh:

<script> // Cấu hình trước khi load window.setChatbotConfig({ title: 'Hỗ Trợ Khách Hàng', welcomeMessage: 'Xin chào! Tôi có thể giúp gì cho bạn?', position: 'bottom-left', theme: { primaryColor: '#ff6b6b', secondaryColor: '#ee5a24' }, onOpen: function() { console.log('ChatBot đã mở!'); } }); </script> <script src="https://api.muvietplus.net/chatbot-widget.js"></script>

#### 3. Chức năng Tabs:

// ChatBot có 2 tab chính: // Tab 1: Tạo chứng từ - Tạo lương tháng - Tạo bảo hiểm tháng - Tạo kinh phí công đoàn tháng // Tab 2: Tra cứu - Tra cứu lương - Tra cứu bảo hiểm - Tra cứu CTGS // Truy cập tabs qua suggestions menu (💡)

#### 4. Điều khiển từ JavaScript:

// Mở ChatBot window.ChatBotAPI.open(); // Đóng ChatBot window.ChatBotAPI.close(); // Gửi tin nhắn window.ChatBotAPI.sendMessage('Xin chào!'); // Gửi tin nhắn với API flag window.ChatBotAPI.sendMessageWithFlag('Tạo lương tháng', true); // Lấy cấu hình const config = window.ChatBotAPI.getConfig(); // Hiển thị suggestions menu window.ChatBotAPI.showSuggestions();

### ⚙️ Cấu hình có sẵn:

- showPopupIcon: Hiển thị icon popup
- autoOpen: Tự động mở khi load
- position: Vị trí (bottom-right, bottom-left, top-right, top-left)
- theme: Màu sắc (primaryColor, secondaryColor, backgroundColor, textColor)
- title: Tiêu đề ChatBot
- welcomeMessage: Tin nhắn chào mừng
- placeholder: Placeholder input
- callbacks: onOpen, onClose, onMessage, onError

### 📱 Mobile Responsive:

Widget tự động điều chỉnh kích thước trên mobile để phù hợp với màn hình nhỏ.

### 📋 Chức năng Tabs:

#### 🎯 Tab "Tạo chứng từ":

- 💰 Tạo lương tháng - Tạo chứng từ lương hàng tháng
- 🛡️ Tạo bảo hiểm tháng - Tạo chứng từ bảo hiểm
- 🤝 Tạo kinh phí công đoàn tháng - Tạo chứng từ công đoàn

#### 🔍 Tab "Tra cứu":

- 💰 Tra cứu lương - Xem thông tin lương
- 🛡️ Tra cứu bảo hiểm - Xem thông tin bảo hiểm
- 📄 Tra cứu CTGS - Xem chứng từ ghi sổ

#### 💡 Cách sử dụng:

1. Click vào icon 💡 để mở suggestions menu
2. Chọn tab "Tạo chứng từ" hoặc "Tra cứu"
3. Click vào chức năng mong muốn
4. Hệ thống sẽ tự động xử lý và hiển thị kết quả

### 🔒 Bảo mật:

- CSS được namespaced để tránh xung đột
- Không ảnh hưởng đến website chủ
- Session management độc lập
- API key được bảo vệ

### 🚀 Lợi ích:

- Đơn giản - Chỉ cần 1 file JS
- Linh hoạt - Dễ cấu hình và tùy chỉnh
- An toàn - Không xung đột với website
- Hiệu suất - Load nhanh, tối ưu
- Responsive - Hoạt động tốt trên mọi thiết bị
- Tổ chức tốt - Chức năng được chia thành tabs rõ ràng
- Dễ sử dụng - Menu gợi ý với tabs trực quan
- Quản lý CTGS - Hỗ trợ tạo và quản lý chứng từ ghi sổ