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

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 Botplus.io

Bước 1: Mở form đã tạo, thêm trong form 1 trường hidden:

• session với default value là {{session}}

Bước 2: Copy đoạn code Javascript cho vào mục When submit done

if(typeof(Storage) !== "undefined") {
    var session = document.getElementsByName("session")[0].value;
    if (localStorage.session) {
      localStorage.session = localStorage.session +','+session;
    } else {
      localStorage.session = session;
    }
}

Bước 3: Copy đoạn code Javascript cho vào mục Before </body>  

<script>
let session = document.getElementsByName("session")[0].value;
let checked = localStorage.session;
let result = checked.includes(session);
      if(result == true) {
         document.getElementById("app").innerHTML = "<center><img src='https://i.imgur.com/skVq0sc.png' width='100px'><br><br> Đã gửi thông tin.</center>";
  } 
</script>

2. 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: {{session}} 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 session chọn Bot Attribute {{session}}

• 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ố &session={{session}})

Đế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.