Building a Sales Flow and End-to-End Shopping Journey

Once your store settings are configured and your product catalog is published, the next step is connecting your store to conversational flows so customers can browse products, check their cart, and place orders directly inside the chat. This guide covers how to copy the 3 core store links (Shop, Cart, Category), download or build a sales flow with embedded buttons, and walk through the complete customer shopping experience from start to finish.

Three Core Navigation Links

Use authenticated storefront (Shop), shopping cart (Cart), and product category (Category) links powered by the session token.

One-Click Ready-Made Flow Template

Download the pre-configured JSON sales flow template with Shop, Cart, and Category buttons and import it directly into your Workspace.

Seamless Webview Shopping

Customers search items, pick sizes and colors, apply promo codes, and enter delivery details without leaving their messaging app.

Instant Order Sync and Confirmation

Automatically display order receipts, send Messenger confirmation messages, and record orders in your dashboard in real time.

The Three Core Store Links and How to Copy Them

ChatbotX Ecommerce uses the {{shop_token}} system field as a personalized shopping session identifier for each contact. When a buyer taps a button containing a link with {{shop_token}}, the Webview store automatically recognizes the contact, preserves their shopping cart items, and links placed orders directly to their conversation. To build a complete sales flow, you will use three core link types:

Link Type	How to Copy or Construct	Standard URL Format	Purpose in Flows
Shop Link (Main Storefront)	Go to Tools > Ecommerce > Products tab > click Get link at the bottom right corner.	`https://app.chatbotx.io/shop/<WORKSPACE_ID>?token={{shop_token}}`	Opens the main Webview storefront displaying all products, search bar, and filters.
Cart Link (Direct Shopping Cart)	Take your Shop Link and append `/cart` immediately after `<WORKSPACE_ID>` (before `?token={{shop_token}}`).	`https://app.chatbotx.io/shop/<WORKSPACE_ID>/cart?token={{shop_token}}`	Opens the customer’s active shopping cart directly so they can review items, apply coupons, and check out immediately.
Category Link (Filtered Category View)	Go to the Categories tab > click the Actions (…) icon on the desired category > select Get link.	`https://app.chatbotx.io/shop/<WORKSPACE_ID>?token={{shop_token}}&category=<CATEGORY_ID>`	Opens the Webview storefront pre-filtered to display only products belonging to that specific category.

Always embed all three link types (Shop, Cart, Category) directly into Open Website action buttons inside your flows. Do not paste raw store URLs as plain text in chat messages so the interface stays clean and ChatbotX can cryptographically sign {{shop_token}} for each recipient.

Download and Import the Ready-Made Sales Flow Template (.json)

To save setup time, you can download the ready-made store-sales-shopping-flow.json template, which comes pre-built with two connected message nodes (Welcome & Store Menu and Browse Categories) and all three button types (Shop, Cart, Category).

JSON

store-sales-shopping-flow.json

Ready-Made ChatbotX Sales Flow Template

Download

View or Copy the Raw JSON Flow Template (store-sales-shopping-flow.json)

You can also click the Copy icon at the top right of the code block below, paste the content into a local text file, and save it as store-sales-shopping-flow.json:

store-sales-shopping-flow.json

{
  "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": {}
}

How to Import the Flow Template into Your Workspace

Click Import Flow on the Flows Screen

From the left navigation sidebar in ChatbotX, select Flows, click the Import Flow button at the top right of the table, and select the downloaded store-sales-shopping-flow.json file.

Replace Sample URLs with Your Workspace Store Links

Once imported, open BotX Store - Sales & Shopping Flow in the Flow Builder. Click each button (Open BotX Shop, View My Cart, and the category buttons) to replace the sample Workspace ID (11588479527206912) and category IDs with your own store’s Shop Link, Cart Link, and Category Link.

Building or Customizing the Sales Flow and Embedding Store Links

Whether you are building the flow from scratch or customizing the imported template, follow these steps inside the Flow Builder:

Set Up the Store Menu and Category Nodes

In the Flow Builder, design two connected message nodes:

Node 1 (Welcome & Store Menu - Start Node): Contains your welcome text, promotional codes (FASHION10, FREESHIP), and 3 navigation buttons:
- 🛍️ Open BotX Shop: Opens your main Webview storefront.
- 🛒 View My Cart: Opens the customer’s shopping cart directly.
- 📁 Categories: Connects to Node 2 so buyers can browse by department.
Node 2 (Browse Categories): Displays a prompt inviting customers to pick a department along with buttons for each category (such as 👔 Men's Fashion, 👗 Women's Fashion, 👜 Accessories).

Embed Shop, Cart, and Category Links into Open Website Buttons

Click any storefront, cart, or category button to open the Edit Button dialog and configure its parameters:

Name: Enter the button label (for example, 🛍️ Open BotX Shop).
When this button is pressed: Select Open Website.
Link: Paste the corresponding store URL:
- For the main store button: Paste your Shop Link (https://app.chatbotx.io/shop/<WORKSPACE_ID>?token={{shop_token}}).
- For the shopping cart button: Paste your Cart Link (https://app.chatbotx.io/shop/<WORKSPACE_ID>/cart?token={{shop_token}}).
- For the department buttons inside Browse Categories: Paste each category’s Category Link (https://app.chatbotx.io/shop/<WORKSPACE_ID>?token={{shop_token}}&category=<CATEGORY_ID>).
Click the blue Confirm button to save.

Publish the Flow and Copy the Published Link

After embedding your links:

Click the blue Publish button at the top right corner to make your changes live.
Click the three-dot menu (...) next to Publish and select Get Published Link to copy a direct link that launches this flow in Messenger (or select Export anytime you want to download the flow as a .json backup).

Ecommerce Shopping Flow Get Published Link

End-to-End Customer Shopping Journey on ChatbotX

Once your sales flow is published and active on your messaging channel, customers experience a complete 8-step shopping journey from start to finish:

Open the Store from the Welcome Message in Messenger

When a customer taps Get started or opens the published flow link, the chatbot replies with the welcome message featuring promo codes (FASHION10, FREESHIP) and the 3 navigation buttons:

Open BotX Shop: Launches the main Webview storefront.
View My Cart: Opens the customer’s shopping cart directly.
Categories: Displays product categories to browse by department.

The customer taps Open BotX Shop to begin shopping.

Browse the Storefront and Filter Products on Webview

The Webview storefront opens directly inside the chat app, showcasing your catalog:

Customers can type keywords into the Search products bar to find specific items.
Filter the catalog by category (All categories) or brand/supplier (All vendors).
Tap Choose options (for products with variants) or Add to cart on any product card.

Select Product Variants and Add to Cart

On the product detail page, buyers inspect high-resolution product images, read fabric and sizing descriptions, and select variant options:

Choose the desired Size and Color.
Tap Similar to explore comparable products, Share to send the item link, or browse the You may also like recommendations at the bottom.
Adjust item quantity using - / + and tap Add to cart.

Review Shopping Cart and Apply Discount Codes

Tapping the Cart button at the top right corner (or tapping View My Cart in the chat) opens the shopping cart screen:

Adjust item quantities or remove unwanted items.
Under Discount code, eligible automatic coupons such as FREESHIP are applied automatically. Buyers can also tap Apply on available promotional codes displayed in the list (such as FASHION10) or enter a discount code manually.
Review the Order summary breakdown (Subtotal, Coupon discount, Delivery fee, and final Total) and tap Check out.

Fill In Recipient Details and Shipping Address

On the checkout screen, the customer enters their contact and delivery information:

Your details: Enter recipient Name, Phone, and Email.
Delivery: Select Deliver to my address or Pick up in the store, then fill in Country, street Address, Apartment, building, etc., City, State / province, and ZIP / postal code.
Verify the final total at the bottom bar and tap Place order to submit the order.

View Order Receipt on the Webview Confirmation Screen

Right after tapping Place order, the Webview transitions to the order confirmation receipt:

Displays the confirmation banner with the assigned order ID (such as Order #4), placement timestamp, and initial status (Not processed).
Summarizes ordered items, selected variants, quantities, Subtotal, Delivery fee, applied Coupon, final Total, and payment method (Cash on delivery).
Buyers can tap Continue shopping to browse more items or close the Webview to return to the chat.

Receive Automatic Order Confirmation in Messenger

Simultaneously, ChatbotX sends the automatic order confirmation message directly into the buyer’s Messenger conversation:

Confirms that the order at the store has been placed and forwarded to the fulfillment team.
Provides interactive buttons (Continue Shopping, Delivery Info, Customer Care) so the customer can track delivery details or request support anytime.

Ecommerce Shopping Flow Confirmation Chat

Order Synchronizes to the Admin Orders Dashboard

In your ChatbotX admin dashboard, the customer’s new order (for example, Emily Watson with a total of $78.00 and status Not processed) is immediately recorded under Tools > Ecommerce > Orders. From here, your fulfillment team can view full order details, print packing slips, and update order status.

Getting Started

Automation

AI Agents

Contacts

Inbox

Pipelines

Remarketing

Triggers

Tools

Channels

Integrations

Building a Sales Flow and End-to-End Shopping Journey

Three Core Navigation Links

One-Click Ready-Made Flow Template

Seamless Webview Shopping

Instant Order Sync and Confirmation

The Three Core Store Links and How to Copy Them

Download and Import the Ready-Made Sales Flow Template (.json)

How to Import the Flow Template into Your Workspace

Building or Customizing the Sales Flow and Embedding Store Links

End-to-End Customer Shopping Journey on ChatbotX

Three Core Navigation Links

One-Click Ready-Made Flow Template

Seamless Webview Shopping

Instant Order Sync and Confirmation

​The Three Core Store Links and How to Copy Them

​Download and Import the Ready-Made Sales Flow Template (.json)

​How to Import the Flow Template into Your Workspace

​Building or Customizing the Sales Flow and Embedding Store Links

​End-to-End Customer Shopping Journey on ChatbotX

The Three Core Store Links and How to Copy Them

Download and Import the Ready-Made Sales Flow Template (.json)

How to Import the Flow Template into Your Workspace

Building or Customizing the Sales Flow and Embedding Store Links

End-to-End Customer Shopping Journey on ChatbotX