Skip to main content
With the WebView you access a catalog embedded inside WhatsApp that lets you offer a complete shopping experience without depending on the restrictions of Meta’s native catalog.
Shopping experience in WebView

Requirements

For the WebView to work inside WhatsApp, your account must be verified by Meta.
To display products in the WebView you need them loaded in Jelou Shop:

Shopify

Sync from Shopify

VTEX

Sync from VTEX

WooCommerce

Sync from WooCommerce

API

Upload products directly via API

Installation

1

Create a skill

Create a new skill for the e-commerce flow. If this is your first time, see the guide Your first skill.
2

Configure the AI Agent node

Use an AI Agent node and choose how it connects to your store:
In the Tools tab, select add tool and choose Shopify. The Jelou Shop MCP is included automatically with the integration.
Add Shopify tool in the AI Agent node
In the Tools tab, select add tool and choose WooCommerce. The Jelou Shop MCP is included automatically with the integration.
In the Tools tab, select add tool and choose Jelou Shop.
Import Jelou Shop MCP from the AI Agent node
Configure the following tools:
ToolDescriptionPause
Send message with optionsSend quick-reply buttons to the user
Get and clear cartGet the cart and clear it (checkout)
Send cart WebViewSend the cart as an interactive webview
Search and send products WebViewSearch products and send results as a webview
Clear cartRemove all products from the cart
Send catalog WebViewSend the full catalog as a webview
These tools accept optional parameters:
  • search_and_send_products_webview: category, branchCode, search_mode (semantic|ilike).
  • send_catalog_webview and send_cart_webview: branchCode, cart_id.
  • get_and_clear_cart: debit_stock to debit inventory. Returns cart_id for future cart restoration.
  • Several tools accept cart_id to restore a cart from a prior checkout.
Then configure the following prompt:
## 🎯 Role
You are a friendly and visual eCommerce agent (use icons). You guide the user through their shopping experience until they request: a human advisor, to exit, or to pay.

## 🧰 Tools
- Search products, categories, promotions → **search_and_send_products_webview**
- View full catalog → **send_catalog_webview**
- View cart → **send_cart_webview**
- Clear cart → **clean_cart**
- Payment / Checkout → **get_and_clear_cart** (if cart is empty, inform and offer to search for products)
- Show options with buttons → **send_message_with_options**

## 📏 Rules
- Never invent prices, promotions, or benefits.
- Never show technical errors or tool names to the user.
- Use tools instead of assuming information.

## Successful order
If you receive a message indicating "Your order has been placed successfully", use **send_message_with_options** with:
  Text: ✅ Order confirmed!\n💰 Total to pay: $xx
  Buttons: 💳 Go to payment, 🔍 Add more, 🛒 View my cart

## 🧩 Completion
- Human advisor → end_function: { "flow": "advisor" }
- Exit → end_function: { "flow": "exit" }
- Payment → Run **get_and_clear_cart**. If successful → end_function: { "flow": "payment", "total": [total], "cart": [detail] }

Always run end_function with: { "output_schema": "<json>" }
3

Access cart information

You can get the cart data at any time using:
const cartData = $memory.getJson("cartData");
The cartData object contains the following structure:
{
  "data": [
    {
      "item_id": 36629,
      "image_url": "https://example.com/blue-tshirt.png",
      "product_id": "95f851fb-0c3a-4c85-bc25-cf66848894ad",
      "product_name": "Jelou T-Shirt",
      "quantity": 1,
      "sku": "jelou-tshirt-blue-l",
      "price": "25.000000",
      "price_without_tax": 21.74,
      "discount": null,
      "discount_type": null,
      "discount_value": 25,
      "discount_value_without_tax": 21.74,
      "product_variation_id": "019c47d9-7061-7305-9e7c-c2e92af99781",
      "variation": {
        "id": "019c47d9-7061-7305-9e7c-c2e92af99781",
        "sku": "jelou-tshirt-blue-l",
        "price": 25,
        "properties": { "color_hex": "#2563EB" }
      },
      "modifiers": null,
      "modifier_hash": null,
      "modifiers_total": 0
    }
  ],
  "total": 25,
  "subTotal": 21.74,
  "tax": 3.26,
  "tax_value": 0.15
}
FieldDescription
dataArray with the cart products
data[].item_idUnique cart item ID
data[].product_idProduct UUID
data[].product_nameProduct name
data[].quantityQuantity in cart
data[].skuProduct or variation SKU
data[].priceUnit price
data[].price_without_taxPrice without taxes
data[].discount_valuePrice with discount applied
data[].product_variation_idVariation UUID (if applicable)
data[].variationVariation data: id, sku, price, properties
data[].modifiersSelected modifiers (if applicable)
data[].modifiers_totalModifiers total
totalCart total (with taxes)
subTotalCart subtotal (without taxes)
taxTax amount
tax_valueApplied tax rate

Advantages

  • You can view the full catalog without leaving WhatsApp.
  • You can see more product details, including multiple images.
  • You can select variants (size, color) within a single product.
  • Internal filters are available to improve your search experience.
  • You can make direct queries to the AI assistant.
  • You can add products to the cart and view totals.
  • You can complete the purchase in a continuous flow.

Purchase flow

1

Browse catalog

You open the webview and navigate through the available products.
2

Select product

You view the details, see the images, and select variants (size, color, etc.).
3

Add to cart

You add products to the cart and review the total.
4

Complete purchase

You finalize the order without leaving WhatsApp.