Tạo WebForm bằng Webcake

Demo: https://m.me/ahachatdemo?ref=webcakeform

Webcake là nền tảng thiết kế Landing Page nằm trong hệ sinh thái Pancake và có những tính năng vượt trội so với các nền tảng khác:

  • Đồng bộ dữ liệu với POS - Pancake: Đơn hàng, sản phẩm, tồn kho,...
  • Đồng bộ với PancakeStore: Sản phẩm, đơn hàng, tên miền về website,...

Hôm nay tôi sẽ hướng dẫn cách để gắn lưu thông tin khách hàng nhập trên form của Webcake về chatbot.

1. Tạo giao diện Webcake và nhúng SDK

  • Nhúng SDK của AhaChat vào Webcake

Vào trang Chỉnh sửa của Webcake chọn Cài đặt → HTML/JavaScript và thêm đoạn này vào khung Trước thẻ </body>

<script src="https://ahachat.com/libs/ladipage.sdk.js"></script>

2. Thêm domain của Webcake vào Whitelist của bot

3. Tạo url để nhúng vào nút bấm trong kịch bản với định dạng

Bạn copy kịch bản mẫu tại đây, thay thế URL và BOT ID tương ứng của mình:

https://app.ahachat.com/share-story-to-bot/ab101e8e267285c0296b6ffba2e09cd9mlP4baGzsM3441327

https://ahachat.com/ladipage?url=(ladipage_url)&block_id=(block_id)

Trong đó:

  • ladipage_url: Là địa chỉ url của Webcake khi xuất bản

  • block_id: Là block muốn chuyển tiếp sau khi submit.

Sau khi thêm ta có mẫu:

https://ahachat.com/ladipage?url=https://preview.webcake.io/demo/v4/e3f83a48-bfde-4cd8-8f59-8891f76432af&block_id=53778048

4. Gắn Url đã tạo bên trên vào nút bấm trong kịch bản

Chọn hành động → Mở link website

Nhập Url vào → Kích cỡ chọn 100%

Test và xem kết quả

Các trường thông tin bạn nhập sẽ tự động lưu vào thuộc tính mới với tên thuộc tính tương tự thuộc tính trên Webcake

Để tắt Webcake sau khi điền thông tin bạn chọn nút bấm ở popup cảm ơn → Nâng cao → Sự kiện → và chọn sự kiện là Close messenger view

5. Lưu thông tin với Multi Form

Multi-form cho phép bạn tạo nhiều form đăng ký điều hướng khách hàng điền lần lượt thông tin và liên kết đến 1 form tổng để hoàn thành đăng kí

Để có thể tạo Multi Form trên Webcake bạn xem hướng dẫn tại đây

Bạn cũng thực hiện các bước (1) → (4) như trên. Tại Form tổng, tức là Form cuối cũng sau khi bấm nút Submit thì trả thông tin đã điền về Chatbot bạn bấm vào dấu + ở phần Tùy chỉnh nâng cao → thêm Class tùy chỉnh là root-form

Mục đích của việc này giúp Chatbot nhận biết và không gửi data khi khách bấm nút ở Form 1