Hướng dẫn tích hợp Chatbot AI tư vấn sản phẩm vào Landing Page Levela với Vibe Coding

Qua các bài trước, Landing Page Levela đã dần hoàn thiện hành trình mua hàng: khách có thể tìm hiểu sản phẩm, đọc Blog hướng dẫn, thêm sản phẩm vào giỏ, Checkout, đặt hàng và theo dõi đơn hàng.

Tuy nhiên, trong quá trình tìm hiểu sản phẩm, không phải khách hàng nào cũng sẵn sàng mua ngay. Một người mới biết đến Levela có thể có những câu hỏi như:

• Levela hiện có những sản phẩm nào?
• Tôi nên sử dụng Hydrating Serum ở bước nào?
• Thứ tự sử dụng Cleanser, Serum và Moisturizer như thế nào?
• Tôi muốn được tư vấn thêm thì phải làm sao?

Nếu khách phải tự tìm câu trả lời trong từng Product Card hoặc từng bài Blog, hành trình sẽ mất nhiều bước hơn. Trong bài này, chúng ta sẽ bổ sung Chatbot AI cho Landing Page Levela, giúp khách đặt câu hỏi trực tiếp ngay trên website.

Do EzyChat và EzyAI đã được cài đặt ở các bài trước, chúng ta sẽ bỏ qua phần cài plugin và cấu hình cơ bản, đi thẳng vào việc tạo một chatbot dành riêng cho Levela.

1. Xác định Chatbot Levela cần tư vấn những gì

Trước khi cấu hình AI, chúng ta cần xác định rõ phạm vi của chatbot. Chatbot Levela không cần trả lời mọi chủ đề. Trong bài này, nhiệm vụ chính của chatbot là hỗ trợ khách tìm hiểu các sản phẩm đang có trên Landing Page.

Levela hiện có ba sản phẩm:

Routine cơ bản đã được sử dụng trên website là:

• Gentle Cleanser
• Hydrating Serum
• Daily Moisturizer

Từ dữ liệu này, chatbot có thể hỗ trợ những câu hỏi như:

• Levela có những sản phẩm nào?
• Serum dùng ở bước nào?
• Kem dưỡng dùng trước hay sau Serum?
• Thứ tự sử dụng ba sản phẩm Levela như thế nào?
• Giá sản phẩm hiện tại là bao nhiêu?
• Tôi muốn xem sản phẩm này ở đâu?

Điểm quan trọng là chatbot chỉ nên tư vấn dựa trên thông tin Levela thực sự có. Nếu chưa có dữ liệu về thành phần, loại da phù hợp hoặc một công dụng cụ thể, chatbot không nên tự tạo câu trả lời.

2. Tạo kỹ năng AI tư vấn sản phẩm Levela

Sau khi xác định phạm vi, chúng ta bắt đầu tạo kỹ năng dành riêng cho chatbot. Trong EzyPlatform Admin, mở EzyAI → Các kỹ năng AI → Thêm mới.

• Ở trường Tiêu đề, nhập: Hướng dẫn tư vấn sản phẩm Levela
• Ở trường Nội dung, chúng ta cần mô tả cho AI biết vai trò, thông tin sản phẩm và những nguyên tắc cần tuân theo. Có thể sử dụng nội dung sau:

Sau khi hoàn thành, đặt trạng thái phù hợp để kỹ năng có thể được sử dụng và lưu lại.

3. Kiểm tra dịch vụ AI Chat sẽ sử dụng

Sau khi có kỹ năng, chúng ta cần xác định dịch vụ AI nào sẽ xử lý cuộc hội thoại. Trong EzyPlatform Admin, mở EzyAI → Các dịch vụ AI Chat.

Nếu hệ thống đã có dịch vụ AI Chat đang hoạt động ổn định, chúng ta không cần tạo lại từ đầu. Chỉ cần kiểm tra:

• Dịch vụ đang sử dụng.
• Trạng thái hoạt động.
• Cấu hình AI tương ứng.
• Khả năng sử dụng với Chatbot Levela.

Nếu cần sử dụng API Key của nhà cung cấp AI, thông tin này phải được lưu ở khu vực cấu hình phù hợp của EzyPlatform.

4. Tạo cấu hình AI Chat cho Levela

Tiếp theo, tạo một cấu hình AI Chat dành cho Levela.

Tên cấu hình có thể đặt: levela và nhập mã khóa API dịch vụ mà bạn đang sử dụng (ví dụ:deepseek), cùng với các trường thông tin khác như ảnh bên dưới .

Việc tạo cấu hình riêng giúp chatbot Levela có thể sử dụng kỹ năng và cách xử lý riêng mà không ảnh hưởng đến những chatbot khác trên hệ thống. Trong cấu hình, sử dụng đúng dịch vụ AI Chat đã kiểm tra ở bước trước. Sau khi hoàn thành, lưu cấu hình.

5. Gắn kỹ năng tư vấn sản phẩm vào AI Chat

Bây giờ chúng ta đã có hai thành phần: AI Chat Config: levela và AI Skill: Hướng dẫn tư vấn sản phẩm Levela.

Tiếp theo, mở cấu hình levela và tìm phần quản lý Các kỹ năng AI. Thêm kỹ năng Hướng dẫn tư vấn sản phẩm Levela vào cấu hình.

Sau khi thêm Skill, lưu lại cấu hình. Đến đây AI đã có hướng dẫn về phạm vi thông tin và cách tư vấn sản phẩm Levela.

6. Chọn cấu hình AI Chat cho Chatbot Levela

Sau khi gắn Skill, hãy kiểm tra cấu hình AI Chat mà chatbot đang sử dụng. Mục tiêu là đảm bảo khi khách gửi câu hỏi từ Landing Page Levela, cuộc hội thoại được xử lý bởi đúng cấu hình vừa tạo.

Nếu hệ thống cho phép chọn cấu hình AI Chat cho Chat Profile, hãy chọn cấu hình levela.

7. Lấy đoạn mã nhúng Chatbot

Khi phần AI đã sẵn sàng, bước tiếp theo là đưa chatbot lên Landing Page. Mở cấu hình Chatbot/Chat Profile tương ứng và tìm phần có biểu tượng Đoạn mã nhúng.

Sao chép chính xác đoạn mã mà hệ thống cung cấp. Đoạn mã có thể chứa các thông tin cấu hình như script và data-profile. Không tự tạo hoặc thay đổi data-profile, bởi giá trị này cần khớp với Chat Profile thực tế trên EzyPlatform.

Sau khi copy, quay lại project Levela trong VS Code.

8. Sử dụng Vibe Coding để đưa Chatbot vào Landing Page

Không nên tự chọn ngẫu nhiên một file HTML rồi dán script vào. Trước tiên, hãy để AI kiểm tra cấu trúc project.

Sau khi AI xác định đúng vị trí, tiếp tục cung cấp đoạn mã nhúng đã copy từ EzyPlatform:

Sau khi AI hoàn thành, mở /levela và kiểm tra icon chatbot. Nếu chatbot không xuất hiện, hãy kiểm tra Console và Network trước khi yêu cầu AI thay đổi source code thêm.

9. Đồng bộ giao diện Chatbot với Brand Identity Levela

Sau khi đã tạo Chat Profile và cấu hình AI cho Levela, bước tiếp theo là chỉnh lại nút mở chatbot để phù hợp với giao diện Landing Page. Thay vì chỉnh CSS trực tiếp trong source code, chúng ta có thể cấu hình ngay trong EzyChat.

9.1. Mở hồ sơ chat Levela

Trong EzyPlatform Admin, truy cập EzyChat → Các hồ sơ chat. Tại danh sách hồ sơ chat, tìm hồ sơ levela. Nhấn vào tên levela để mở thông tin chi tiết.

9.2. Kiểm tra thông tin và đoạn mã nhúng

Tại trang Chi tiết hồ sơ chat, chúng ta có thể kiểm tra các thông tin của hồ sơ Levela. Trong đó, phần Đoạn mã nhúng cung cấp script để đưa chatbot lên website đã thực hiện ở bước trước.

Giá trị data-profile được tạo riêng cho hồ sơ chat. Khi tích hợp Landing Page, cần sử dụng chính xác đoạn mã do EzyChat cung cấp, không tự tạo hoặc thay đổi khóa nhúng.

Ngoài đoạn mã nhúng, trang này còn cung cấp Iframe hỗ trợ nếu cần sử dụng chatbot dưới dạng iframe. Để tiếp tục cấu hình giao diện, nhấn Sửa.

9.3. Cấu hình giao diện nút Chat

Trong trang Sửa hồ sơ chat, chúng ta có thể điều chỉnh trực tiếp cách nút chatbot xuất hiện trên website. Các thuộc tính cần chú ý gồm:

• Kiểu nút chat
• Vị trí nút chat
• Kích thước nút chat
• Màu nút chat
• URL ảnh nút mở chat
• Hiệu ứng thu hút chú ý cho nút chat
• URL ảnh supporter

Ngoài ra còn có các tùy chọn liên quan đến hành vi trò chuyện như:

• Chat qua socket trên web.
• Bắt buộc thông tin người dùng để chat.
• Bắt buộc email người dùng để chat.
• Bắt buộc số điện thoại người dùng để chat.
• Cho phép người dùng đính kèm tệp khi chat.

Ở bài này, chúng ta chỉ tập trung vào những cấu hình cần thiết để chatbot hoạt động phù hợp trên Landing Page, không cần bật tất cả tùy chọn.

9.4. Thiết lập nút Chat phù hợp với Levela

Dựa trên giao diện Landing Page hiện tại, cấu hình nút Chat theo hướng đơn giản và đồng nhất với thương hiệu Levela. Có thể thiết lập:

Việc không bắt buộc khách cung cấp họ tên, email hoặc số điện thoại ngay từ đầu đặc biệt phù hợp với mục đích của chatbot trong bài này.

Sau khi hoàn thành, kiểm tra lại Trạng thái là Đã kích hoạt rồi nhấn Gửi đi để lưu cấu hình.

9.5. Kiểm tra nút Chatbot trên Landing Page

Cuối cùng, quay lại Landing Page Levela và tải lại trang. Nếu cấu hình đúng, nút chatbot sẽ xuất hiện ở góc dưới bên phải màn hình. Ở giao diện hiện tại, nút sử dụng tông hồng phù hợp với màu sắc của Levela và icon hội thoại màu trắng ở giữa.

Kết quả của bước này là Chatbot Levela đã được đưa lên Landing Page với giao diện phù hợp, sẵn sàng để chúng ta kiểm tra khả năng tư vấn sản phẩm ở bước tiếp theo.

10. Kiểm tra Chatbot bằng câu hỏi sản phẩm thực tế

Bước cuối cùng là kiểm tra chatbot bằng những câu hỏi mà khách hàng thực sự có thể hỏi. Không nên chỉ thử: Xin chào.

Câu hỏi này chỉ chứng minh AI có thể phản hồi, chưa chứng minh Skill tư vấn sản phẩm hoạt động đúng. Hãy thử lần lượt: Levela hiện có những sản phẩm nào?

Câu trả lời cần dựa trên thông tin chúng ta đã cung cấp.

Sau đó thử một câu hỏi mà Skill không có dữ liệu: Hydrating Serum có thành phần gì?

Nếu chưa cung cấp thông tin thành phần, chatbot không nên tự tạo danh sách thành phần. Nếu cả những câu chatbot biết và không biết đều được xử lý đúng, Skill đã hoạt động đúng phạm vi.

11. Bổ sung nguồn dữ liệu RAG cho Chatbot Levela

Sau khi tạo AI Skill tư vấn sản phẩm cho Levela, Chatbot đã có các quy tắc để xác định cách trả lời và tư vấn khách hàng. Tuy nhiên, nếu tiếp tục đưa toàn bộ thông tin sản phẩm trực tiếp vào AI Skill thì phần hướng dẫn sẽ ngày càng dài và khó cập nhật khi Levela có thêm sản phẩm hoặc nội dung mới.

Vì vậy, chúng ta sẽ tách thông tin sản phẩm thành một nguồn dữ liệu riêng bằng EzyRAG và EzyVector. AI Skill sẽ tập trung quy định Chatbot cần tư vấn như thế nào, còn RAG sẽ cung cấp dữ liệu sản phẩm để Chatbot tìm và sử dụng khi trả lời.

Phần cài đặt EzyRAG, EzyVector, cấu hình Embedding và kết nối hai thành phần đã được thực hiện trước đó nên sẽ không lặp lại trong bài này.

11.1. Tạo Collection cho Levela

Đầu tiên, mở khu vực quản lý Collection trong EzyRAG → Các bộ sưu tập vector → Thêm mới.

Tạo một Collection riêng dành cho dữ liệu của Landing Page Levela. Có thể đặt tên là levela.

Các thông số liên quan đến EzyVector và Embedding tiếp tục sử dụng theo cấu hình đã thiết lập trước đó. Nếu hệ thống đang hoạt động bình thường thì không cần thay đổi các thông số này.

Sau khi kiểm tra thông tin, nhấn Thêm để tạo Collection. Collection này sẽ tập hợp riêng dữ liệu phục vụ Chatbot Levela, tránh trộn với dữ liệu của những website hoặc Chatbot khác.

11.2. Bổ sung Data Chunk cho routine Levela nếu chưa có

Với ba sản phẩm đang sử dụng trên Landing Page, chúng ta đã có các Data Chunk:

• Levela Gentle Cleanser
• Levela Hydrating Serum
• Levela Daily Moisturizer

Không cần tạo lại các Data Chunk này. Tuy nhiên, để Chatbot có thể trả lời những câu hỏi liên quan đến thứ tự sử dụng cả ba sản phẩm, có thể bổ sung thêm một Data Chunk riêng về routine nếu dữ liệu này chưa tồn tại.

Trong EzyRAG → Data Chunks, tạo:

Sau đó nhấn Gửi đi.

Nếu Data Chunk có nội dung tương tự đã tồn tại thì bỏ qua bước này để tránh tạo dữ liệu trùng lặp.

11.3. Bổ sung link sản phẩm và Blog vào dữ liệu Levela

Ngoài thông tin như tên, mô tả, giá, dung tích và vị trí trong routine, chúng ta sẽ bổ sung thêm đường dẫn để Chatbot có thể hướng khách đến bước tiếp theo khi cần.

• Trang sản phẩm Levela: sử dụng khi khách muốn xem hoặc mua sản phẩm.
• Blog Levela: sử dụng khi khách muốn tìm hiểu thêm về sản phẩm hoặc cách sử dụng.

Ví dụ, mở lại Data Chunk Levela Hydrating Serum và cập nhật nội dung thành:

Thực hiện tương tự với Levela Gentle Cleanser và Levela Daily Moisturizer. Nếu cả ba sản phẩm đều được hiển thị tại cùng một khu vực sản phẩm trên Landing Page và sử dụng chung một trang Blog, có thể sử dụng cùng hai đường dẫn này trong các Data Chunk.

Nhờ đó, nguồn dữ liệu không chỉ giúp Chatbot tìm thông tin về sản phẩm mà còn cung cấp đường dẫn phù hợp khi khách muốn tiếp tục xem sản phẩm, mua hàng hoặc tìm hiểu thêm.

11.4. Kiểm tra bằng những câu hỏi thực tế

Sau khi nguồn dữ liệu Levela được kết nối với Chatbot, hãy thử trực tiếp những câu hỏi mà khách có thể sử dụng trên Landing Page.

Nếu Chatbot có thể lấy đúng thông tin sản phẩm, trả lời đúng thứ tự routine và sử dụng đúng các đường dẫn đã cung cấp thì nguồn dữ liệu RAG Levela đã hoạt động đúng với mục tiêu tư vấn trên Landing Page.

Kết luận

Đến đây, chúng ta đã hoàn thiện Chatbot AI tư vấn sản phẩm cho Landing Page Levela. Chatbot được cấu hình bằng EzyChat và EzyAI, sử dụng kỹ năng riêng để xác định cách tư vấn, sau đó được đưa lên Landing Page bằng đoạn mã nhúng với sự hỗ trợ của Vibe Coding trong VS Code.

Để Chatbot không phải phụ thuộc hoàn toàn vào thông tin viết trực tiếp trong AI Skill, chúng ta cũng đã bổ sung nguồn dữ liệu RAG riêng cho Levela bằng EzyRAG và EzyVector. Collection levela tập hợp dữ liệu của ba sản phẩm, routine chăm sóc da, đồng thời bổ sung đường dẫn đến khu vực sản phẩm và Blog để Chatbot có thể hướng khách đến bước tiếp theo phù hợp.

Sau khi hoàn thành, Chatbot có thể hỗ trợ khách ngay trên Landing Page với những nhu cầu thực tế như tìm hiểu sản phẩm, kiểm tra giá, hỏi thứ tự sử dụng, xem sản phẩm để mua hoặc chuyển sang Blog khi muốn đọc hướng dẫn chi tiết hơn.

Quan trọng hơn, AI Skill và RAG giờ đây đảm nhiệm hai vai trò rõ ràng: AI Skill quy định Chatbot cần tư vấn như thế nào, còn RAG cung cấp dữ liệu thực tế để Chatbot sử dụng khi trả lời. Khi Levela có thêm sản phẩm hoặc nội dung mới, chúng ta có thể tiếp tục cập nhật nguồn dữ liệu thay vì đưa ngày càng nhiều thông tin trực tiếp vào AI Skill.