Demo ChatBot Widget JS

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):

✅ 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:

Click vào icon 💡 để mở suggestions menu
Chọn tab "Tạo chứng từ" hoặc "Tra cứu"
Click vào chức năng mong muốn
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ổ

🤖 Demo ChatBot Widget JavaScript