Về trang chủ Bizfly
Tài liệu kỹ thuật AI Chat
28 Thg 10 2025

Triển khai AI Agent trên Website và Landing Page (kèm code)

Đỗ Minh Đức Đỗ Minh Đức
Chia sẻ bài viết
Chia sẻ trên Facebook Chia sẻ trên Twitter Sao chép link bài viết

Muốn đặt AI Agent ngay trên website/landing page mà không cần framework nặng? Bài này cung cấp bộ code widget chat một file (HTML/JS/CSS) có thể dán thẳng vào site. Bạn cũng sẽ biết cách kết nối API Agent thật, tùy biến giao diện, theo dõi sự kiện và tối ưu hiệu năng.

Vì sao nên nhúng AI Agent trực tiếp vào Website?

Ngày nay, trải nghiệm người dùng trên website không chỉ dừng lại ở việc hiển thị thông tin. Doanh nghiệp cần tạo điểm chạm thông minh để tư vấn, hỗ trợ hoặc thu lead tự động và đó là lúc AI Agent phát huy sức mạnh. Khi được nhúng trực tiếp vào Website hoặc Landing Page, AI Agent có thể:

  • Phản hồi 24/7: Giải đáp thắc mắc và tư vấn khách hàng ngay khi họ đang xem sản phẩm.
  • Tăng tỷ lệ chuyển đổi: Giữ chân khách truy cập bằng hội thoại tự nhiên.
  • Giảm tải đội ngũ CSKH: Tự động xử lý các câu hỏi lặp lại.
  • Kích hoạt quy trình tự động: Tạo lead, gửi email, cập nhật CRM qua API nội bộ.

Nhiều doanh nghiệp hiện nay triển khai BizChatAI là giải pháp AI Agent của Bizfly để gắn trực tiếp chatbot tư vấn sản phẩm, ghi nhận lead và kích hoạt automation ngay trên landing page, giúp tiết kiệm hàng trăm giờ nhân sự mỗi tháng.

Nhãn

Cấu trúc cơ bản của một AI Agent Widget

Một AI Agent widget cơ bản gồm 3 phần:

  1. Frontend (giao diện chat): Gồm nút mở chat, cửa sổ hội thoại, khung nhập nội dung.
  2. Adapter API: Hàm JavaScript gửi tin nhắn đến server và nhận phản hồi.
  3. Backend (API của Agent): Nơi xử lý logic hội thoại, gọi AI model hoặc CRM.

Sơ đồ luồng hoạt động:

Người dùng → Chat Widget → API Agent → Trả lời → Hiển thị trên Widget

Ở phần tiếp theo, bạn sẽ nhận được bộ code hoàn chỉnh cho phần frontend, có thể chèn trực tiếp vào bất kỳ website hoặc landing page nào. 

Bộ code hoàn chỉnh (HTML + CSS + JS)

Dưới đây là phiên bản chat widget tối giản, chạy độc lập, không phụ thuộc framework. Bạn có thể copy toàn bộ và dán vào cuối trang HTML (ngay trước /body). Nếu bạn dùng BizWebsite (dịch vụ thiết kế website từ Bizfly), chỉ cần dán mã này vào phần “Custom HTML” của CMS là widget tự hiển thị.

!doctype html
html lang="vi"

head
meta charset="utf-8" /
meta name="viewport" content="width=device-width,initial-scale=1" /
title AI Agent Widget /title
style
  :root {
    --chat-primary: #1f6feb;
    --chat-bg: #ffffff;
    --chat-border: #e5e7eb;
    --shadow: 0 10px 30px rgba(0,0,0,.12);
    --radius: 14px;
  }
  .ai-launcher {
    position: fixed; right: 20px; bottom: 20px;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--chat-primary); color: #fff;
    display: grid; place-items: center;
    font-size: 20px; cursor: pointer;
    box-shadow: var(--shadow);
  }
  .ai-chat {
    position: fixed; right: 20px; bottom: 90px;
    width: 360px; height: 520px; background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--radius); display: none; flex-direction: column;
    overflow: hidden; box-shadow: var(--shadow);
  }
  .ai-chat.open { display: flex; }
  .ai-header { background: #f9fafb; padding: 10px 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
  .ai-messages { flex: 1; overflow-y: auto; padding: 10px; }
  .ai-msg { margin: 8px 0; padding: 8px 12px; border-radius: 12px; max-width: 80%; }
  .from-user { background: #dbeafe; margin-left: auto; }
  .from-bot { background: #f3f4f6; margin-right: auto; }
  .ai-input { display: flex; border-top: 1px solid var(--chat-border); }
  .ai-textarea { flex: 1; padding: 8px; border: none; resize: none; }
  .ai-send { background: var(--chat-primary); color: #fff; border: none; padding: 10px 16px; cursor: pointer; border-radius: 0 0 14px 0; }
/style
/head
body
button class="ai-launcher"

BizChatAI - Giải pháp AI Chat Agent tốt nhất cho doanh nghiệp
7000+ doanh nghiệp tin dùng, hỗ trợ tư vấn, bán hàng, CSKH

Tư vấn miễn phí Tìm hiểu thêm

Tài liệu kỹ thuật AI Chat
Chia sẻ bài viết
Chia sẻ trên Facebook Chia sẻ trên Twitter Sao chép link bài viết
Đỗ Minh Đức
Tác giả
Đỗ Minh Đức

Với gần 20 năm kinh nghiệm trong ngành công nghệ, Đỗ Minh Đức hiện là Giám đốc Sản phẩm Bizfly Martech tại VCCorp. Anh được biết đến là một trong bốn người đặt nền móng cho BizChatAI, giải pháp ứng dụng trí tuệ nhân tạo để chăm sóc khách hàng tự động đa kênh.

Anh tập trung phát triển BizChatAI như một "trợ lý ảo" cho doanh nghiệp, giúp tự động hóa việc tương tác và CSKH. Công nghệ này đang thay đổi mạnh mẽ cách doanh nghiệp tiếp cận khách hàng, từ việc gửi tin nhắn, quà tri ân tự động đến ứng dụng hiệu quả cho các chuỗi bán lẻ và nhà hàng... Qua các bài viết của mình, anh chia sẻ sâu hơn về những lợi ích và cách thức hoạt động của chatbot trong kinh doanh.

Giải pháp BizChatAI

Trợ lý AI giúp bạn bán hàng tự động, tư vấn như người thật và hỗ trợ đa ngôn ngữ chỉ trong vòng vài phút triển khai!