> ## 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.

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

> Learn how to copy the 3 core store links (Shop, Cart, Category), import the ready-made sales flow template (.json), embed links into flow buttons, and walk through the end-to-end customer shopping journey on ChatbotX.

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.

> [card] Three Core Navigation Links
>
> Use authenticated storefront (Shop), shopping cart (Cart), and product category (Category) links powered by the session token.

> [card] 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.

> [card] Seamless Webview Shopping
>
> Customers search items, pick sizes and colors, apply promo codes, and enter delivery details without leaving their messaging app.

> [card] 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. |

> [!WARNING]
>
> 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

[Open](https://chatbotx.io/docs/templates/store-sales-shopping-flow.json)

> [accordion] 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`:
>
> ```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": {}
> }
> ```

### How to Import the Flow Template into Your Workspace

**1. 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.

![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. 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**:

**1. 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`).

![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. 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.

![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. 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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_get_published_link.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=65d1c2e63a26579be2e7b8d669dfca53)

## 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:

**1. 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.

![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. 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.

![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. 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**.

![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. 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**.

![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. 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.

![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. 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.

![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. 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](https://mintcdn.com/chatbotx/gHPfPMJaAWzanKQC/images/ecommerce_shopping_flow_confirmation_chat.png?fit=max\&auto=format\&n=gHPfPMJaAWzanKQC\&q=85\&s=cc91091c1602736e16f8f92418abc06c)

**8. 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.

![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.