Khi khách hàng truy cập website doanh nghiệp và quan tâm đến một dịch vụ, không phải ai cũng muốn điền form hoặc gửi email. Nhiều khách hàng muốn nhắn tin trực tiếp qua Zalo hoặc Facebook để được tư vấn nhanh hơn. Vì vậy, ngoài form Đăng ký tư vấn, website có thể bổ sung các phương thức liên hệ:

  • Website
  • →
  • Zalo OA / Facebook
  • →
  • Nhắn tin trực tiếp với doanh nghiệp

Trong bài này, chúng ta sẽ tiếp tục sử dụng phương pháp Vibe Coding để thêm hai kênh liên hệ này vào website doanh nghiệp mà không cần tự viết toàn bộ giao diện.

Bước 1: Chuẩn bị Zalo Official Account và Facebook

Trước khi chỉnh sửa website, doanh nghiệp cần có các kênh chính thức để khách hàng liên hệ.

  • Với Zalo, doanh nghiệp nên sử dụng Zalo Official Account (Zalo OA) thay vì tài khoản Zalo cá nhân. Zalo OA được thiết kế cho doanh nghiệp và tổ chức, cho phép khách hàng quan tâm, nhắn tin và theo dõi thông tin từ thương hiệu.
  • Với Facebook, doanh nghiệp cần có Facebook Page. Đây sẽ là nơi khách hàng được chuyển đến khi chọn liên hệ qua Facebook.

Sau khi đã có hai kênh này, hãy chuẩn bị:

  • Zalo OA:[Đường dẫn Zalo OA của doanh nghiệp]
  • Facebook:[Đường dẫn Facebook Page của doanh nghiệp]

Đây là thông tin chúng ta sẽ cung cấp cho AI ở các bước tiếp theo.

Bước 2: Xác định vị trí hiển thị trên website

Không nên đặt Zalo và Facebook ở quá nhiều vị trí khiến website trở nên rối.

Với website doanh nghiệp, có thể ưu tiên ba vị trí:

  • Trang Liên hệ.
  • Footer.
  • Nút liên hệ nổi ở góc màn hình.

Trong đó, nút liên hệ nổi đặc biệt hữu ích vì khách hàng có thể bắt đầu trò chuyện dù đang xem Trang chủ, Dịch vụ hay Blog. Ví dụ:

Zalo

Hai nút liên hệ đặt cố định ở góc phải màn hình

Trên mobile, các nút cần đủ lớn để thao tác bằng tay nhưng không được che nội dung hoặc các CTA quan trọng.

Bước 3: Cho AI kiểm tra website hiện tại

Mở dự án website trong VS Code và mở Claude Code hoặc Codex.

Chưa nên yêu cầu AI thêm ngay các nút liên hệ. Trước tiên, hãy để AI kiểm tra cấu trúc hiện tại.

Prompt mẫu

"Hãy kiểm tra mã nguồn website hiện tại để chuẩn bị bổ sung các phương thức liên hệ Zalo OA và Facebook.

Hãy xác định:

  • Component hoặc file đang xử lý Header.
  • Footer.
  • Trang Liên hệ.
  • Các nút liên hệ hoặc social hiện có.
  • CSS và JavaScript liên quan.
  • Website hiện có component nào có thể tái sử dụng hay không.

Chưa chỉnh sửa code.

Hãy đề xuất vị trí phù hợp để hiển thị Zalo OA và Facebook mà không ảnh hưởng đến giao diện hiện tại."

AI kiểm tra cấu trúc website trước khi thêm Zalo OA và Facebook
AI kiểm tra cấu trúc website trước khi thêm Zalo OA và Facebook

Mục tiêu của bước này là để AI hiểu website trước khi chỉnh sửa, tránh tạo thêm component hoặc CSS không cần thiết.

Bước 4: Thêm Zalo OA và Facebook vào trang Liên hệ

Sau khi AI đã hiểu cấu trúc website, hãy bắt đầu từ trang Liên hệ.

Ngoài số điện thoại, email hoặc form đăng ký tư vấn hiện có, bổ sung khu vực Liên hệ với chúng tôi qua:

  • Zalo OA — Nhắn tin với chúng tôi trên Zalo — nút Liên hệ qua Zalo.
  • Facebook — Theo dõi và nhắn tin với chúng tôi trên Facebook — nút Liên hệ qua Facebook.

Prompt mẫu

"Hãy bổ sung hai phương thức liên hệ vào trang Liên hệ hiện tại:

  • Zalo OA: [Đường dẫn Zalo OA]
  • Facebook: [Đường dẫn Facebook Page]

Yêu cầu:

  • Giữ nguyên form liên hệ hiện tại.
  • Tái sử dụng component và CSS nếu có thể.
  • Hiển thị icon, tên kênh và nút liên hệ.
  • Khi người dùng bấm vào, mở đúng Zalo OA hoặc Facebook của doanh nghiệp.
  • Link ngoài mở ở tab mới khi phù hợp.
  • Giao diện phải thống nhất với Brand Guideline hiện tại.
  • Responsive trên desktop, tablet và mobile.

Không thay đổi những phần khác của trang."

Sau khi AI hoàn thành, Preview trang Liên hệ để kiểm tra.

Trang Liên hệ sau khi bổ sung Zalo OA và Facebook
Trang Liên hệ sau khi bổ sung Zalo OA và Facebook

Bước 5: Tạo nút liên hệ nổi

Nếu muốn khách hàng có thể liên hệ nhanh từ bất kỳ trang nào, chúng ta có thể thêm một nhóm nút nổi ở góc dưới bên phải.

Ở trạng thái bình thường, website chỉ cần hiển thị một nút Liên hệ. Khi khách bấm vào, các lựa chọn xuất hiện:

Nhắn tin qua Zalo
Nhắn tin qua Facebook
Liên hệ

Nút liên hệ nổi mở ra hai lựa chọn Zalo và Facebook

Cách này gọn hơn việc để nhiều nút nổi riêng biệt trên màn hình.

Prompt mẫu

"Hãy tạo một nút liên hệ nổi ở góc dưới bên phải website.

Khi người dùng bấm vào nút, hiển thị hai lựa chọn:

  • Zalo OA: [Đường dẫn Zalo OA]
  • Facebook: [Đường dẫn Facebook Page]

Yêu cầu:

  • Nút xuất hiện trên các trang chính của website.
  • Không che nội dung hoặc CTA quan trọng.
  • Trên mobile cần thu gọn hợp lý.
  • Có thể đóng danh sách sau khi mở.
  • Có aria-label phù hợp cho các nút.
  • Không sử dụng animation gây mất tập trung.
  • Tái sử dụng CSS và JavaScript hiện có nếu phù hợp.
  • Giữ đúng màu sắc và phong cách của website.

Sau khi hoàn thành hãy dừng lại để tôi Preview."

Sau khi AI hoàn thành, chưa nên xuất bản website ngay. Kiểm tra xem website có chuyển tới đúng Zalo OA của doanh nghiệp hay không.

Kiểm tra nút liên hệ nổi chuyển đúng tới Zalo OA của doanh nghiệp
Kiểm tra nút liên hệ nổi chuyển đúng tới Zalo OA của doanh nghiệp

Bước 6: Không hard-code thông tin liên hệ khi website cần quản trị

Nếu Zalo OA và Facebook chỉ được sử dụng cố định trong thời gian dài, việc cấu hình chúng trực tiếp trong website có thể đủ ở giai đoạn đầu.

Tuy nhiên, với website doanh nghiệp đã kết nối dữ liệu thật với EzyPlatform, tốt hơn nên xem các thông tin sau là dữ liệu doanh nghiệp, thay vì nội dung giao diện:

  • Facebook URL
  • ·
  • Zalo OA URL
  • ·
  • Email
  • ·
  • Số điện thoại

Khi đó có thể tiếp tục yêu cầu AI kiểm tra EzyPlatform/MCP để xem website hiện đã có nơi lưu các thông tin này hay chưa.

Prompt mẫu

"Hãy sử dụng MCP Server để kiểm tra EzyPlatform hiện tại.

Tôi muốn quản lý các thông tin liên hệ của doanh nghiệp gồm:

  • Zalo OA URL.
  • Facebook URL.
  • Email.
  • Số điện thoại.

Hãy kiểm tra xem EzyPlatform hiện đã có dữ liệu hoặc Ezy Function phù hợp để quản lý và lấy các thông tin này hay chưa.

Ưu tiên tái sử dụng chức năng hiện có.

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

Nếu đã có chức năng phù hợp, AI có thể kết nối website với dữ liệu đó. Sau này khi doanh nghiệp thay đổi Facebook hoặc Zalo OA, chỉ cần cập nhật trên hệ thống quản trị thay vì tìm và sửa URL trong mã nguồn.

AI kiểm tra dữ liệu thông tin liên hệ qua MCP Server
AI kiểm tra dữ liệu thông tin liên hệ qua MCP Server

Kết luận

Việc bổ sung Zalo OA và Facebook giúp khách truy cập có thêm lựa chọn để liên hệ ngay trên kênh họ quen sử dụng. Với website doanh nghiệp, chỉ cần triển khai ở những vị trí cần thiết như trang Liên hệ, Footer và nút liên hệ nhanh, đồng thời giữ thông tin các kênh tập trung để thuận tiện quản lý về sau.