Thêm tính năng khoá form sau khi đã gửi thông tin

admin Thứ ba - 12/10/2021 01:03
Nếu bạn đang dùng Form Builder để tạo ra các webview cho khách hàng điền thông tin trong chatbot, sẽ thấy thỉnh thoảng có vài vị khách quay trở lên lại các button cũ để mở form và điền lại thông tin khách. Việc này nhiều lúc làm kịch bản chatbot bị chạy sai luồng.

Vì vậy, ở bài viết này, mình sẽ hướng dẫn bạn cách bổ sung thêm tính năng: khoá form lại nếu khách hàng đã điền và gửi thông tin xong. Điều này có ý nghĩa sẽ tránh được tình trạng khách hàng mở lại webview chứa form ở button cũ phía trên để điền thông tin khác.
 


KH bấm button mở webview điền form, giao diện hiển thị khách sẽ nhìn thấy như sau:
- Nếu chưa điền thông tin và gửi đi thì sẽ hiện đầy đủ các trường thông tin để khách điền.
- Nếu ở form này KH đã điền thông tin rồi thì sẽ hiện thông báo Đã gửi thông tin, đồng thời các trường thông tin sẽ được ẩn hết.

Ở bài viết này, mình chỉ tập trung vào phần hướng dẫn nâng cao, không có hướng dẫn cấu hình form từ đầu. Nếu bạn vẫn chưa biết tạo form điền thông tin, hãy xem hướng dẫn này: https://bot.vn/hoc-chatbot/chatbot-voi-botplus-io/huong-dan-tinh-nang-form-builder-43.html

Bây giờ chúng ta bắt đầu nào!

1. Tại Google Sheets

Bước 1: Tạo 1 sheets có ô A1 là check_form dùng để lưu các phiên Gửi thông tin.

Bước 2: Chia sẻ chế độ chỉ xem cho bất kỳ ai có link và lưu lại sheet id.
 
 

2. Tại Botplus.io

Bước 1: Mở form đã tạo, thêm trong form 2 trường hidden:
  • sheet_id với Default Value là sheet id ở bước 1.
 
  • check_form với default value là {{check_form}}

Bước 2: Copy đoạn code Javascript cho vào mục Before </body>
 
<script>
var check_form = document.getElementsByName("check_form")[0].value;
sheet_id = document.getElementsByName("sheet_id")[0].value;
$(document).ready ( function(){
   getText();
});
function reqListener () {
  if (this.status==200)
{
   var checked = this.responseText.includes(check_form);
      if(checked) {
         document.getElementById("app").innerHTML = "<center><img src='https://i.imgur.com/skVq0sc.png' width='100px'><br><br> Đã gửi thông tin.</center>";
      } 
}
}
function getText() {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "https://sheets.googleapis.com/v4/spreadsheets/"+sheet_id+"/values/A1:Z100000?key=AIzaSyCRcC9fCo-Wrpf9oLTTB1VWLskAI3L04g8");
oReq.send();
}
</script>

Bước 3: Mục Push data thêm Google Sheet và nhập sheet id ở bước 1 -> chọn lưu check_form vào cột check_form
 

3. Tại Smax.Bot

Bước 1: Thêm 1 thẻ Set attribute phía trên chỗ xuất hiện button điền thông tin: {{check_form}} có value là hàm: [=TIMENOW({{timezone}},"X")]

Bước 2: Cấu hình button Điền thông tin:
  • Nếu bạn dùng loại button Botplus.io: Chú ý phần Request, mục Key check_form chọn Bot Attribute {{check_form}}
​​​​​​​
  • Nếu bạn dùng loại button url thì copy lại link mà Botplus.io đã tạo (có thêm tham số &check_form={{check_form}})

Đến lúc này, bạn hãy thử test kịch bản xem nhé! Sau khi gửi thông tin xong, bạn bấm mở form ở button cũ lên lại sẽ thấy thông báo đã gửi và sẽ không cho điền lại thông tin nữa!
Chúc bạn thành công.
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây