Cách thêm chatbot AI vào trang web (không cần viết mã)

Bạn có thể thêm chatbot AI vào trang web bằng cách cung cấp kiến thức doanh nghiệp cho Agent, cấu hình phản hồi và cài tiện ích trò chuyện qua plugin hoặc đoạn mã được cung cấp. Chatbot trang web của Quickchat AI tập trung kiến thức, cài đặt cuộc trò chuyện và Inbox của đội ngũ tại một nơi. Khách truy cập đặt câu hỏi ngay trên trang web mà không cần tạo tài khoản.

Hướng dẫn này xây dựng chatbot cho Kestrel Kitchens, một doanh nghiệp thiết kế nhà bếp giả định. Khách truy cập hỏi thời gian cải tạo, tìm hiểu chi phí dự kiến cho căn bếp 3 x 4 mét, rồi yêu cầu báo giá. Agent trả lời từ thông tin của công ty, thu thập chi tiết dự án và để nhà thiết kế tiếp tục cuộc trò chuyện.

Thiết lập cốt lõi không cần lập trình. Làm theo phần kiến thức và chỉ dẫn, thu thập thông tin khách hàng tiềm năng và chuyển cho nhân viên, rồi cài widget. Một API Action tùy chọn gửi các yêu cầu đã đủ thông tin sang hệ thống khác.

Tải bộ thiết lập Kestrel Kitchens để lấy trang web mẫu, kiến thức, Main Prompt, cài đặt và tin nhắn kiểm thử. Đây là các tệp có thể chỉnh sửa để làm theo trong dashboard, không phải tệp nhập Agent bằng một lần nhấp.

Ảnh chụp màn hình và các nội dung có thể sao chép trong bộ tài liệu, prompt và cấu hình được giữ bằng tiếng Anh để bạn tái tạo ví dụ đã thử nghiệm.

Chatbot trang web sẽ làm gì?

Chatbot trả lời câu hỏi từ nội dung của bạn, lưu thông tin để liên hệ lại theo yêu cầu và chuyển cuộc trò chuyện cho đội ngũ khi cần người xử lý.

Mỗi kết quả cần bằng chứng khác nhau. Khoảng giá chính xác đến từ Knowledge Base. Yêu cầu báo giá cần thông tin liên hệ và dự án trong Inbox. Việc chuyển cho nhân viên cần một người nhận phụ trách và gửi phản hồi đến được khách truy cập.

Hành trình của khách truy cập trong ví dụ. Yêu cầu báo giá ghi nhận sự quan tâm; nhà thiết kế vẫn phải xác nhận giá và lịch còn trống.

Cần chuẩn bị gì trước khi thêm chatbot?

Bạn cần tài khoản Quickchat AI, thông tin doanh nghiệp có thể xác minh và quyền truy cập cài đặt plugin hoặc mã tùy chỉnh của trang web.

1. Tạo tài khoản Quickchat AI và hoàn thành các bước đăng ký. Dùng Agent riêng cho bài thực hành này để thông tin mẫu không ảnh hưởng đến dịch vụ khách hàng hiện có.
2. Chuẩn bị các trang dịch vụ, FAQ và chính sách, hoặc dùng kiến thức giả định trong bộ tài liệu. Thay giá và khu vực phục vụ giả định trước khi triển khai cho doanh nghiệp thật.
3. Kiểm tra gói trang web có cho phép phương thức cài đặt tương ứng hay không. WordPress cần quyền dùng plugin; một số nền tảng dựng web yêu cầu gói trả phí để dùng mã tùy chỉnh trên toàn trang.
4. Sắp xếp một người theo dõi Inbox kiểm thử khi bạn thử chuyển cho nhân viên. Chuẩn bị trình duyệt máy tính và điện thoại để kiểm tra trang web ở bước cuối.

Free dành cho việc học cá nhân, phi thương mại. Gói Free gồm 50 tín dụng AI mỗi tháng. Triển khai cho doanh nghiệp cần gói thương mại, và kiểm thử dùng cùng hạn mức phản hồi như các cuộc trò chuyện AI khác. Phí nền tảng dựng web và API bên ngoài được tính riêng. Phần chi phí phân biệt các khoản này.

Bước 1: Huấn luyện chatbot từ nội dung trang web như thế nào?

Thêm các trang chứa câu trả lời của doanh nghiệp vào Knowledge Base, rồi kiểm tra nội dung đã nhập trước khi thử. Đây là tài liệu tham chiếu để Agent trả lời.

Tạo Agent để thực hành

1. Trên màn hình thiết lập đầu tiên, chọn Set up manually. Từ dashboard hiện có, dùng dấu + bên cạnh AI Agent (Add new AI Agent) để tạo Agent riêng, rồi chọn Set up manually.
2. Trong Identity, nhập Kestrel Kitchens ở Name your AI Agent. Dán nội dung main-prompt.txt từ bộ tài liệu vào Describe what you want your agent to do. Nội dung này trở thành Main Prompt của Agent, được giải thích ở Bước 2. Chọn Next.
3. Tạm để trống Knowledge Base và chọn Next. Đi qua External apps mà không chọn kết nối nào. Trong Deployment, chọn Chat widget, rồi Next.
4. Ở Choose your plan, dùng Skip for now để tiếp tục bài thực hành cá nhân, hoặc chọn gói thương mại phù hợp cho doanh nghiệp. Hoàn thành hoặc đóng đề nghị tùy chọn xuất hiện sau đó.
5. Trong dashboard, xác nhận tên Agent ở Identity, rồi mở Knowledge Base. Chọn dùng các trang của bạn hoặc bài viết mẫu được cung cấp bên dưới.

Nhập các trang của bạn

1. Trong Knowledge Base, chọn Add Website. Chọn một trang đơn lẻ hoặc tùy chọn nhập trang web, tùy lượng nội dung cần dùng.
2. Nhập URL công khai. Khi nhập trang web, xem lại các trang được tìm thấy và chọn những trang dịch vụ, giá, quy trình và FAQ nên dùng làm cơ sở trả lời.
3. Kiểm tra văn bản đã nhập. Xác nhận giá dùng đúng tiền tệ và cách tính thuế, đồng thời bảo đảm chương trình khuyến mãi cũ hoặc trang không liên quan không trở thành nguồn.
4. Đợi xử lý xong. Áp dụng hoặc xuất bản các thay đổi kiến thức đang chờ mà dashboard hiển thị trước khi kiểm thử widget đã cài.

Bắt đầu với vài trang rõ ràng. Trang web có thể hiển thị thẻ giá hấp dẫn nhưng đặt điều kiện ở nơi khác; Agent cần cả hai. Chỉ nhập trang chủ có thể bỏ sót điều kiện lắp đặt, giới hạn địa lý hoặc chính sách hoàn tiền cần thiết để câu trả lời hữu ích.

Dùng nguồn Kestrel Kitchens

Để tái tạo ví dụ mà chưa cần lưu trữ trang web, thêm trực tiếp các thông tin sau:

1. Trong Knowledge Base, chọn Add Article. Thao tác này tạo bài viết Untitled và mở Edit Article.
2. Nhập Kestrel Kitchens: services, prices and process vào Title. Dưới Content, chọn Plain Text và dán nội dung knowledge.txt từ bộ tài liệu.
3. Chọn Save và đợi bài viết chuyển sang Ready. Xác nhận tiêu đề xuất hiện trong danh sách Knowledge Base.

Bài viết đã lưu giữ nguyên các điều kiện về giá và thời gian. Thông tin giả định khớp với trang web mẫu.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

Nguồn cố ý không đề cập đến hỗ trợ tài chính. Nhờ đó, bạn có thể kiểm tra cách Agent xử lý một khoảng trống thông tin thật sự. Với trang web thật, giữ các trang nguồn luôn cập nhật và dùng cài đặt làm mới được hỗ trợ nếu có; hướng dẫn Knowledge Base giải thích cách tổ chức và kiểm thử các nguồn này.

Bước 2: Chatbot nên nói gì và không được hứa điều gì?

Dùng Main Prompt để xác định cách Agent áp dụng kiến thức: trả lời trước, giữ phản hồi hữu ích và để đội ngũ quyết định những việc như báo giá chính thức.

Với Kestrel, kích thước phòng cho biết quy mô dự án. Chúng không xác định tủ bếp, thiết bị hay công việc xây dựng. Agent nên giải thích khoảng giá dự trù £18,000 đến £45,000 đã gồm VAT trong nguồn, không tính giá chính xác hơn từ diện tích sàn.

Các mức giá này là dữ liệu giả định cho hướng dẫn. Bài học là giữ rõ ranh giới giữa thông tin nguồn và quyết định đội ngũ của bạn vẫn phải đưa ra.

1. Trong Identity, chọn Edit trên thẻ Main Prompt.
2. Dán toàn bộ prompt bên dưới. Đợi lưu xong, rồi mở lại trình chỉnh sửa để xác nhận văn bản đã lưu.
3. Giữ thông tin doanh nghiệp trong Knowledge Base. Dùng prompt cho phong cách phản hồi, cách thu thập thông tin và những quyết định cần con người.

Main Prompt là trường chỉ dẫn. Toàn bộ văn bản bên dưới và trong bộ tài liệu là phiên bản để sao chép.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

Mở AI Preview và hỏi How long does a full kitchen renovation take?. Trong bài kiểm thử đối chứng cục bộ, Agent trả lời 2 đến 3 tuần để khảo sát và thiết kế, rồi 4 đến 8 tuần để lắp đặt sau khi có đủ vật liệu. Cả thời gian và điều kiện đi kèm đều quan trọng.

Bắt đầu cuộc trò chuyện mới và hỏi Do you offer financing?. Phản hồi đúng sẽ thừa nhận nguồn chưa xác nhận có dịch vụ này và chuyển câu hỏi cho nhà thiết kế. Thêm lời lẽ chắc chắn hơn vào prompt không thể bổ sung thông tin doanh nghiệp đang thiếu.

Bước 3: Thu thập yêu cầu báo giá trong cuộc trò chuyện như thế nào?

Smart Data Gathering hỏi các thông tin đã chọn trong cuộc trò chuyện và lưu những gì khách truy cập cung cấp. Với yêu cầu báo giá, chỉ thu thập những gì nhà thiết kế cần để liên hệ lại.

1. Mở Actions & MCPs, bật Smart Data Gathering và chọn Edit Action. Đặt Name là Quote enquiries và Description là Capture contact and project details for a kitchen design enquiry. Tên đã lưu sẽ trở thành tiêu đề thẻ.
2. Trong Data to collect, thêm các hàng bên dưới. Giữ nguyên tên Data point bằng tiếng Anh khi tái tạo ví dụ; các tên trường liên hệ có ánh xạ riêng tới trường khách truy cập trong Inbox.
3. Đặt Reason for collecting information là So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Đặt When to ask for data thành After exchanging a few messages, và How to ask for data thành Subtle.
5. Lưu Action. Trong AI Preview, hỏi một câu hữu ích về dịch vụ trước khi yêu cầu báo giá, rồi kiểm tra thông tin đã lưu trong Inbox.

Các câu hỏi mô tả thông tin cần thu thập. Cài đặt thời điểm và phong cách định hướng lúc hỏi; vẫn cần thử cuộc trò chuyện thực tế.

Tên, email, mã bưu chính và loại dự án là thông tin bắt buộc cho một yêu cầu đủ thông tin trong ví dụ này. Thời gian dự kiến là tùy chọn, như Main Prompt đã giải thích. Yêu cầu nghiệp vụ này tách biệt với cài đặt thu thập qua hội thoại; Bước 8 kiểm tra các trường bắt buộc trước khi gửi yêu cầu đến CRM.

Agent nên trả lời câu hỏi chung về chi phí mà không buộc khách phải cung cấp email để được trả lời. Khách cũng có thể từ chối cung cấp thông tin. Dùng I am only researching. I do not want to leave contact details. để kiểm tra cuộc trò chuyện vẫn hữu ích và không lặp lại yêu cầu cung cấp thông tin.

Thông tin thu thập được lưu ở đâu?

Mở cuộc trò chuyện trong Inbox. Thông tin liên hệ tiêu chuẩn xuất hiện trong các trường khách truy cập; các giá trị khác vẫn gắn với cuộc trò chuyện và có thể xuất qua Export Gathered Data.

Trong Where to send data, Email new leads thông báo cho mọi quản trị viên của Agent khi lần đầu thu thập được email hoặc số điện thoại. Chỉ có tên thì không gửi email. Preview và Simulation không gửi các thông báo này, nên hãy kiểm tra hộp thư quản trị viên của bạn bằng một bài thử có kiểm soát trên widget đã cài trước khi dựa vào việc gửi email. Hướng dẫn cục bộ này giữ việc gửi email ra bên ngoài ở trạng thái tắt.

Tài liệu Smart Data Gathering mô tả việc thu thập, thông báo và xuất dữ liệu. Với trang web của bạn, hãy giải thích lý do hỏi thông tin và liên kết thông báo quyền riêng tư trong widget. Hướng dẫn bảo vệ dữ liệu chatbot giúp bạn xem xét luồng dữ liệu rộng hơn.

Bước 4: Cho phép nhân viên tiếp quản cuộc trò chuyện như thế nào?

Human Handoff chuyển cuộc trò chuyện cho đội ngũ; sau đó một người tiếp quản trong Inbox và trả lời chính khách truy cập đó.

Chuẩn bị quy trình chuyển cho nhân viên trước khi xuất bản widget. Người muốn gặp nhà thiết kế không cần hoàn tất biểu mẫu báo giá trước, và Agent không nên ngụ ý có người trực ngoài giờ đã bố trí.

1. Trong Actions & MCPs, bật Human Handoff và mở Edit Action.
2. Giữ bật các quy tắc tiêu chuẩn Media Message, User Frustration, Customer Support Suggestion và Lack Of Knowledge; để Irrelevant Advice tắt. Main Prompt đã giải thích khi nào nên đề nghị gặp nhà thiết kế. Ví dụ đã thử dùng các quy tắc tiêu chuẩn này, không thêm quy tắc tùy chỉnh.
3. Cấu hình tin nhắn và giờ làm việc bên dưới, rồi lưu. Giữ Email notifications tắt trong bài thực hành và kiểm tra việc chuyển trực tiếp trong Inbox.

Dùng khung giờ thực sự có người theo dõi Inbox. Lịch giả định không phải lời hứa trả lời ngay.

Trong giờ có nhân viên trực, hỏi Can I speak to a designer? từ trang web. Hoàn tất bước xác nhận chuyển nếu Agent yêu cầu. Trong Inbox, mở cuộc trò chuyện và chọn Assign to me khi chưa có người phụ trách, hoặc Take over khi nút đó xuất hiện. Gửi phản hồi của nhân viên và xác nhận khách truy cập nhận được. Dùng Reassign to AI khi muốn AI tiếp tục.

Kiểm tra người phụ trách và phản hồi nhân viên đã đến nơi, không chỉ lời đề nghị chuyển của Agent.

Lặp lại trong cuộc trò chuyện mới ngoài giờ đã cấu hình. Agent nên giải thích giờ làm việc và đề nghị cách liên hệ lại đã nêu. Nếu tạm thay đổi lịch để kiểm tra, hãy khôi phục lịch thật sau đó. Tài liệu Human Handoff giải thích các cài đặt và quy trình trong Inbox.

Hướng dẫn chuyển cuộc trò chuyện từ chatbot cho nhân viên có các bước kiểm tra riêng để xác định bên đang phụ trách hội thoại, kiểm tra việc chuyển lại cho AI và phát hiện lỗi ngoài giờ làm việc.

Bước 5: Làm cho widget phù hợp với trang web như thế nào?

Đặt giao diện và văn bản cố định trong Channels → Your Website. Lời chào nên đủ cụ thể để khách truy cập hiểu họ có thể hỏi gì.

Giao diện (Appearance)

1. Mở Appearance. Với Kestrel, chọn giao diện Custom có nền trắng, phần đầu và màu nhấn xanh lá đậm (#315448), chữ phần đầu màu trắng. Giữ cỡ chữ mặc định và các nút điều khiển bo tròn.
2. Trong Branding → AI Agent Avatar, nhấp biểu tượng tải lên của ảnh đại diện, chọn website/kestrel-avatar.png từ bộ tài liệu và chọn Upload trong hộp thoại cắt ảnh.
3. Đặt Widget window max width là 400px và Widget window max height là 520px. Chọn Small cho kích thước nút mở, đặt bên phải và dùng Ask about your kitchen làm nhãn. Nhãn dùng được với nút mở cỡ nhỏ. Xem trước vị trí so với banner cookie hoặc các nút nổi khác trên trang.
4. Giữ Auto-open Widget tắt. Mở widget mỗi khi tải trang sẽ làm gián đoạn việc duyệt web, nhất là trên điện thoại.

Kiểm tra bản xem trước khi chọn màu. Vẫn cần kiểm thử trang web thật vì nút mở chia sẻ không gian với các nút điều khiển trên trang.

Nội dung văn bản (Text Content)

Mở Text Content và dùng các giá trị sau:

Các câu gợi ý nên mở đầu những tác vụ hữu ích. Thông báo giới hạn cho khách biết quyết định nào vẫn cần nhà thiết kế.

Agent có thể trả lời bằng ngôn ngữ của khách truy cập. Dịch lời chào cố định và nhãn widget là cài đặt riêng trong Other languages, có trên các gói trả phí. Với trang web đa ngôn ngữ, kiểm thử cả phản hồi và văn bản giao diện cố định; hướng dẫn chatbot đa ngôn ngữ giải thích sự khác biệt này.

Thay đổi giao diện có thể mất vài phút để đến các phiên khách truy cập đang dùng bộ nhớ đệm. Tải lại trước khi kết luận thay đổi đã lưu không có tác dụng. Hide Quickchat AI Branding yêu cầu gói Professional trở lên; hướng dẫn nhãn trắng trình bày các vị trí khác cần kiểm tra.

Bước 6: Cài chatbot trên trang web như thế nào?

Cài Widget trong bố cục dùng chung của trang web hoặc dùng tích hợp nền tảng được hỗ trợ. Widget nổi cần chạy trong trang mà khách đang duyệt.

1. Mở Channels → Your Website → Install.
2. Bật Widget & Embed access cho widget công khai.
3. Chọn phương thức cài đặt cho trang web và sao chép đoạn mã hoặc Scenario ID hiển thị cho Agent này.
4. Xuất bản thay đổi, mở trang công khai và hỏi một câu mà bạn biết Knowledge Base có câu trả lời.

Sao chép từ màn hình Install của Agent này. Scenario ID là mã định danh widget công khai, không phải khóa API riêng tư.

Mọi trang web: dán đoạn mã Widget trước thẻ đóng body

Chọn Install manually with code và sao chép đoạn mã Widget. Bộ tải hiện tại có dạng sau:

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

Thay YOUR_SCENARIO_ID bằng giá trị từ Install. Dán toàn bộ đoạn mã một lần, ngay trước </body> trong bố cục dùng chung, hoặc dùng trường footer áp dụng toàn trang của nền tảng dựng web. Bộ tải này chèn script vào body của trang, nên đặt trong head trước khi body tồn tại có thể khiến nó không tải được.

Vị trí rất quan trọng. Khối HTML dựa trên iframe là một trang riêng và không phù hợp với Widget nổi này.

Tùy chọn Embed riêng đặt khung trò chuyện trong một vùng chứa của trang. Dùng đoạn mã được tạo cho tùy chọn này nếu muốn một phần trò chuyện nằm trong nội dung trang. Khối HTML chèn mã trực tiếp vào trang có thể hỗ trợ cách này; khối của nền tảng dựng web cô lập mã trong iframe là trường hợp khác. Xem tài liệu kênh Website.

WordPress: cài plugin chính thức

1. Trong WordPress, mở Plugins → Add New, tìm Quickchat AI Agent, rồi chọn Install Now và Activate.
2. Mở Settings → Quickchat AI Agent.
3. Dán Scenario ID từ màn hình Install của Quickchat AI và chọn Save Changes.
4. Mở trang công khai và kiểm tra widget. Dùng plugin hoặc đoạn mã thủ công để tránh cài bộ tải hai lần.

Bạn cần bản cài đặt và gói WordPress cho phép plugin. Hướng dẫn chatbot WordPress trình bày giao diện plugin và các bước kiểm tra riêng cho WordPress.

Squarespace: dùng chèn mã chân trang (Footer Code Injection)

1. Mở bảng Code Injection của trang web. Dùng tìm kiếm cài đặt trong dashboard nếu thanh điều hướng trên tài khoản của bạn khác.
2. Dán toàn bộ đoạn mã Widget vào Footer và lưu.
3. Mở trang đã xuất bản trong tab trình duyệt riêng và kiểm thử một câu trả lời.

Squarespace cung cấp Code Injection trên các gói Core, Plus, Advanced và một số gói cũ. Chèn mã chân trang đặt mã trước </body> trên toàn trang web. Dùng vị trí này cho widget nổi; khối iframe ở cấp trang không tương đương. Mã tùy chỉnh này không áp dụng cho trang thanh toán Squarespace.

Wix: dùng Custom Code tại vị trí Body - end

1. Trong dashboard của trang web, mở Settings → Custom Code, rồi + Add Custom Code.
2. Dán đoạn mã Widget và đặt tên Quickchat AI widget.
3. Áp dụng cho All pages và chọn Body - end, rồi Apply.
4. Kiểm thử trang đã xuất bản, bao gồm việc chuyển sang trang khác.

Wix yêu cầu trang web đã xuất bản có tên miền được kết nối để dùng mã tùy chỉnh. Dùng cài đặt Custom Code toàn trang cho widget nổi này.

Webflow: dùng mã chân trang và xuất bản

1. Mở Site settings → Custom code.
2. Dán đoạn mã Widget vào Footer code và chọn Save changes.
3. Chọn Publish để xuất bản lên tên miền mong muốn, rồi kiểm thử URL đã xuất bản đó.

Cài đặt mã tùy chỉnh của Webflow yêu cầu gói Workspace trả phí đủ điều kiện hoặc gói Site đang hoạt động. Chỉ lưu cài đặt chưa phải là xuất bản.

Shopify: chọn đoạn mã của Agent hiện có hoặc ứng dụng Shopify

Với Agent Kestrel đã tạo, thêm đoạn mã Widget của nó ngay trước </body> trong Online Store → Themes → Edit code → layout/theme.liquid, rồi lưu và kiểm tra cửa hàng. Sao lưu giao diện trước khi chỉnh sửa, và kiểm tra lại cài đặt sau khi đổi giao diện. Cách này hiển thị Agent bạn đã chọn; nó không cấu hình Action sản phẩm hay đơn hàng.

Với Agent chuyên cho cửa hàng, thiết lập ứng dụng Shopify của Quickchat AI kết nối cửa hàng qua quy trình khởi tạo riêng. Sau khi kết nối, dùng Enable Widget in Shopify Theme Editor, hoặc mở Online Store → Themes → Edit theme → App embeds. Bật Quickchat AI Widget và lưu. Tài liệu app embed của Shopify giải thích các điều khiển giao diện; bật lại app embed khi đổi giao diện được xuất bản.

Các đường dẫn cài đặt trên đã được đối chiếu với tài liệu chính thức. Ảnh chụp minh họa cho thấy trang web mẫu Kestrel và widget cục bộ thật; chúng không phải ảnh chụp tài khoản đã đăng nhập trên từng nền tảng dựng web.

Kiểm tra đoạn mã trước khi tìm lỗi Agent

Các kiểm tra tùy chọn này hoạt động trên những giá trị bạn cung cấp:

• Kiểm tra đoạn mã Widget. Đối chiếu mã đã dán với Scenario ID được cung cấp. Công cụ không truy xuất trang web của bạn.
• So sánh các phương thức triển khai. Đối chiếu các kênh, quyền truy cập trang web và tính năng cần thiết mà bạn khai báo với những tùy chọn thiết lập Quickchat AI. Công cụ không kiểm tra trang web hay tài khoản của bạn.

Trong trình duyệt tương thích, các kiểm tra này cũng có sẵn dưới dạng công cụ trang web. Các liên kết mở biểu mẫu thông thường.

Bước 7: Kiểm thử chatbot trước khi khách truy cập sử dụng như thế nào?

Kiểm thử riêng câu trả lời, dữ liệu đã lưu và phản hồi đã đến nơi. AI Preview và Simulation Testing giúp đánh giá hành vi; trang web đã xuất bản xác minh khách truy cập dùng được widget đã cài.

Chạy các câu hỏi độc lập trong Simulation Testing

Mở Testing → Create Dataset, đặt tên Kestrel Kitchens: website launch checks và chọn Paste messages. Thêm các câu hỏi về thời gian, giá và hỗ trợ tài chính bên dưới, ngăn cách các câu hỏi bằng một dòng chứa ---. Chỉ xuống dòng sẽ giữ văn bản trong cùng một tin nhắn kiểm thử. Đặt Evaluation criteria để kiểm tra thông tin và phản hồi ngắn gọn, rồi chọn Run → Start Run. Bộ tài liệu chứa đúng các tin nhắn và tiêu chí.

Mỗi hàng trong bộ dữ liệu bắt đầu cuộc trò chuyện riêng. Dùng Simulation cho các câu hỏi độc lập này; thực hiện bài thử báo giá nhiều lượt và nhân viên tiếp quản trong cùng một cuộc trò chuyện AI Preview hoặc trên trang web. Kiểm tra riêng nhật ký Action và bên nhận vì bộ đánh giá bản ghi hội thoại không thể xác minh việc gửi ra bên ngoài.

Mở một lần chạy hoàn tất và kiểm tra phản hồi. Câu trả lời về giá này giữ nguyên khoảng giá dự trù; điểm phản hồi không chứng minh đã gửi đến hệ thống khác.

Dùng cuộc trò chuyện mới giữa các trường hợp độc lập. Tải lại trang có thể tiếp tục cuộc trò chuyện hiện có, nên dùng nút tạo cuộc trò chuyện mới của widget khi cần bài thử mới.

Kiểm tra trang web trên điện thoại

Trên màn hình dưới 768 pixel CSS, widget đang mở dùng bố cục toàn màn hình. Kiểm tra bạn có thể mở widget, nhập khi bàn phím hiển thị, cuộn cuộc trò chuyện và đóng để trở lại trang web.

Kết thúc bằng phản hồi của người thật từ Inbox. Câu trả lời AI tốt không chứng minh luồng hỗ trợ của nhân viên hoạt động. Lặp lại một nhóm nhỏ các kiểm tra này sau khi đổi nguồn, prompt, Action hoặc giao diện trang web.

Bước 8: Gửi yêu cầu đủ thông tin đến CRM như thế nào?

Một API Action tùy chọn có thể gửi các trường đã lưu đến bên nhận HTTP sau khi cuộc trò chuyện có đủ thông tin bắt buộc. Chatbot trang web cốt lõi đã dùng được mà không cần phần mở rộng này.

Cần phân biệt đã thu thập thông tin liên hệ với yêu cầu này đã đủ thông tin. Quickchat AI đặt lead_captured khi mới thu thập một trường liên hệ tiêu chuẩn, bao gồm cả tên. Chỉ cờ này chưa xác nhận đã có email, mã bưu chính hoặc loại dự án.

Nền tảng kiểm tra mọi điều kiện. Mô hình thu thập thông tin; các điều kiện xác định khi nào yêu cầu đủ điều kiện chạy.

Chuẩn bị bên nhận

Dùng endpoint CRM hoặc tự động hóa do bạn kiểm soát, chấp nhận nội dung JSON bên dưới. Bộ tài liệu có bên nhận minh họa nhỏ chạy cục bộ cho người muốn kiểm tra yêu cầu trước khi kết nối CRM. Chỉ dẫn thiết lập của nó tạo token riêng và giải thích cách cung cấp endpoint HTTPS tạm thời. Chỉ gửi dữ liệu kiểm thử giả định đến bên nhận minh họa.

Nếu muốn tích hợp được quản lý sẵn, làm theo hướng dẫn báo cáo Google Sheets hoặc hướng dẫn CRM tùy chỉnh. Không bật hai quy trình cùng tạo một khách hàng tiềm năng.

Cấu hình một API Action tự động

1. Mở Actions & MCPs → Custom Actions → Add Action → API Action. Chọn Create manually nếu trình tạo từ mô tả mở ra.
2. Đặt API Action Name là Send quote enquiry.
3. Để trống What to ask the user first. Action này đọc các trường Smart Data Gathering đã lưu; nó không yêu cầu mô hình điền bộ tham số thứ hai.
4. Trong API Endpoint, chọn POST và nhập URL HTTPS /enquiries của bên nhận.
5. Thêm header, nội dung và điều kiện bên dưới, rồi lưu và kích hoạt Action.

Chỉ nhập token trong cài đặt header của Action. Không đưa token vào prompt, đoạn mã trang web hay cuộc trò chuyện với khách truy cập. README của bên nhận minh họa giải thích cách tạo token; với tích hợp thật, dùng cơ chế xác thực được tài liệu CRM quy định.

Trong tab Body, chọn JSON và nhập:

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Dùng Add AI Data để chèn các giá trị tích hợp sẵn và metadata tương ứng. conversation_id định danh cuộc trò chuyện. Các giá trị khác đến từ trường đã lưu; tên trường liên hệ tiếng Anh ánh xạ thành visitor_name và visitor_email, còn Project type trở thành project_type. Tài liệu biến giải thích các ánh xạ này.

Trong When to run, chọn When metadata matches. Trong Run when, thêm đủ năm hàng; các điều kiện metadata được kết hợp bằng AND:

Với các trường văn bản này, is true loại cả giá trị trống lẫn văn bản biểu thị giá trị sai. exists chỉ kiểm tra khóa có tồn tại hay không; chuỗi trống đã lưu vẫn có thể vượt qua điều kiện. Các bài thử bên dưới cho thấy vì sao cần điều kiện chặt hơn. Điều này kiểm tra đã có văn bản dùng được, không xác minh độc lập danh tính khách hay thông tin bất động sản.

Dùng API Action Description sau:

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

Hai điều kiện đầu trong năm điều kiện đã lưu. Thêm mọi hàng trong bảng; When metadata matches kiểm tra chúng sau lượt AI mà không cần Agent chọn Action.

Action được thử một lần mỗi cuộc trò chuyện khi tất cả điều kiện khớp. Nó không chạy lại khi thời gian dự kiến tùy chọn được cung cấp, và yêu cầu đã gửi nhưng thất bại không được tự động thử lại trong cuộc trò chuyện đó. Giữ thời gian dự kiến trong Inbox cho nhà thiết kế, hoặc xây dựng tích hợp tạo và cập nhật rõ ràng nếu CRM cần thay đổi về sau.

Yêu cầu chạy sau lượt AI, và phản hồi của nó không được chèn vào cuộc trò chuyện. Vì vậy Main Prompt chỉ ghi nhận thông tin khách đã cung cấp mà không khẳng định CRM đã chấp nhận. Xác minh việc gửi trong nhật ký Action và bên nhận. Tài liệu Action tự động mô tả hành vi thực thi này.

Kiểm thử dữ liệu chưa đủ, rồi yêu cầu đủ thông tin

Phiên bản đầu dùng exists cho các trường văn bản bắt buộc. Sam cung cấp tên, rồi email trong tin nhắn tiếp theo. Smart Data Gathering đã tạo giá trị trống cho mã bưu chính và loại dự án, nên các khóa đó tồn tại và Action gửi yêu cầu chưa đủ thông tin. Điều này cũng dùng hết lần thử duy nhất của cuộc trò chuyện.

Cách sửa là đổi bốn điều kiện trường văn bản thành is true, giữ nguyên phần thiết lập còn lại. Lặp lại bài thử trong cuộc trò chuyện mới, chỉ cung cấp email ở lượt thứ hai. Action phải đợi các chi tiết dự án còn thiếu.

Đây là một cuộc trò chuyện được quan sát, không phải tỷ lệ thành công trong môi trường sản xuất. Tái tạo bằng cuộc trò chuyện mới, kiểm tra các trường đã lưu sau mỗi lượt và kiểm tra yêu cầu tại endpoint của bạn.

Lần gọi Action thực tế trả về HTTP 201. Mở chi tiết để kiểm tra yêu cầu; bản ghi đã lưu bên dưới cho thấy bên nhận đã lưu gì.

Một bản ghi thực tế đã lưu từ bên nhận minh họa có xác thực. Đây là yêu cầu tìm hiểu, không phải báo giá hay lịch hẹn đã xác nhận.

Phần minh họa dùng bên nhận cục bộ và ghi nhận việc gửi HTTP thực tế. Agent Quickchat AI được lưu trữ trên dịch vụ cần endpoint HTTPS có thể truy cập công khai; dịch vụ không truy cập được URL localhost trên máy tính của bạn.

Nếu không có gì đến, kiểm tra View logs trên Action và metadata đã lưu của cuộc trò chuyện. Thiếu giá trị, Action bị tắt và lỗi HTTP cần cách sửa khác nhau. Sửa cấu hình rồi dùng cuộc trò chuyện mới để thử lại kích hoạt tự động; yêu cầu cùng cuộc trò chuyện thử lại không đặt lại lần thử một lần mỗi cuộc trò chuyện.

Vì sao chatbot không xuất hiện hoặc hiển thị cài đặt cũ?

Kiểm tra trang đã xuất bản, vị trí cài đặt và quyền truy cập Agent trước khi đổi prompt. Lỗi tải trong trình duyệt khác với lỗi chất lượng câu trả lời.

Nếu trình duyệt báo tài nguyên bị chặn, kiểm tra chính xác lỗi Content Security Policy hoặc công cụ chặn. Tránh tắt toàn bộ biện pháp bảo vệ của trang web. Thử trang công khai qua HTTPS và dùng tài liệu kênh để thiết lập theo yêu cầu.

Chatbot trang web có chi phí bao nhiêu?

Phí đăng ký và hạn mức sử dụng chi trả cho dịch vụ AI; gói trang web và tích hợp tùy chọn là các khoản riêng.

Một tín dụng AI không tương đương một cuộc trò chuyện. Cuộc trò chuyện có thể gồm nhiều phản hồi AI, và các lựa chọn mô hình có thể có chi phí tín dụng khác nhau. Tính cả Preview và Simulation vào ngân sách kiểm thử. Dùng giá và hạn mức hiện hành cùng hướng dẫn chi phí chatbot để ước tính theo lưu lượng của bạn.

ChatGPT hoặc Claude có thể giúp thiết lập chatbot không?

Kết nối quản lý tài khoản Quickchat AI cho phép trợ lý tương thích cấu hình các cài đặt Agent được hỗ trợ và chuẩn bị bài thử từ các tài liệu này.

Kết nối tài khoản của bạn qua Quickchat AI trong ChatGPT hoặc Quickchat AI trong Claude, theo hướng dẫn Manage with AI. Các công cụ được hỗ trợ bao gồm kiến thức, Main Prompt, câu gợi ý bắt đầu cuộc trò chuyện, Human Handoff, HTTP Actions, kiểm thử và đoạn mã triển khai.

Hoàn tất Smart Data Gathering và các cài đặt Appearance chi tiết của widget trong dashboard. Bạn cũng cần cấp quyền cho tài khoản bên ngoài và cài đoạn mã trong cài đặt trang web. Kết nối tài khoản dùng để quản lý Agent; nó tách biệt với việc cung cấp Agent dưới dạng công cụ MCP.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

Câu hỏi thường gặp

Thêm chatbot AI vào trang web như thế nào?

Tạo Agent trong Quickchat AI, thêm kiến thức doanh nghiệp, cấu hình Main Prompt, Smart Data Gathering và Human Handoff, rồi cài Widget bằng plugin hoặc đoạn mã được cung cấp. Kiểm thử trên trang đã xuất bản: câu trả lời dựa trên nguồn, thông tin liên hệ đã thu thập và phản hồi của nhân viên mà khách truy cập thực sự nhận được.

Tôi có thể thêm ChatGPT tùy chỉnh vào trang web không?

Bạn có thể thêm trợ lý kiểu ChatGPT được huấn luyện từ các trang của mình. Hướng dẫn này triển khai Agent Quickchat AI qua widget trang web, nên khách truy cập trò chuyện ngay trên trang mà không cần đăng nhập ChatGPT. Kiến thức, chỉ dẫn và tích hợp của nó được quản lý trong Quickchat AI.

Tôi có thể thêm chatbot AI vào trang web miễn phí không?

Gói Free của Quickchat AI hỗ trợ học cá nhân, phi thương mại và gồm 50 tín dụng AI mỗi tháng. Trang web công ty hoặc triển khai bán hàng và hỗ trợ hướng đến khách hàng cần gói cho phép sử dụng thương mại. Phí nền tảng dựng web được tính riêng, và kiểm thử cũng dùng tín dụng AI.

Tôi có cần viết mã hoặc cung cấp khóa API không?

Thiết lập cốt lõi dùng cài đặt dashboard cùng plugin, app embed hoặc script được cung cấp. Đoạn mã trang web chứa Scenario ID công khai, không phải khóa API riêng tư. Kết nối CRM Action tùy chọn cần endpoint phù hợp và cơ chế xác thực của nó; giữ thông tin xác thực đó trong cài đặt Action.

Chatbot trang web có thể thu thập khách hàng tiềm năng và yêu cầu báo giá không?

Có. Smart Data Gathering hỏi các trường đã chọn trong cuộc trò chuyện và lưu vào Inbox. Email new leads có thể thông báo cho quản trị viên Agent sau khi thu thập được email hoặc số điện thoại. API Action có thể gửi các trường bắt buộc đã lưu đến bên nhận được cấu hình; chỉ thu thập tên không có nghĩa là yêu cầu đã đủ thông tin.

Nhân viên có thể tiếp quản cuộc trò chuyện không?

Có. Cấu hình Human Handoff với giờ có nhân viên trực và tin nhắn ngoài giờ. Trong Inbox, chọn Assign to me cho cuộc trò chuyện chưa được phân công, hoặc Take over khi nút đó xuất hiện, rồi trả lời khách truy cập. Reassign to AI trả cuộc trò chuyện lại cho Agent.

Có dùng được trên WordPress, Shopify, Squarespace, Wix và Webflow không?

Mỗi nền tảng đều có cách cài đặt. Dùng plugin WordPress chính thức, app embed Shopify sau khi kết nối Agent của cửa hàng, hoặc đoạn mã footer/cuối body toàn trang phù hợp cho Agent hiện có. Quyền dùng plugin và yêu cầu gói cho mã tùy chỉnh khác nhau theo nền tảng dựng web.

Vì sao chatbot không xuất hiện trên trang web của tôi?

Kiểm tra trang đã xuất bản, Scenario ID chính xác và vị trí đoạn mã ở cuối body của trang. Xóa các bản cài cũ trùng lặp và tránh khối dựa trên iframe cho Widget nổi. Nếu widget mở được nhưng không trả lời, kiểm tra Widget & Embed access và tín dụng AI còn lại.

Chatbot có làm chậm trang web không?

Bộ tải widget tải xuống bất đồng bộ, nhưng vẫn thêm JavaScript và yêu cầu mạng. So sánh hiệu năng tải và tương tác trước và sau khi cài trên các trang đại diện và điện thoại. Tải bất đồng bộ không chứng minh rằng hiệu năng hoàn toàn không bị ảnh hưởng.

Chatbot trang web có hoạt động trên điện thoại không?

Widget đang mở dùng bố cục toàn màn hình khi chiều rộng dưới 768 pixel CSS. Kiểm thử nút mở, bàn phím, thao tác cuộn và nút đóng trên điện thoại. Giữ Auto-open Widget tắt khi việc tự động mở sẽ làm gián đoạn duyệt web.

Chatbot có thể trả lời bằng ngôn ngữ của khách truy cập không?

Agent có thể trả lời bằng ngôn ngữ của khách truy cập. Dịch lời chào cố định, câu gợi ý bắt đầu cuộc trò chuyện và nhãn widget là cài đặt riêng trên gói trả phí. Kiểm thử cả thông tin trong câu trả lời lẫn văn bản giao diện cho từng ngôn ngữ bạn định hỗ trợ.