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:

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.

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

Connect the skill with an AI Agent node. In the node configuration, import the Jelou Shop MCP from the Integrations Marketplace to enable the e-commerce tools.
Import Jelou Shop MCP from the AI Agent node
If you connected your store from Shopify or WooCommerce, the Jelou Shop MCP is included automatically with the integration. You only need to import it manually if you uploaded products via API.
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>" }
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βœ“
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": [
    { "product_name": "Murcia 5-Burner Stove", "sku": "whcwr0rttl", "quantity": 1, "price": "908.00", "discount_value": 908 },
    { "product_name": "Light blue t-shirt", "sku": "vj6ybab6e1", "quantity": 2, "price": "35.00", "discount_value": 70 }
  ],
  "total": 978,
  "subTotal": 978
}
FieldDescription
dataArray with the cart products
totalCart total
subTotalCart subtotal