Saltar al contenido principal
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.
Experiencia de compra en WebView

Requisitos

Para que el WebView funcione dentro de WhatsApp, tu cuenta debe estar verificada por Meta.
Para mostrar productos en el WebView necesitas tenerlos cargados en Jelou Shop:

Shopify

Sincroniza desde Shopify

VTEX

Sincroniza desde VTEX

WooCommerce

Sincroniza desde WooCommerce

API

Carga productos directamente por API

Instalación

1

Crear una skill

Crea una nueva skill para el flujo de e-commerce. Si es tu primera vez, consulta la guía Tu primer skill.
2

Configurar el nodo AI Agent

Usa un nodo AI Agent y elige cómo se conecta a tu tienda:
En el tab de Tools, selecciona agregar tool y elige Shopify. El MCP de Jelou Shop se incluye automáticamente con la integración.
Agregar tool Shopify en el nodo AI Agent
En el tab de Tools, selecciona agregar tool y elige WooCommerce. El MCP de Jelou Shop se incluye automáticamente con la integración.
En el tab de Tools, selecciona agregar tool y elige Jelou Shop.
Importar MCP Jelou Shop desde el nodo AI Agent
Configura las siguientes herramientas:
HerramientaDescripciónPausar
Enviar mensaje con opcionesEnviar botones de respuesta rápida al usuario
Obtener y vaciar carritoObtener el carrito y vaciarlo (checkout)
Enviar carrito WebViewEnviar el carrito como webview interactiva
Buscar y enviar productos WebViewBuscar productos y enviar resultados como webview
Vaciar carritoEliminar todos los productos del carrito
Enviar catálogo WebViewEnviar el catálogo completo como webview
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.
  • Varias herramientas aceptan cart_id para restaurar un carrito de una compra previa.
Luego configura el siguiente 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>" }
3

Acceder a la información del carrito

Puedes obtener los datos del carrito en cualquier momento usando:
const cartData = $memory.getJson("cartData");
El objeto cartData contiene la siguiente estructura:
{
  "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,
      "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
}
CampoDescripción
dataArray con los productos del carrito
data[].item_idID único del item en el carrito
data[].product_idUUID del producto
data[].product_nameNombre del producto
data[].quantityCantidad en el carrito
data[].skuSKU del producto o variación
data[].pricePrecio unitario
data[].price_without_taxPrecio sin impuestos
data[].discount_valuePrecio con descuento aplicado
data[].product_variation_idUUID de la variación (si aplica)
data[].variationDatos de la variación: id, sku, price, properties
data[].modifiersModificadores seleccionados (si aplica)
data[].modifiers_totalTotal de los modificadores
totalTotal del carrito (con impuestos)
subTotalSubtotal del carrito (sin impuestos)
taxMonto de impuestos
tax_valueTasa de impuesto aplicada

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

1

Explorar catálogo

Abres el webview y navegas por los productos disponibles.
2

Seleccionar producto

Visualizas los detalles, ves las imágenes y seleccionas variantes (talla, color, etc.).
3

Agregar al carrito

Añades productos al carrito y revisas el total.
4

Completar compra

Finalizas el pedido sin salir de WhatsApp.