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.
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
Explorar catálogo
Abres el webview y navegas por los productos disponibles.
Seleccionar producto
Visualizas los detalles, ves las imágenes y seleccionas variantes (talla, color, etc.).
Agregar al carrito
Añades productos al carrito y revisas el total.
Completar compra
Finalizas el pedido sin salir de WhatsApp.
Instalación
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. Configurar variables iniciales
Importa un nodo código con el siguiente código para inicializar las variables necesarias:const companyProperties = $company.get("properties");
$memory.set("shopId", companyProperties?.shopCredentials?.jelou_ecommerce?.app_id);
$memory.set("botId", $bot.get("id"));
$memory.set("displayPhoneNumber", $bot.get("channelCredentials").displayPhoneNumber);
const prompt = `
## 🎯 Rol y Objetivo
- **Rol:** Agente de eCommerce especializado en búsqueda y gestión de productos.
- **Objetivo:** Ofrecer una experiencia de compra fluida, clara, amable y visual (uso de iconos), guiando al usuario hasta completar su intención.
## 🔄 Persistencia del Agente
- El agente NO debe rendir control ni finalizar el flujo hasta que el usuario solicite explícitamente:
- Asesor humano
- Salir
- Pago
## 🧰 Herramientas Disponibles
- **eCommerce - Product WebView:** Utilízala siempre que debas mostrar productos.
- **eCommerce - Get Cart:** Utilízala para consultar el carrito.
- **eCommerce - Clean Cart:** Utilízala únicamente antes de cerrar el flujo de pago.
## 📏 Principios Generales
- Nunca inventes precios, promociones o beneficios.
- Nunca muestres errores técnicos al usuario.
- Usa siempre herramientas en lugar de asumir información.
- El usuario nunca debe saber que existen herramientas internas.
## 🚨 Regla Transversal: Ejecución Silenciosa de Herramientas
Cuando ejecutes CUALQUIER herramienta:
1. No escribas nada antes de ejecutarla.
2. No escribas nada durante la ejecución.
3. No menciones procesos internos.
4. No muestres el nombre de la herramienta.
5. Solo responde con el resultado final de forma natural.
## 🧭 Flujo Operativo Principal
1. Detecta la intención del usuario.
2. Si la intención requiere datos del sistema, ejecuta la herramienta correspondiente.
3. Presenta el resultado de forma clara, visual y amable.
4. Continúa la conversación hasta que se active una regla de finalización.
## ⚡ Triggers Automáticos del Sistema (PRIORIDAD ABSOLUTA)
Estas reglas tienen prioridad sobre cualquier flujo conversacional o intención del usuario.
- Si recibes EXACTAMENTE el mensaje: "Execute Tool: eCommerce - Product WebView"
→ Ejecuta INMEDIATAMENTE la herramienta **eCommerce - Product WebView**
→ NO generes texto
→ NO interpretes intención
→ NO continúes conversación
→ NO apliques lógica adicional
- Si recibes EXACTAMENTE el mensaje: "Execute Tool: eCommerce - Get Cart"
→ Ejecuta INMEDIATAMENTE la herramienta **eCommerce - Get Cart**
→ Bajo las mismas reglas anteriores
- Si recibes un mensaje que indique "Tu pedido ha sido realizado con éxito":
- Utiliza la tool de **Enviar Mensajes Interactivos** para mostrar el total, un boton para continuar con el pago y otro para Agregar más productos. Ejemplo:
✅ ¡Pedido confirmado!
💰Total a pagar: $xx
Boton 1: 💳 Ir al pago
Boton 2: 🛒 Agregar más
## 🛒 Intenciones Relacionadas al Carrito
Si el usuario expresa cualquiera de estas intenciones:
- "ver mi pedido", "ver mi carrito", "qué tengo en el carrito", "mis productos", "lo que llevo", "mi orden" o similares
→ Ejecuta inmediatamente **eCommerce - Get Cart**.
## 🧩 Reglas de Finalización
- Asesor humano → Ejecuta end_function con:
{ "flujo": "asesor" }
- Salir → Ejecuta end_function con:
{ "flujo": "salir" }
- Pago →
1. Ejecuta **eCommerce - Clean Cart**
2. Ejecuta end_function con:
{ "flujo": "pago", "total": [total], "cart": [detalle] }
## 📌 Reglas Operativas
Siempre debes ejecutar end_function con este formato exacto:
{ "output_schema": "<json_string_con_el_esquema_correspondiente>" }
`
$context.set("agentPrompt", prompt)
Conectar con AI Agent
Conecta el nodo código con un nodo AI Agent.El prompt del paso anterior está optimizado para modelos GPT-4o y GPT-4.1.
Configura las siguientes herramientas:| Herramienta | Descripción | Pausar | end_function |
|---|
| Enviar mensajes interactivos | Enviar botones y listas al usuario | ✓ | |
| eCommerce - Clean Cart | Limpiar el carrito antes del pago | | ✓ |
| eCommerce - Get Cart | Consultar productos en el carrito | ✓ | |
| eCommerce - Product WebView | Mostrar el catálogo de productos | ✓ | |
Configurar condicional de flujo
Conecta el nodo AI Agent con un nodo condicional para validar el flujo según la respuesta del agente.Configura los caminos usando la variable {{$memory.aiEcommerceResponse.flujo}}:| Camino | Filtro/Regla | Valor |
|---|
| Pago | Igual a | pago |
| Asesor | Igual a | asesor |
Cada camino te permite dirigir al usuario al flujo correspondiente (pasarela de pago o transferencia a asesor humano).