ChatBox - Dashboard

1 Import CSS Stylesheet

Thêm đoạn code sau vào phần <head> của trang web:

<link rel="stylesheet" href="https://chatbot-ai.nhanshiphang.vn/css/chat.css">

Lưu ý: Bạn có thể bỏ qua bước này vì widget sẽ tự auto-load CSS nếu thiếu. Tuy nhiên import trước sẽ tránh FOUC (nháy giao diện) khi widget vừa load.

2 Cấu hình và load Widget

Thêm đoạn script sau vào cuối phần <body> hoặc trong layout chính của website:

<script>
    window.ChatAIWidgetConfig = {
        apiKey: '<API Key của Tenant (bắt buộc)>',
        userId: '<Mã người dùng để tạo session (bắt buộc)>',
        userName: '<Tên hiển thị (khuyến nghị)>',
        welcomeMessage: '<Câu chào (tùy chọn)>',
        userAvatar: '<Ảnh đại diện user (tùy chọn)>',
        aiAvatar: '<Ảnh đại diện bot (tùy chọn)>'
    };

    (function(){
        var s = document.createElement("script");
        // Launcher sẽ tự detect domain từ script src và tự load AI/Admin widget theo cấu hình server
        s.src = "https://chatbot-ai.nhanshiphang.vn/js/chat-widget-launcher.js";
        s.async = true;
        document.head.appendChild(s);
    })();
</script>

Giải thích các tham số

Tham số	Mô tả	Ví dụ
`apiKey`	API Key của tenant (widget sẽ gửi qua header `X-API-Key` cho tất cả API calls)	`e1b2c3... (lưu khi tạo key)`
`userId`	Mã định danh người dùng hiện tại (dùng để tạo session + lưu lịch sử chat)	`user123` hoặc `@User.Identity?.Name`
`userName`	Tên hiển thị của người dùng	`Nguyễn Văn A`
`welcomeMessage`	Tin nhắn chào mừng khi mở chatbot	`Xin chào! Tôi có thể giúp gì cho bạn?`
`userAvatar`	URL ảnh đại diện người dùng	`https://example.com/avatar.jpg`
`aiAvatar`	URL ảnh đại diện chatbot	`https://example.com/bot.png`

Ví dụ hoàn chỉnh

Dưới đây là ví dụ code hoàn chỉnh với dữ liệu thực tế:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="https://chatbot-ai.nhanshiphang.vn/css/chat.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    
    <!-- Your website content -->
    
    <script>
        window.ChatAIWidgetConfig = {
            apiKey: 'YOUR_API_KEY',
            userId: 'user123',
            userName: 'Nguyễn Văn A',
            welcomeMessage: 'Xin chào! Tôi có thể giúp gì cho bạn?',
            userAvatar: 'https://example.com/avatar.jpg',
            aiAvatar: 'https://example.com/bot.png'
        };

        (function(){
            var s = document.createElement("script");
            s.src = "https://chatbot-ai.nhanshiphang.vn/js/chat-widget-launcher.js";
            s.async = true;
            document.head.appendChild(s);
        })();
    </script>
</body>
</html>

✅ Kết quả

Sau khi thêm code trên, chatbot widget sẽ tự động xuất hiện ở góc phải màn hình. Người dùng có thể click vào để mở và chat với AI.

Lưu ý quan trọng

Bắt buộc phải có apiKey hợp lệ để widget gọi API (header X-API-Key)
apiKey chỉ hiển thị 1 lần khi tạo key, hãy lưu lại an toàn
userId nên là giá trị duy nhất cho mỗi người dùng để theo dõi lịch sử chat
Nếu bạn dùng launcher, không cần cấu hình apiUrl (launcher tự detect theo domain đang host widget)
Widget sẽ tự động điều chỉnh giao diện theo kích thước màn hình (responsive)
Chatbot hỗ trợ cả desktop và mobile

Cần hỗ trợ?

Nếu bạn gặp khó khăn trong quá trình tích hợp, vui lòng liên hệ:

Email: chatbot.nhanshiphang@gmail.com
Website: https://chatbot-ai.nhanshiphang.vn