Ở bài trước, chúng ta đã hoàn thiện hành trình chuyển đổi trên Landing Page Levela, từ lúc khách hàng xem sản phẩm, nhấn CTA cho đến điền và gửi form tư vấn.

Tuy nhiên, form hiện mới hoàn thiện ở phía giao diện. Để một yêu cầu tư vấn thực sự được tiếp nhận, chúng ta cần đưa dữ liệu khách hàng về hệ thống để doanh nghiệp có thể quản lý và xử lý. Đồng thời, sau khi gửi thành công, khách hàng cũng nên nhận được một phản hồi xác nhận rằng Levela đã tiếp nhận yêu cầu của họ.

Trong bài này, chúng ta sẽ tiếp tục sử dụng Vibe Coding kết hợp MCP Server để kết nối form /levela với EzySupport, đưa yêu cầu tư vấn về EzyPlatform và thiết lập email xác nhận tự động sau khi dữ liệu được tiếp nhận thành công.

1. Kiểm tra lại Form tư vấn Levela

Form đã được xây dựng ở bài trước, vì vậy chúng ta không cần tạo lại. Trước tiên, hãy yêu cầu AI kiểm tra chính xác form hiện tại đang được triển khai như thế nào.

Prompt mẫu

"Hãy kiểm tra form tư vấn hiện tại trên Landing Page /levela.

Xác định:

  • File chứa form.
  • Các trường dữ liệu hiện có.
  • JavaScript xử lý khi khách gửi form.
  • Validation hiện tại.
  • Cách nút Mua ngay truyền sản phẩm khách đang quan tâm vào form.
  • Cách xử lý các trạng thái Default, Submitting, Success và Error.
  • Dữ liệu hiện tại đã được gửi đi đâu hay mới chỉ xử lý ở frontend.

Chưa chỉnh sửa source code.

Hãy mô tả ngắn gọn luồng xử lý hiện tại."

AI kiểm tra luồng xử lý hiện tại của form tư vấn Levela
AI kiểm tra luồng xử lý hiện tại của form tư vấn Levela

Mục tiêu của bước này chỉ là để AI hiểu chính xác cấu trúc hiện tại trước khi ghép API. Cách làm này cũng giúp tránh việc AI viết lại form hoặc làm mất những xử lý đã hoàn thành ở bài trước.

2. Sử dụng MCP để tìm chức năng EzySupport phù hợp

Đây là phần nên thay đổi nhiều nhất so với bản bài viết trước.

Chúng ta không cần tự thiết kế API hoặc tự tạo endpoint mới ngay từ đầu. Nếu MCP Server đã được kết nối với EzyPlatform, hãy để AI kiểm tra những API hoặc Ezy Function mà EzySupport đã cung cấp.

Bạn cũng có thể tham khảo thêm Bài hướng dẫn Ezyvora kết nối MCP Server, cũng sử dụng chính quy trình này và yêu cầu AI ưu tiên chức năng EzySupport hiện có thay vì tự tạo API.

Prompt mẫu

"Hãy sử dụng MCP Server để kiểm tra các API hoặc Ezy Function hiện có của EzySupport.

Tôi cần gửi form tư vấn trên Landing Page /levela vào EzySupport.

Dữ liệu form gồm:

  • Họ và tên.
  • Số điện thoại.
  • Email.
  • Sản phẩm quan tâm.
  • Nội dung.

Hãy tìm chức năng phù hợp và xác định:

  • API hoặc Ezy Function cần sử dụng.
  • Các tham số cần truyền.
  • Trường dữ liệu Levela tương ứng với tham số nào.
  • Dữ liệu trả về.
  • Cách gọi phù hợp từ Landing Page.

Ưu tiên chức năng EzySupport đã có, không tự tạo API mới.

Chưa chỉnh sửa source code."

Sau bước này, chúng ta cần biết chính xác kết quả như giao diện dưới đây:

AI xác định API/Ezy Function EzySupport phù hợp cho form tư vấn Levela
AI xác định API/Ezy Function EzySupport phù hợp cho form tư vấn Levela

Điều quan trọng ở đây là không tự đoán tên endpoint hoặc cấu trúc request. Hãy sử dụng kết quả MCP trả về làm cơ sở cho bước tiếp theo.

3. Ghép API EzySupport vào Form Levela

Khi AI đã xác định được chức năng EzySupport phù hợp, lúc này chúng ta mới yêu cầu AI chỉnh sửa source code.

Form hiện tại đã có giao diện và validation nên không cần xây dựng lại.

Prompt mẫu

"Hãy ghép API/Ezy Function EzySupport vừa tìm được vào form tư vấn hiện tại của Landing Page /levela.

Yêu cầu:

  • Giữ nguyên giao diện form hiện tại.
  • Giữ nguyên chức năng tự động chọn sản phẩm khi khách nhấn Mua ngay.
  • Validate dữ liệu trước khi gửi.
  • Gửi đúng các trường mà EzySupport yêu cầu.
  • Chỉ hiển thị Success khi server xác nhận yêu cầu đã được tiếp nhận.
  • Khi đang gửi, disable button để tránh gửi nhiều lần.
  • Nếu gửi thất bại, giữ lại dữ liệu khách đã nhập.
  • Không hard-code access token hoặc thông tin quản trị vào frontend.
  • Không thêm thư viện mới nếu project hiện tại đã có cách gọi API phù hợp.
  • Không thay đổi những phần khác của Landing Page.

Sau khi hoàn thành, hãy liệt kê những file đã chỉnh sửa và dừng lại để tôi Preview."

AI ghép API EzySupport vào form tư vấn Landing Page levela
AI ghép API EzySupport vào form tư vấn Landing Page /levela

Yêu cầu không hard-code access token hoặc thông tin quản trị vào frontend cũng xuất hiện trong hướng dẫn Ezyvora và là điểm nên giữ lại khi triển khai Levela.

4. Hoàn thiện trạng thái sau khi gửi yêu cầu

Ở bài trước, chúng ta đã chuẩn bị các trạng thái:

  • Default
  • →
  • Submitting
  • →
  • Success / Error

Nhưng khi chưa có backend, trạng thái Success chưa thể phản ánh việc dữ liệu thực sự được tiếp nhận. Sau khi ghép EzySupport, chúng ta có thể xử lý chính xác hơn:

Trạng thái Xử lý
Submitting Disable button và hiển thị "Đang gửi..."
Success Chỉ hiển thị khi EzySupport xác nhận đã tiếp nhận yêu cầu
Error Thông báo lỗi và giữ lại dữ liệu khách đã nhập
Khi thành công

"Cảm ơn bạn. Levela đã nhận được yêu cầu tư vấn và sẽ liên hệ lại trong thời gian sớm nhất."

Nếu xảy ra lỗi

"Hiện chưa thể gửi yêu cầu. Vui lòng thử lại sau."

Đặc biệt, không nên reset form khi API thất bại, vì khách hàng sẽ phải nhập lại toàn bộ thông tin. Đây cũng là cách xử lý được khuyến nghị trong bài Ezyvora.

5. Gửi email phản hồi sau khi tiếp nhận yêu cầu tư vấn

Sau khi EzySupport đã tiếp nhận thành công yêu cầu tư vấn, chúng ta có thể tiến thêm một bước: tự động gửi email phản hồi đến khách hàng. Email này không phải email Marketing. Mục đích của nó đơn giản là xác nhận với khách hàng rằng Levela đã nhận được yêu cầu và cho họ biết điều gì sẽ xảy ra tiếp theo.

Luồng xử lý lúc này sẽ trở thành:

  • Khách gửi form
  • →
  • EzySupport tiếp nhận
  • →
  • Lưu thành công
  • →
  • Gửi email xác nhận
  • →
  • Khách nhận phản hồi

Email chỉ nên được gửi sau khi yêu cầu đã được EzySupport tiếp nhận thành công. Đây cũng là nguyên tắc trong luồng email xác nhận của EzyPlatform: lưu dữ liệu trước, sau đó mới kích hoạt email.

5.1. Tạo Mail Template cho Levela

Truy cập khu vực quản lý Các mẫu thư (Mail Template) trên EzyPlatform và tạo một template dành riêng cho yêu cầu tư vấn Levela. Mail Template có thể được chỉnh trực tiếp trong Admin hoặc đồng bộ về VS Code bằng EzyArticle; bài mẫu cho biết template gồm các file như title.html, content.html và meta.json.

Tạo Mail Template mới cho yêu cầu tư vấn Levela
Tạo Mail Template mới cho yêu cầu tư vấn Levela
Chi tiết Mail Template levela_consultation_confirmation
Chi tiết Mail Template levela_consultation_confirmation

Nếu muốn tiếp tục sử dụng Vibe Coding để thiết kế email theo Brand Identity Levela, có thể yêu cầu AI:

Prompt mẫu

"Hãy chỉnh sửa Mail Template xác nhận yêu cầu tư vấn của Levela.

Mail Template:

levela_consultation_confirmation

Đây là email được gửi sau khi khách hàng gửi yêu cầu tư vấn thành công từ Landing Page /levela.

Áp dụng Brand Guideline Levela:

  • Primary Pink: #F7658B.
  • Gradient Brown: #C17A6B.
  • Background: #FFF8F8.
  • Surface: #FFFFFF.
  • Text: #4E3B36.
  • Style: Modern Beauty / Minimal / Soft.

Email gồm:

  • Logo Levela.
  • Lời cảm ơn.
  • Xác nhận đã nhận yêu cầu tư vấn.
  • Sản phẩm khách đang quan tâm nếu dữ liệu hiện tại hỗ trợ.
  • Thông báo Levela sẽ liên hệ lại.
  • Thông tin liên hệ cần thiết.

Giữ nguyên các biến dữ liệu động hiện có.

Không tự tạo biến mới nếu backend chưa cung cấp.

Thiết kế đơn giản và tương thích với email client cũng như mobile."

Sau khi chỉnh sửa, hãy Preview Mail Template trước khi xuất bản lên server.

5.2. Gửi email sau khi EzySupport tiếp nhận thành công

Tiếp theo là phần quan trọng nhất. Chúng ta không nên gọi chức năng gửi email trực tiếp từ JavaScript của /levela. Cách này giúp tránh trường hợp email thông báo "Levela đã nhận được yêu cầu" trong khi yêu cầu thực tế chưa được EzySupport lưu thành công. Đây chính là thứ tự xử lý được bài mẫu khuyến nghị. Thay vì tự đoán API gửi email, hãy tiếp tục để AI kiểm tra những chức năng hiện có trên EzyPlatform:

Prompt mẫu

"Tôi muốn tự động gửi email xác nhận sau khi yêu cầu tư vấn từ Landing Page /levela đã được EzySupport tiếp nhận thành công.

Hãy kiểm tra mã nguồn và các chức năng gửi email hiện có trên EzyPlatform.

Yêu cầu:

  • Chỉ gửi email sau khi EzySupport đã tiếp nhận yêu cầu thành công.
  • Gửi tới email khách hàng vừa nhập trong form.
  • Sử dụng Mail Template levela_consultation_confirmation.
  • Không hard-code nội dung email trong JavaScript.
  • Không gửi email trực tiếp từ trình duyệt.
  • Ưu tiên chức năng gửi email phía server đã có trên EzyPlatform.
  • Không làm thay đổi luồng EzySupport hiện tại.

Trước tiên hãy phân tích cách triển khai phù hợp.

Chưa chỉnh sửa source code."

Sau khi AI xác định được cách triển khai phù hợp, chúng ta mới yêu cầu AI thực hiện thay đổi trên source code.

6. Kiểm thử toàn bộ luồng từ Landing Page đến email

Sau khi bổ sung email xác nhận, việc kiểm thử không nên chỉ dừng ở thông báo Success trên Landing Page. Hãy sử dụng một địa chỉ email mà bạn có thể kiểm tra ngay, điền form /levela và gửi một yêu cầu tư vấn thật. Sau đó kiểm tra lần lượt ba nơi:

6.1. Kiểm tra Landing Page

Sau khi gửi thành công, khách hàng phải nhận được thông báo rõ ràng:

Thông báo

"Cảm ơn bạn. Levela đã nhận được yêu cầu tư vấn và sẽ liên hệ lại trong thời gian sớm nhất."

Landing Page levela hiển thị thông báo gửi yêu cầu tư vấn thành công
Landing Page /levela hiển thị thông báo gửi yêu cầu tư vấn thành công

6.2. Kiểm tra EzySupport

Truy cập EzyPlatform Admin → EzySupport. Kiểm tra yêu cầu vừa gửi có xuất hiện hay không và các thông tin như họ tên, email, số điện thoại, sản phẩm quan tâm và nội dung có chính xác không.

Yêu cầu tư vấn Levela xuất hiện trên EzyPlatform Admin - EzySupport
Yêu cầu tư vấn Levela xuất hiện trên EzyPlatform Admin – EzySupport

Nếu dữ liệu chưa xuất hiện trong EzySupport thì nên xử lý lỗi của luồng Landing Page → EzySupport trước, chưa cần kiểm tra email. Đây cũng là thứ tự kiểm thử được sử dụng trong bài mẫu.

6.3. Kiểm tra hộp thư khách hàng

Nếu yêu cầu đã được EzySupport tiếp nhận đúng, mở hộp thư của email vừa nhập sẽ hiển thị kết quả như sau đây:

Email xác nhận yêu cầu tư vấn Levela trong hộp thư khách hàng
Email xác nhận yêu cầu tư vấn Levela trong hộp thư khách hàng

Kết luận

Đến đây, form tư vấn trên Landing Page Levela không còn chỉ xử lý ở phía giao diện. Khi khách hàng quan tâm đến một sản phẩm và gửi thông tin, Landing Page có thể gọi chức năng phù hợp của EzySupport để đưa yêu cầu về EzyPlatform.

Thay vì tự xây dựng thêm API và hệ thống lưu trữ mới, chúng ta sử dụng MCP Server để AI tìm chức năng EzySupport đã có, ghép chức năng đó vào form hiện tại và kiểm tra dữ liệu ở cả Landing Page lẫn EzyPlatform Admin. Đây cũng là mô hình triển khai được bài Ezyvora hướng dẫn.

Ở bài tiếp theo, chúng ta có thể tiếp tục xử lý những gì xảy ra sau khi EzySupport nhận được yêu cầu, để doanh nghiệp không chỉ thu thập thông tin mà còn có thể phản hồi và chăm sóc khách hàng theo một quy trình rõ ràng.