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.
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
Browse catalog
You open the webview and navigate through the available products.
Select product
You view the details, see the images, and select variants (size, color, etc.).
Add to cart
You add products to the cart and review the total.
Complete purchase
You finalize the order without leaving WhatsApp.
Installation
Create a skill
Create a new skill for the e-commerce flow. If this is your first time, see the guide Your first skill .
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. 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: Tool Description Pause Send message with options Send quick-reply buttons to the user β Get and clear cart Get the cart and clear it (checkout) Send cart WebView Send the cart as an interactive webview β Search and send products WebView Search products and send results as a webview β Clear cart Remove all products from the cart Send catalog WebView Send the full catalog as a webview β
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
}
Field Description dataArray with the cart products totalCart total subTotalCart subtotal