Kết nối Contact Form 7 trên Wordpress với Smax.Bot

Contact Form 7 là một trong những công cụ cho phép người dùng xây dựng form liên hệ trên website phổ biến nhất và lâu đời nhất cho mã nguồn WordPress. Contact Form 7 được cung cấp hoàn toàn miễn phí trong thư viện Plugin của Wordpress.

Ở bài viết này, mình sẽ bỏ qua các bước hướng dẫn cài đặt và sử dụng Contact Form 7 trên Wordpress. Nếu bạn chưa biết cách cái đặt và sử dụng Contact Form 7 trên Wordpress, có thể tham khảo bài viết này: https://wiki.matbao.net/kb/huong-dan-tich-hop-lien-he-contact-form-7-vao-website-wordpress/

Bây giờ. chúng ta sẽ đi vào việc kết nối cấu hình giữa form Liên hệ dùng Contact Form 7 đã có sẵn trên website với Smax.Bot. Khi đó, form liên hệ của bạn trên website sẽ được sử dụng như là 1 webview điền thông tin được tích hợp trong Messenger. Với nguyên lý này, bạn hoàn toàn có thể mở rộng ứng dụng Contact Form 7 trên website bạn cho những mục đích khác nhau khi cần thu thông tin trong chatbot.

Ưu điểm của việc tận dụng Contact Form 7 trên website làm webview tích hợp trong chatbot: Tận dụng được tính năng gửi email của website, lưu trữ được nội dung khách liên hệ trên website mà không phải lưu thêm ra Google Sheets, sử dụng ngay form đã có sẵn trên website... và những ưu điểm khác mà Contact Form 7 mang lại.

Ở ví dụ này, mình sử dụng form mặc định đã có 4 trường thu thông tin như sau:

• [your-name]: Họ tên của khách hàng
• [your-email]: Email của khách hàng
• [your-subject]: Tiêu đề liên hệ
• [your-message]: Nội dung liên hệ

Để tiến hành kết nối, bạn cần thực hiện các bước chuẩn bị như sau:

TẠI KHU VỰC QUẢN LÝ CHATBOT SMAX.BOT

BƯỚC 1: Vào chatbot của bạn tại Smax.bot, tạo 2 block:
- 1 block có để button bấm vào mở form điền liên hệ trên website. (link tại button này sẽ điền vào sau)


- 1 block để gửi thông tin xác nhận sau khi khách bấm Gửi liên hệ đi.


BƯỚC 2: Tạo Broadcast API cho block Xác nhận và copy lại link ở mục Post API.


 

TẠI KHU VỰC QUẢN TRỊ CONTACT FORM 7

BƯỚC 1: Cài thêm plugin Contact form 7 TO API + Basic Auth (https://wordpress.org/plugins/cf7-to-api-basic-auth/) và kích hoạt nó lên.

BƯỚC 2: Ở nội dung form của Contact Form 7, bạn thêm: [hidden user_id default:get]


BƯỚC 3: Cấu hình ở tab API Integration

Ghi chú:
- Điền link Broacast API đã lưu của block Xác nhận vào vị trí số 2.
- Vị trí số 3: khai báo các attribute đổ về chatbot tương ứng với các trường trên form. 2 trường email và user_id bắt buộc phải đặt đúng user_email và user_id, các trường còn lại bạn có thể đặt tuỳ theo ý thích.

BƯỚC 4: Lấy link  Page có chứa form Liên hệ này, cho vào button của chatbot ở block điền thông tin liên hệ. Bổ sung thêm phía sau tham số user_id={{messenger user id}}
Ví dụ link form liên hệ là https://quanchatbot.com/lien-he/ thì link đặt vào button Liên hệ của chatbot sẽ là https://quanchatbot.com/lien-he/?user_id={{messenger user id}}


Đến đây là chúng ta đã hoàn thành việc kết nối form liên hệ sử dụng plugin Contact Form 7 trên website với chatbot Smax.Bot.
Bây giờ bạn có thể tạo ref link để test thử kịch bản này: vào ref link → bấm nút Liên hệ → điền thông tin và gửi đi → nhận tin nhắn xác nhận bên Messenger.

Chúc bạn thành công!