Chuyển đến nội dung chính
Sau khi hoàn tất cài đặt cửa hàng và đăng tải danh mục sản phẩm, bước tiếp theo là đưa cửa hàng vào kịch bản hội thoại để khách hàng có thể mở gian hàng, xem giỏ hàng và đặt đơn ngay trong khung chat. Bài viết này hướng dẫn chi tiết cách lấy 3 loại liên kết cơ bản (Shop, Cart, Category), tải về hoặc tự thiết lập kịch bản bán hàng gắn vào nút bấm và minh họa trọn vẹn hành trình mua hàng thực tế từ A đến Z.

Ba loại liên kết điều hướng cốt lõi

Sử dụng linh hoạt liên kết trang chủ cửa hàng (Shop), giỏ hàng (Cart) và danh mục ngành hàng (Category) có gắn mã định danh phiên mua sắm.

Kịch bản mẫu nhập nhanh chỉ với 1 cú nhấp

Tải tệp kịch bản mẫu định dạng JSON có sẵn cấu trúc nút bấm mở cửa hàng, giỏ hàng và danh mục để nhập ngay vào Workspace của bạn.

Trải nghiệm Webview liền mạch

Khách hàng tìm kiếm sản phẩm, chọn kích cỡ, màu sắc, áp dụng mã giảm giá và điền địa chỉ nhận hàng mà không cần rời ứng dụng nhắn tin.

Đồng bộ đơn hàng và xác nhận tức thì

Tự động hiển thị biên lai đặt hàng, gửi tin nhắn xác nhận trong Messenger và ghi nhận đơn hàng mới về bảng quản trị theo thời gian thực.

Ba loại liên kết cửa hàng cơ bản và cách sao chép

Hệ thống Ecommerce của ChatbotX sử dụng thuộc tính hệ thống {{shop_token}} làm mã định danh phiên mua sắm cá nhân hóa cho từng liên hệ. Khi người mua nhấn vào nút bấm chứa liên kết có gắn {{shop_token}}, cửa hàng Webview sẽ tự động nhận diện đúng tài khoản khách hàng đang trò chuyện, lưu giữ giỏ hàng của người đó và đồng bộ đơn đặt hàng về đúng hộp thư hội thoại. Để xây dựng kịch bản bán hàng hiệu quả, bạn sử dụng 3 loại liên kết cơ bản sau:
Luôn nhúng cả 3 loại liên kết (Shop, Cart, Category) trực tiếp vào nút bấm hành động loại Open Website trong kịch bản. Không dán đường dẫn thô dạng văn bản hiển thị ra màn hình chat để đảm bảo thẩm mỹ và giúp hệ thống tự động ký xác thực biến {{shop_token}} riêng cho từng người nhận.

Tải về và nhập nhanh kịch bản bán hàng mẫu (.json)

Để tiết kiệm thời gian thiết lập từ đầu, bạn có thể tải tệp kịch bản bán hàng mẫu store-sales-shopping-flow.json đã được cấu hình sẵn 2 khối tin nhắn (Welcome & Store Menu và Browse Categories) cùng đầy đủ 3 loại nút bấm (Shop, Cart, Category).
JSON
store-sales-shopping-flow.json
Kịch bản bán hàng mẫu ChatbotX
Tải file
Bạn cũng có thể nhấn biểu tượng Copy ở góc trên bên phải khung mã dưới đây, dán vào một tệp văn bản trên máy tính và lưu lại với tên store-sales-shopping-flow.json:
store-sales-shopping-flow.json

Các bước nhập tệp kịch bản mẫu vào Workspace

1

Nhấn nút Import Flow tại màn hình quản lý kịch bản

Từ menu bên trái của ChatbotX, chọn mục Flows, sau đó nhấn nút Import Flow ở góc trên bên phải bảng danh sách và chọn tệp store-sales-shopping-flow.json vừa tải về.
Ecommerce Shopping Flow Import Button
2

Thay thế đường dẫn cửa hàng bằng liên kết của Workspace bạn

Sau khi nhập thành công, mở kịch bản BotX Store - Sales & Shopping Flow lên. Bạn nhấp vào từng nút bấm (Open BotX Shop, View My Cart và các nút danh mục) để thay thế mã Workspace ID mẫu (11588479527206912) và mã category bằng đúng đường dẫn Shop Link, Cart Link và Category Link lấy từ cửa hàng của bạn.

Hướng dẫn tự thiết lập kịch bản bán hàng và nhúng liên kết vào nút bấm

Nếu muốn tự thiết kế kịch bản hoặc tùy chỉnh chi tiết các nút bấm sau khi nhập tệp mẫu, bạn thực hiện theo các bước sau:
1

Thiết kế hai khối tin nhắn điều hướng cửa hàng và danh mục

Trong trình chỉnh sửa kịch bản (Flow Builder), thiết lập cấu trúc gồm 2 khối tin nhắn kết nối với nhau:
  • Khối 1 (Welcome & Store Menu - Khối bắt đầu): Chứa nội dung văn bản chào mừng, giới thiệu mã giảm giá (FASHION10, FREESHIP) kèm 3 nút bấm:
    • 🛍️ Open BotX Shop: Mở trang chủ cửa hàng.
    • 🛒 View My Cart: Mở trực tiếp giỏ hàng.
    • 📁 Categories: Nối sang khối thứ hai để khách chọn ngành hàng.
  • Khối 2 (Browse Categories): Hiển thị lời dẫn chọn danh mục kèm các nút bấm tương ứng với từng ngành hàng cụ thể (như 👔 Men's Fashion, 👗 Women's Fashion, 👜 Accessories).
Ecommerce Shopping Flow Builder Nodes
2

Nhúng liên kết Shop, Cart và Category vào nút bấm Open Website

Nhấp vào từng nút bấm mở cửa hàng, giỏ hàng hoặc danh mục để mở hộp thoại Edit Button và cấu hình:
  • Name: Nhập tên hiển thị trên nút bấm (ví dụ: 🛍️ Open BotX Shop).
  • When this button is pressed: Chọn hành động Open Website.
  • Link: Dán đường dẫn tương ứng:
    • Với nút mở cửa hàng: Dán Shop Link (https://app.chatbotx.io/shop/<WORKSPACE_ID>?token={{shop_token}}).
    • Với nút xem giỏ hàng: Dán Cart Link (https://app.chatbotx.io/shop/<WORKSPACE_ID>/cart?token={{shop_token}}).
    • Với các nút ngành hàng ở khối Browse Categories: Dán Category Link của từng danh mục (https://app.chatbotx.io/shop/<WORKSPACE_ID>?token={{shop_token}}&category=<CATEGORY_ID>).
  • Nhấn nút Confirm màu xanh để lưu cấu hình nút bấm.
Ecommerce Shopping Flow Edit Button
3

Xuất bản kịch bản và lấy đường dẫn chạy thử (Get Published Link)

Sau khi gắn đầy đủ các liên kết:
  • Nhấn nút Publish màu xanh ở góc trên bên phải để xuất bản kịch bản.
  • Nhấn vào biểu tượng dấu ba chấm (...) cạnh nút Publish và chọn Get Published Link để sao chép đường dẫn kích hoạt kịch bản trực tiếp trên Messenger (hoặc chọn Export khi bạn muốn xuất kịch bản thành tệp .json để chia sẻ sang Workspace khác).
Ecommerce Shopping Flow Get Published Link

Quy trình mua hàng thực tế từ A đến Z trên ChatbotX

Sau khi xuất bản kịch bản bán hàng và kích hoạt trên kênh hội thoại, khách hàng sẽ trải nghiệm quy trình mua sắm khép kín qua 8 bước dưới đây:
1

Mở cửa hàng từ nút bấm trong cuộc trò chuyện Messenger

Khi khách hàng nhấn Get started hoặc truy cập từ liên kết kịch bản, chatbot lập tức phản hồi tin nhắn chào mừng kèm thông tin mã ưu đãi (FASHION10, FREESHIP) và 3 nút điều hướng:
  • Open BotX Shop: Mở trang chủ cửa hàng Webview.
  • View My Cart: Mở thẳng vào giỏ hàng của khách.
  • Categories: Chọn xem theo danh mục ngành hàng.
Khách hàng nhấn vào nút Open BotX Shop để bắt đầu mua sắm.
Ecommerce Shopping Flow Welcome Chat
2

Duyệt gian hàng và tìm kiếm sản phẩm trên Webview

Cửa hàng Webview mở ra ngay bên trong ứng dụng với danh sách các mặt hàng đang kinh doanh:
  • Khách hàng có thể gõ từ khóa vào ô Search products để tìm nhanh sản phẩm.
  • Sử dụng bộ lọc All categories để lọc theo danh mục hoặc All vendors để lọc theo thương hiệu.
  • Nhấn nút Choose options (đối với sản phẩm có nhiều phân loại) hoặc Add to cart trên thẻ sản phẩm mong muốn.
Ecommerce Shopping Flow Storefront
3

Chọn biến thể kích cỡ, màu sắc và thêm vào giỏ hàng

Trên màn hình chi tiết sản phẩm, người mua xem hình ảnh phóng lớn, đọc thông tin mô tả chất liệu và lựa chọn phân loại hàng:
  • Chọn kích cỡ (Size) và màu sắc (Color) phù hợp.
  • Có thể nhấn Similar để xem các mặt hàng tương tự, Share để chia sẻ sản phẩm cho bạn bè hoặc lướt xem mục gợi ý You may also like phía dưới.
  • Điều chỉnh số lượng cần mua bằng nút - / + và nhấn nút Add to cart ở thanh dưới cùng.
Ecommerce Shopping Flow Product Detail
4

Kiểm tra giỏ hàng và áp dụng mã giảm giá

Nhấn vào nút Cart ở góc trên bên phải màn hình (hoặc mở từ nút View My Cart trong khung chat) để truy cập giỏ hàng:
  • Kiểm tra danh sách sản phẩm đã chọn, điều chỉnh số lượng hoặc xóa mặt hàng không cần thiết.
  • Tại khu vực Discount code, các mã ưu đãi tự động như FREESHIP sẽ được hệ thống tự động áp dụng ngay khi giỏ hàng đạt điều kiện. Ngoài ra, khách hàng có thể nhấn nút Apply ở danh sách mã khuyến mãi hiển thị sẵn (như FASHION10) hoặc nhập mã code vào ô trống.
  • Xem chi tiết bảng Order summary (bao gồm tiền hàng tạm tính Subtotal, số tiền giảm trừ Coupon, phí vận chuyển Delivery và tổng cộng Total), sau đó nhấn nút Check out.
Ecommerce Shopping Flow Cart Discount
5

Điền thông tin người nhận và địa chỉ giao hàng

Tại biểu mẫu thanh toán, khách hàng cung cấp thông tin liên hệ và địa chỉ nhận hàng:
  • Your details: Điền họ tên (Name), số điện thoại (Phone) và địa chỉ email (Email).
  • Delivery: Chọn phương thức giao hàng tận nơi (Deliver to my address) hoặc nhận trực tiếp tại cửa hàng (Pick up in the store), sau đó nhập quốc gia (Country), địa chỉ đường phố (Address), số phòng/tòa nhà (Apartment, building, etc.), thành phố (City), tỉnh/bang (State / province) và mã bưu chính (ZIP / postal code).
  • Kiểm tra tổng số tiền thanh toán cuối cùng và nhấn nút Place order để xác nhận đặt hàng.
Ecommerce Shopping Flow Checkout Form
6

Nhận biên lai đặt hàng thành công trên Webview

Ngay khi nhấn đặt hàng, màn hình Webview hiển thị biên lai xác nhận đơn hàng đã được khởi tạo thành công:
  • Hiển thị thông báo cảm ơn kèm mã số đơn hàng (ví dụ: Order #4), thời gian đặt đơn và trạng thái chờ xử lý (Not processed).
  • Tóm tắt chi tiết các mặt hàng, số lượng, biến thể đã chọn, phí giao hàng, mã giảm giá, tổng số tiền cần thanh toán và phương thức thanh toán (Cash on delivery).
  • Khách hàng có thể nhấn Continue shopping để quay lại cửa hàng hoặc đóng Webview để trở về cuộc trò chuyện.
Ecommerce Shopping Flow Order Placed
7

Nhận tin nhắn xác nhận đơn hàng tự động trong Messenger

Đồng thời với biên lai trên Webview, chatbot tự động gửi tin nhắn xác nhận đơn hàng trực tiếp vào cuộc trò chuyện Messenger của người mua:
  • Thông báo đơn hàng tại cửa hàng đã được ghi nhận và chuyển sang bộ phận đóng gói, giao vận.
  • Hiển thị các nút tương tác nhanh (Continue Shopping, Delivery Info, Customer Care) giúp khách hàng tra cứu thông tin hoặc liên hệ hỗ trợ bất cứ lúc nào.
Ecommerce Shopping Flow Confirmation Chat
8

Đơn hàng tự động đồng bộ về bảng quản trị Orders

Tại giao diện quản trị ChatbotX, đơn đặt hàng mới của khách (ví dụ: đơn hàng của Emily Watson với tổng giá trị $78.00 và trạng thái Not processed) lập tức xuất hiện trong tab Orders của công cụ Ecommerce. Từ đây, đội ngũ vận hành có thể mở xem chi tiết, in phiếu giao hàng và cập nhật trạng thái xử lý đơn.
Ecommerce Shopping Flow Order Recorded