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

# Interacción por WebView

> Catálogo embebido en WhatsApp para una experiencia de compra completa.

Con el **WebView** accedes a un catálogo embebido dentro de WhatsApp que te permite ofrecer una experiencia de compra completa sin depender de las restricciones del catálogo nativo de Meta.

<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="Experiencia de compra en WebView" width="1536" height="1024" data-path="assets/images/integraciones/e-commerce/webview-screens-2.png" />
</Frame>

## Requisitos

<Warning>
  Para que el WebView funcione dentro de WhatsApp, tu cuenta debe estar verificada por Meta.
</Warning>

Para mostrar productos en el WebView necesitas tenerlos cargados en Jelou Shop:

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

  <Card title="VTEX" icon="store" href="/guides/integraciones/e-commerce/vtex">
    Sincroniza desde VTEX
  </Card>

  <Card title="WooCommerce" icon="store" href="/guides/integraciones/e-commerce/woocommerce">
    Sincroniza desde WooCommerce
  </Card>

  <Card title="API" icon="code" href="/guides/integraciones/e-commerce/api">
    Carga productos directamente por API
  </Card>
</CardGroup>

## Instalación

<Steps>
  <Step title="Crear un flujo">
    Crea un nuevo flujo para el flujo de e-commerce. Si es tu primera vez, consulta la guía [Tu primer workflow](/guides/getting-started/tu-primer-workflow).
  </Step>

  <Step title="Configurar el nodo AI Agent">
    Usa un [nodo AI Agent](/guides/agentes-ia) y elige cómo se conecta a tu tienda:

    <AccordionGroup>
      <Accordion title="Shopify">
        En el tab de Tools, selecciona agregar tool y elige Shopify. El MCP de **Jelou Shop** se incluye automáticamente con la integración.

        <Frame>
          <img src="https://mintcdn.com/jelouai/Zbe4KVXVGO3RWKqI/assets/images/marketplace/e-commerce/shopify-instalation-agent-es.gif?s=4520896f9e077aed1fca4dc52e4b5cbf" alt="Agregar tool Shopify en el nodo AI Agent" width="2704" height="1298" data-path="assets/images/marketplace/e-commerce/shopify-instalation-agent-es.gif" />
        </Frame>
      </Accordion>

      <Accordion title="WooCommerce">
        En el tab de Tools, selecciona agregar tool y elige WooCommerce. El MCP de **Jelou Shop** se incluye automáticamente con la integración.
      </Accordion>

      <Accordion title="VTEX o Jelou Shop">
        En el tab de Tools, selecciona agregar tool y elige 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="Importar MCP Jelou Shop desde el nodo AI Agent" width="548" height="286" data-path="assets/images/integraciones/e-commerce/jelou-shop-mcp.png" />
        </Frame>

        Configura las siguientes herramientas:

        | Herramienta                       | Descripción                                       | Pausar |
        | --------------------------------- | ------------------------------------------------- | ------ |
        | Enviar mensaje con opciones       | Enviar botones de respuesta rápida al usuario     | ✓      |
        | Obtener y vaciar carrito          | Obtener el carrito y vaciarlo (checkout)          |        |
        | Enviar carrito WebView            | Enviar el carrito como webview interactiva        | ✓      |
        | Buscar y enviar productos WebView | Buscar productos y enviar resultados como webview | ✓      |
        | Vaciar carrito                    | Eliminar todos los productos del carrito          |        |
        | Enviar catálogo WebView           | Enviar el catálogo completo como webview          | ✓      |
      </Accordion>
    </AccordionGroup>

    <Tip>
      Estas herramientas aceptan parámetros opcionales:

      * **search\_and\_send\_products\_webview**: `category`, `branchCode`, `search_mode` (`semantic`|`ilike`).
      * **send\_catalog\_webview** y **send\_cart\_webview**: `branchCode`, `cart_id`.
      * **get\_and\_clear\_cart**: `debit_stock` para descontar inventario. Devuelve `cart_id` para restaurar el carrito después.
      * **get\_and\_clear\_cart**: `use_external_checkout` para que el pago se complete en la tienda original en lugar del flujo de pago de Jelou. Solo disponible si conectaste tu tienda con [Shopify](/guides/integraciones/e-commerce/shopify) o [WooCommerce](/guides/integraciones/e-commerce/woocommerce). La respuesta incluye `checkout_url` con el enlace al checkout de la tienda.
      * Varias herramientas aceptan `cart_id` para restaurar un carrito de una compra previa.
    </Tip>

    Luego configura el siguiente prompt:

    <Accordion title="Ver prompt">
      ```
      ## 🎯 Rol
      Eres un agente de eCommerce amable y visual (usa iconos). Guías al usuario en su experiencia de compra hasta que solicite: asesor humano, salir o pagar.

      ## 🧰 Herramientas
      - Buscar productos, categorías, promociones → **search_and_send_products_webview**
      - Ver todo el catálogo → **send_catalog_webview**
      - Ver su carrito → **send_cart_webview**
      - Vaciar carrito → **clean_cart**
      - Pago / Checkout → **get_and_clear_cart** (si el carrito está vacío, informa y ofrece buscar productos)
      - Mostrar opciones con botones → **send_message_with_options**

      ## 📏 Reglas
      - Nunca inventes precios, promociones o beneficios.
      - Nunca muestres errores técnicos ni nombres de herramientas al usuario.
      - Usa herramientas en lugar de asumir información.

      ## Pedido exitoso
      Si recibes un mensaje indicando "Tu pedido ha sido realizado con éxito", usa **send_message_with_options** con:
        Texto: ✅ ¡Pedido confirmado!\n💰 Total a pagar: $xx
        Botones: 💳 Ir al pago, 🔍 Agregar más, 🛒 Ver mi carrito

      ## 🧩 Finalización
      - Asesor humano → end_function: { "flujo": "asesor" }
      - Salir → end_function: { "flujo": "salir" }
      - Pago → Ejecuta **get_and_clear_cart**. Si exitoso → end_function: { "flujo": "pago", "total": [total], "cart": [detalle] }

      Siempre ejecuta end_function con: { "output_schema": "<json>" }
      ```
    </Accordion>
  </Step>

  <Step title="Acceder a la información del carrito">
    Puedes obtener los datos del carrito en cualquier momento usando:

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

    El objeto `cartData` contiene la siguiente estructura:

    <Accordion title="Ver ejemplo de respuesta">
      ```json theme={null}
      {
        "data": [
          {
            "item_id": 36629,
            "image_url": "https://example.com/camiseta-azul.png",
            "product_id": "95f851fb-0c3a-4c85-bc25-cf66848894ad",
            "product_name": "Camiseta Jelou",
            "quantity": 1,
            "sku": "jelou-tshirt-azul-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-azul-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
          }
        ]
      }
      ```

      | Campo                         | Descripción                                               |
      | ----------------------------- | --------------------------------------------------------- |
      | `data`                        | Array con los productos del carrito                       |
      | `data[].item_id`              | ID único del item en el carrito                           |
      | `data[].product_id`           | UUID del producto                                         |
      | `data[].product_name`         | Nombre del producto                                       |
      | `data[].quantity`             | Cantidad en el carrito                                    |
      | `data[].sku`                  | SKU del producto o variación                              |
      | `data[].price`                | Precio unitario                                           |
      | `data[].price_without_tax`    | Precio sin impuestos                                      |
      | `data[].tax_rate`             | Tasa de impuesto aplicada al producto (porcentaje)        |
      | `data[].discount_value`       | Precio con descuento aplicado                             |
      | `data[].product_variation_id` | UUID de la variación (si aplica)                          |
      | `data[].variation`            | Datos de la variación: `id`, `sku`, `price`, `properties` |
      | `data[].modifiers`            | Modificadores seleccionados (si aplica)                   |
      | `data[].modifiers_total`      | Total de los modificadores                                |
      | `total`                       | Total del carrito (con impuestos)                         |
      | `subTotal`                    | Subtotal del carrito (sin impuestos)                      |
      | `tax`                         | Monto de impuestos                                        |
      | `tax_value`                   | Tasa de impuesto aplicada                                 |
      | `tax_breakdown`               | Desglose de impuestos agrupado por tasa                   |
      | `tax_breakdown[].rate`        | Tasa de impuesto (porcentaje)                             |
      | `tax_breakdown[].label`       | Etiqueta descriptiva (ej: "IVA 15%")                      |
      | `tax_breakdown[].amount`      | Monto de impuesto para esa tasa                           |

      <Note>
        Cuando `enable_per_product_tax` está activo, `tax_breakdown` puede contener múltiples entradas con diferentes tasas. De lo contrario, todos los productos gravados se agrupan bajo la tasa global de la tienda. Para productos con `has_tax: false`, `tax_rate` será `0`.
      </Note>
    </Accordion>
  </Step>
</Steps>

## Ventajas

* Puedes ver el catálogo completo sin salir de WhatsApp.
* Puedes ver más detalles del producto, incluyendo múltiples imágenes.
* Puedes seleccionar variantes (talla, color) en un solo producto.
* Cuentas con filtros internos para mejorar tu experiencia de búsqueda.
* Puedes realizar consultas directas al asistente con IA.
* Puedes agregar productos al carrito y visualizar totales.
* Puedes completar la compra en un flujo continuo.

## Flujo de compra

<Steps>
  <Step title="Explorar catálogo">
    Abres el webview y navegas por los productos disponibles.
  </Step>

  <Step title="Seleccionar producto">
    Visualizas los detalles, ves las imágenes y seleccionas variantes (talla, color, etc.).
  </Step>

  <Step title="Agregar al carrito">
    Añades productos al carrito y revisas el total.
  </Step>

  <Step title="Completar compra">
    Finalizas el pedido sin salir de WhatsApp.
  </Step>
</Steps>