> ## Documentation Index > Fetch the complete documentation index at: https://chatbotx.io/docs/llms.txt > Use this file to discover all available pages before exploring further. # Tạo kịch bản bán hàng và quy trình mua hàng từ A đến Z > Hướng dẫn sao chép 3 loại liên kết cửa hàng cơ bản (Shop, Cart, Category), nhập kịch bản bán hàng mẫu (.json), nhúng vào nút bấm và trải nghiệm quy trình mua hàng từ A đến Z trên ChatbotX. 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. > [card] 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. > [card] 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. > [card] 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. > [card] Đồ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: | Loại liên kết | Nơi lấy liên kết | Cấu trúc đường dẫn chuẩn | Công dụng trong kịch bản | | - | - | - | - | | **Liên kết cửa hàng (Shop Link)** | Vào **Tools** > **Ecommerce** > tab **Products** > nhấn nút **Get link** ở góc dưới bên phải màn hình. | `https://app.chatbotx.io/shop/?token={{shop_token}}` | Mở trang chủ cửa hàng Webview hiển thị toàn bộ sản phẩm, thanh tìm kiếm và bộ lọc. | | **Liên kết giỏ hàng (Cart Link)** | Từ đường dẫn **Shop Link**, thêm hậu tố `/cart` ngay phía sau mã `` (trước cụm `?token={{shop_token}}`). | `https://app.chatbotx.io/shop//cart?token={{shop_token}}` | Mở thẳng vào màn hình Giỏ hàng hiện tại của khách để kiểm tra món đã chọn, áp dụng mã ưu đãi và thanh toán ngay. | | **Liên kết danh mục (Category Link)** | Vào tab **Categories** > nhấn biểu tượng **Actions (...)** tại dòng danh mục cần lấy > chọn **Get link**. | `https://app.chatbotx.io/shop/?token={{shop_token}}&category=` | Mở giao diện cửa hàng đã lọc sẵn chỉ hiển thị các sản phẩm thuộc danh mục ngành hàng được chọn. | > [!WARNING] > > 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 [Open](https://chatbotx.io/docs/templates/store-sales-shopping-flow.json) > [accordion] Xem hoặc sao chép trực tiếp mã JSON kịch bản mẫu (store-sales-shopping-flow\.json) > > 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`: > > ```json store-sales-shopping-flow.json theme={null} > { > "formatVersion": 2, > "exportedAt": "2026-10-28T10:36:21.820Z", > "source": { > "workspaceId": "11588479527206912", > "flowId": "11755526156762809" > }, > "flows": [ > { > "name": "BotX Store - Sales & Shopping Flow", > "active": true, > "enableInInbox": false, > "startNodeId": "11755526156681022", > "nodes": [ > { > "id": "1793094000000001", > "data": { > "name": "Welcome & Store Menu", > "details": { > "steps": [ > { > "id": "1793094000000006", > "text": "Welcome to BotX Store! 🛍️✨\n\nDiscover the latest premium fashion collections with exclusive perks:\n• 10% OFF orders $30+ with code: FASHION10\n• FREE SHIPPING on 2+ items with code: FREESHIP\n\nTap a button below to explore our store or view your cart:", > "buttons": [ > { > "id": "1793094000000003", > "label": "🛍️ Open BotX Shop", > "steps": [], > "beforeStep": { > "id": "1793094000000007", > "url": "https://app.chatbotx.io/shop/11588479527206912?token={{shop_token}}", > "stepType": "openWebsite", > "browserSize": 100 > }, > "buttonType": "openWebsite" > }, > { > "id": "1793094000000004", > "label": "🛒 View My Cart", > "steps": [], > "beforeStep": { > "id": "1793094000000008", > "url": "https://app.chatbotx.io/shop/11588479527206912/cart?token={{shop_token}}", > "stepType": "openWebsite", > "browserSize": 100 > }, > "buttonType": "openWebsite" > }, > { > "id": "1793094000000005", > "label": "📂 Categories", > "steps": [], > "beforeStep": { > "id": "1793094000000010", > "nodeId": "1793094000000002", > "stepType": "startAnotherNode", > "viewOnly": true > }, > "buttonType": "startAnotherNode" > } > ], > "stepType": "sendText" > } > ], > "beforeStep": { > "id": "1793094000000009", > "channel": "omnichannel", > "stepType": "chooseChannel" > }, > "quickReplies": [] > }, > "isStartNode": true > }, > "type": "sendMessage", > "measured": { > "width": 288, > "height": 372 > }, > "position": { > "x": 100, > "y": 100 > } > }, > { > "id": "1793094000000002", > "data": { > "name": "Browse Categories", > "details": { > "steps": [ > { > "id": "1793094000000011", > "text": "Browse by Category 🏷️\n\nTap any category below to view curated collections directly in our web shop:", > "buttons": [ > { > "id": "1793094000000006", > "label": "👔 Men's Fashion", > "steps": [], > "beforeStep": { > "id": "1793094000000012", > "url": "https://app.chatbotx.io/shop/11588479527206912?token={{shop_token}}&category=11755456618282852", > "stepType": "openWebsite", > "browserSize": 100 > }, > "buttonType": "openWebsite" > }, > { > "id": "1793094000000007", > "label": "👗 Women's Fashion", > "steps": [], > "beforeStep": { > "id": "1793094000000013", > "url": "https://app.chatbotx.io/shop/11588479527206912?token={{shop_token}}&category=11755456801573617", > "stepType": "openWebsite", > "browserSize": 100 > }, > "buttonType": "openWebsite" > }, > { > "id": "1793094000000008", > "label": "👜 Accessories", > "steps": [], > "beforeStep": { > "id": "1793094000000014", > "url": "https://app.chatbotx.io/shop/11588479527206912?token={{shop_token}}&category=11755456981420363", > "stepType": "openWebsite", > "browserSize": 100 > }, > "buttonType": "openWebsite" > } > ], > "stepType": "sendText" > } > ], > "beforeStep": { > "id": "1793094000000014", > "channel": "omnichannel", > "stepType": "chooseChannel" > }, > "quickReplies": [] > }, > "isStartNode": false > }, > "type": "sendMessage", > "measured": { > "width": 288, > "height": 372 > }, > "position": { > "x": 550, > "y": 100 > } > } > ], > "edges": [ > { > "id": "edge_1793094000000010", > "source": "1793094000000001", > "target": "1793094000000002", > "sourceHandle": "1793094000000005", > "targetHandle": "1793094000000002" > } > ] > } > ], > "customFields": {}, > "botFields": {} > } > ``` ### 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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_import_button.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=06c25c0fd2b5e2535b7f044fde7617f4) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_builder_nodes.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=520aee5206c62c7e060dad7145608edb) **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/?token={{shop_token}}`). * Với nút xem giỏ hàng: Dán **Cart Link** (`https://app.chatbotx.io/shop//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/?token={{shop_token}}&category=`). * Nhấn nút **Confirm** màu xanh để lưu cấu hình nút bấm. ![Ecommerce Shopping Flow Edit Button](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_edit_button.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=735f024f3efbf20be7c375d9c8cb88a8) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_get_published_link.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=65d1c2e63a26579be2e7b8d669dfca53) ## 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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_welcome_chat.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=b77956cabdf9d11552f29828b8dfc28b) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_storefront.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=757623676ecfd0cb5f7ce228d6558220) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_product_detail.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=59580bd16386afcc0c6cca78dd1c9e93) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_cart_discount.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=bab8059183be89067832d5a0a481bbb2) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_checkout_form.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=76416f30fa538395945334ec59ffc5ac) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_order_placed.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=3013d2632033ada3158cf721b1806cd4) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_confirmation_chat.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=cc91091c1602736e16f8f92418abc06c) **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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_order_recorded.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=23faaccdc13a07e2a03258dc2680f661) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.