Hướng dẫn tích hợp AI Chatbot

Table of Contents

Trang này giúp bạn nhúng chatbot CloverAI vào website của mình chỉ trong vài phút bằng cách sử dụng đoạn mã nhúng (embedding script) được tạo sẵn.

CleanShot 2025-10-21 at 14.26.24@2x.png

1. Mã nhúng (Embedding Script)

Sao chép đoạn mã dưới đây và dán vào trang web của bạn:

<script>
  window.addEventListener("DOMContentLoaded", () => {
    let e = document.createElement("script");
    (e.type = "module"),
      (e.src = "https://cdn.cloveraichat.com/clover-widget.js"),
      (e.onload = () => {
        window.SaasAiChatbotWidget.render("YOUR_CHATBOT_ID");
      }),
      document.body.appendChild(e);
  });
</script>

Lưu ý: Thay YOUR_CHATBOT_ID bằng mã chatbot thật của bạn. Đoạn script này sẽ tải và hiển thị widget chatbot trên trang của bạn.Thay YOUR_CHATBOT_ID bằng mã chatbot thật của bạn. Đoạn script này sẽ tải và hiển thị widget chatbot trên trang của bạn.

2. Các bước tích hợp

Bước 1: Sao chép đoạn mã nhúng

Nhấn Copy ở phần mã nhúng phía trên để sao chép toàn bộ đoạn script.

Bước 2: Dán vào mã HTML của website

Thêm đoạn script vào phần hoặc cuối phần trong tệp HTML của bạn, ví dụ:

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <!-- Nhúng Chatbot tại đây -->
    <script>
      window.addEventListener("DOMContentLoaded", () => {
        let e = document.createElement("script");
        (e.type = "module"),
          (e.src = "https://cdn.cloveraichat.com/clover-widget.js"),
          (e.onload = () => {
            window.SaasAiChatbotWidget.render("YOUR_CHATBOT_ID");
          }),
          document.body.appendChild(e);
      });
    </script>
  </body>
</html>

Bước 3: Kiểm tra hiển thị

Làm mới (refresh) trang web của bạn. Chatbot sẽ xuất hiện ở góc phải dưới màn hình.

3. Tùy chỉnh giao diện

Bạn có thể tùy chỉnh giao diện và hành vi của chatbot thông qua phần Cài đặt giao diện (Appearance Settings) trong trang quản trị chatbot:

  • 🎨 Thay đổi màu sắc, chủ đề
  • 💬 Cấu hình lời chào và gợi ý hội thoại
  • 📍 Điều chỉnh vị trí hiển thị và hành vi của widget
  • 🏷️ Thêm logo và thương hiệu riêng