Hướng dẫn ghép API EzySupport vào website doanh nghiệp Ezyvora
Back To Blogs
Nguyễn Thị Thanh Tuyền - Chuyên viên Marketing
Sau khi website Ezyvora đã có giao diện, dữ liệu thật và các thông tin liên hệ, bước tiếp theo là hoàn thiện chức năng tiếp nhận yêu cầu hỗ trợ từ khách hàng. Thay vì để form liên hệ chỉ hiển thị thông báo hoặc lưu tạm ở phía trình duyệt, chúng ta sẽ kết nối form với EzySupport. Khi khách hàng gửi yêu cầu trên website, dữ liệu sẽ được chuyển về EzyPlatform để doanh nghiệp có thể tiếp nhận và xử lý tập trung.
Luồng cần hoàn thiện là:
- Khách điền form
- →
- Website gọi API
- →
- EzySupport tiếp nhận
- →
- Doanh nghiệp xử lý yêu cầu
Trong bài này, chúng ta vẫn sử dụng cách Vibe Coding: để AI kiểm tra API và cấu trúc dự án trước, sau đó mới yêu cầu AI ghép API vào website.
Bước 1: Kiểm tra form liên hệ hiện tại
Trước khi ghép API, hãy để AI kiểm tra form hiện có trên website Ezyvora.
Prompt mẫu
"Hãy kiểm tra form liên hệ/đăng ký tư vấn hiện tại của website Ezyvora.
Xác định:
- File chứa form.
- Các trường dữ liệu hiện có.
- JavaScript xử lý khi người dùng bấm gửi.
- Validation hiện tại.
- Dữ liệu hiện đang được gửi hoặc lưu ở đâu.
Chưa chỉnh sửa code.
Hãy mô tả ngắn gọn luồng xử lý hiện tại.
Ví dụ, form có thể gồm:
- Họ và tên.
- Email.
- Số điện thoại.
- Dịch vụ quan tâm.
- Nội dung cần tư vấn."
Mục tiêu của bước này là để AI hiểu chính xác dữ liệu website đang có trước khi kết nối EzySupport.
Bước 2: Tìm API EzySupport phù hợp
Nếu đã kết nối MCP Server, hãy sử dụng MCP để AI tìm chức năng EzySupport hiện có thay vì tự đoán endpoint.
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 liên hệ của website Ezyvora vào EzySupport.
Dữ liệu form gồm:
- Họ tên.
- Email.
- Số điện thoại.
- Dịch vụ quan tâm.
- Nội dung cần tư vấn.
Hãy tìm chức năng phù hợp và xác định:
- API/Ezy Function cần sử dụng.
- Các tham số cần truyền.
- Dữ liệu trả về.
- Cách gọi phù hợp từ website.
Ưu tiên chức năng EzySupport đã có, không tự tạo API mới.
Chưa chỉnh sửa code."
Sau bước này, AI sẽ trả kết quả như bên dưới đây:
Bước 3: Ghép API vào form Ezyvora
Khi đã xác định đúng API, yêu cầu AI thực hiện kết nối.
Prompt mẫu
"Hãy ghép API EzySupport vừa tìm được vào form liên hệ hiện tại của website Ezyvora.
Yêu cầu:
- Giữ nguyên giao diện form.
- Khi khách bấm gửi, validate dữ liệu trước.
- Gửi đúng các trường mà API EzySupport yêu cầu.
- Chỉ hiển thị thành công khi server xác nhận yêu cầu đã được tiếp nhận.
- Không hard-code access token hoặc thông tin quản trị vào frontend.
- Khi đang gửi, disable nút submit để 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 thay đổi các phần khác của website.
Sau khi hoàn thành, hãy cho tôi biết những file đã chỉnh sửa và dừng lại để tôi Preview."
Bước 4: Hiển thị kết quả cho khách hàng
Sau khi gọi API, website cần phản hồi rõ ràng để khách biết yêu cầu đã được tiếp nhận hay chưa.
"Cảm ơn anh/chị. Ezyvora đã nhận được yêu cầu và sẽ liên hệ lại trong thời gian sớm nhất."
"Hiện chưa thể gửi yêu cầu. Anh/chị vui lòng thử lại sau hoặc liên hệ với Ezyvora qua các kênh khác."
Không nên reset form khi API thất bại để khách không phải nhập lại toàn bộ thông tin.
Bước 5: Kiểm thử toàn bộ luồng
Cuối cùng, mở website và thực hiện một đăng ký thử bằng dữ liệu có thể kiểm tra được.
Sau khi bấm Gửi yêu cầu, kiểm tra hai nơi:
Trên website: thông báo gửi thành công phải xuất hiện.
Trên EzyPlatform Admin → EzySupport: phải có yêu cầu mới với đúng thông tin vừa nhập.
Nếu dữ liệu trên EzySupport khớp với thông tin khách nhập trên website, chức năng đã được kết nối thành công.
Kết luận
Với website doanh nghiệp, việc tích hợp EzySupport chỉ cần tập trung vào một mục tiêu chính: đưa yêu cầu liên hệ từ website về hệ thống quản trị để doanh nghiệp có thể tiếp nhận và xử lý. AI có thể sử dụng MCP để tìm đúng chức năng EzySupport, sau đó ghép API vào form hiện có và kiểm thử toàn bộ luồng trước khi đưa website vào sử dụng.