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:

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.

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

Conecta la skill con un nodo AI Agent. En la configuración del nodo, importa el MCP Jelou Shop desde el Marketplace de integraciones para habilitar las herramientas de e-commerce.
Importar MCP Jelou Shop desde el nodo AI Agent
Si conectaste tu tienda desde Shopify o WooCommerce, el MCP de Jelou Shop se incluye automáticamente con la integración. Solo necesitas importarlo manualmente si cargaste productos por API.
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>" }
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
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": [
    { "product_name": "Cocina Murcia 5 Quemadores", "sku": "whcwr0rttl", "quantity": 1, "price": "908.00", "discount_value": 908 },
    { "product_name": "Camiseta celeste", "sku": "vj6ybab6e1", "quantity": 2, "price": "35.00", "discount_value": 70 }
  ],
  "total": 978,
  "subTotal": 978
}
CampoDescripción
dataArray con los productos del carrito
totalTotal del carrito
subTotalSubtotal del carrito