> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jelou.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# WebView interaction

> Catalog embedded in WhatsApp for a complete shopping experience.

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.

<Frame>
  <img src="https://mintcdn.com/jelouai/HiydMYZzhF4lkFia/assets/images/integraciones/e-commerce/webview-screens-2.png?fit=max&auto=format&n=HiydMYZzhF4lkFia&q=85&s=3fc1fc98829319db5becff6da918116c" alt="Shopping experience in WebView" width="1536" height="1024" data-path="assets/images/integraciones/e-commerce/webview-screens-2.png" />
</Frame>

## Requirements

<Warning>
  For the WebView to work inside WhatsApp, your account must be verified by Meta.
</Warning>

To display products in the WebView you need them loaded in Jelou Shop:

<CardGroup cols={2}>
  <Card title="Shopify" icon="store" href="/en/guides/integraciones/e-commerce/shopify">
    Sync from Shopify
  </Card>

  <Card title="VTEX" icon="store" href="/en/guides/integraciones/e-commerce/vtex">
    Sync from VTEX
  </Card>

  <Card title="WooCommerce" icon="store" href="/en/guides/integraciones/e-commerce/woocommerce">
    Sync from WooCommerce
  </Card>

  <Card title="API" icon="code" href="/en/guides/integraciones/e-commerce/api">
    Upload products directly via API
  </Card>
</CardGroup>

## Installation

<Steps>
  <Step title="Create a workflow">
    Create a new workflow for the e-commerce flow. If this is your first time, see the guide [Your first workflow](/en/guides/getting-started/tu-primer-workflow).
  </Step>

  <Step title="Configure the AI Agent node">
    Use an [AI Agent node](/en/guides/agentes-ia) and choose how it connects to your store:

    <AccordionGroup>
      <Accordion title="Shopify">
        In the Tools tab, select add tool and choose Shopify. The **Jelou Shop** MCP is included automatically with the integration.

        <Frame>
          <img src="https://mintcdn.com/jelouai/Zbe4KVXVGO3RWKqI/assets/images/marketplace/e-commerce/shopify-instalation-agent-en.gif?s=d9d3679faa61ac2fef6ddd25ba36f4e9" alt="Add Shopify tool in the AI Agent node" width="2704" height="1298" data-path="assets/images/marketplace/e-commerce/shopify-instalation-agent-en.gif" />
        </Frame>
      </Accordion>

      <Accordion title="WooCommerce">
        In the Tools tab, select add tool and choose WooCommerce. The **Jelou Shop** MCP is included automatically with the integration.
      </Accordion>

      <Accordion title="VTEX, Jelou Shop or API">
        In the Tools tab, select add tool and choose Jelou Shop.

        <Frame>
          <img src="https://mintcdn.com/jelouai/HiydMYZzhF4lkFia/assets/images/integraciones/e-commerce/jelou-shop-mcp.png?fit=max&auto=format&n=HiydMYZzhF4lkFia&q=85&s=4a43d0ec3c60b01926b33a6e9b7d9944" alt="Import Jelou Shop MCP from the AI Agent node" width="548" height="286" data-path="assets/images/integraciones/e-commerce/jelou-shop-mcp.png" />
        </Frame>

        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            | ✓     |
      </Accordion>
    </AccordionGroup>

    <Tip>
      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.
    </Tip>

    Then configure the following prompt:

    <Accordion title="View 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>" }
      ```
    </Accordion>
  </Step>

  <Step title="Access cart information">
    You can get the cart data at any time using:

    ```javascript theme={null}
    const cartData = $memory.getJson("cartData");
    ```

    The `cartData` object contains the following structure:

    <Accordion title="View response example">
      ```json theme={null}
      {
        "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,
            "tax_rate": 15,
            "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,
        "tax_breakdown": [
          {
            "rate": 15,
            "label": "IVA 15%",
            "amount": 3.26
          }
        ]
      }
      ```

      | Field                         | Description                                                  |
      | ----------------------------- | ------------------------------------------------------------ |
      | `data`                        | Array with the cart products                                 |
      | `data[].item_id`              | Unique cart item ID                                          |
      | `data[].product_id`           | Product UUID                                                 |
      | `data[].product_name`         | Product name                                                 |
      | `data[].quantity`             | Quantity in cart                                             |
      | `data[].sku`                  | Product or variation SKU                                     |
      | `data[].price`                | Unit price                                                   |
      | `data[].price_without_tax`    | Price without taxes                                          |
      | `data[].tax_rate`             | Tax rate applied to the product (percentage)                 |
      | `data[].discount_value`       | Price with discount applied                                  |
      | `data[].product_variation_id` | Variation UUID (if applicable)                               |
      | `data[].variation`            | Variation data: `id`, `sku`, `price`, `properties`           |
      | `data[].modifiers`            | Selected modifiers (if applicable)                           |
      | `data[].modifiers_total`      | Modifiers total                                              |
      | `total`                       | Cart total (with taxes)                                      |
      | `subTotal`                    | Cart subtotal (without taxes)                                |
      | `tax`                         | Tax amount                                                   |
      | `tax_value`                   | Applied tax rate                                             |
      | `tax_breakdown`               | Tax breakdown grouped by rate                                |
      | `tax_breakdown[].rate`        | Tax rate (percentage)                                        |
      | `tax_breakdown[].label`       | Descriptive label generated by the backend (e.g., "IVA 15%") |
      | `tax_breakdown[].amount`      | Tax amount for that rate                                     |

      <Note>
        When `enable_per_product_tax` is active, `tax_breakdown` may contain multiple entries with different rates. Otherwise, all taxed items are grouped under the store's global rate. For products with `has_tax: false`, `tax_rate` will be `0`.
      </Note>
    </Accordion>
  </Step>
</Steps>

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

<Steps>
  <Step title="Browse catalog">
    You open the webview and navigate through the available products.
  </Step>

  <Step title="Select product">
    You view the details, see the images, and select variants (size, color, etc.).
  </Step>

  <Step title="Add to cart">
    You add products to the cart and review the total.
  </Step>

  <Step title="Complete purchase">
    You finalize the order without leaving WhatsApp.
  </Step>
</Steps>