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.
Crea una nueva skill para el flujo de e-commerce. Si es tu primera vez, consulta la guía Tu primer skill.
2
Configurar variables iniciales
Importa un nodo código con el siguiente código para inicializar las variables necesarias:
Ver código completo
Copy
Ask AI
// Limpiar variables$memory.setJson("cartData", {}, 3600);$memory.set("checkoutEcommerce", "false");// Variables por defectoconst 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);// Prompt Genericoconst 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 para mostrar productos, catálogo o carrito según la intención del usuario. - Parámetro viewType: - "search" → Cuando el usuario quiere buscar productos, categorias, promociones específicas. - "catalog" → Cuando el usuario quiere ver todo el catálogo de producto o todos los productos. - "cart" → Cuando el usuario quiere ver su carrito.- **eCommerce - Clean Cart:** Utilízala cuando se requiera limpiar el carrito.- **eCommerce - Checkout:** Utilízala cuando el usuario quiera pagar.## 📏 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 HerramientasCuando 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 Principal1. 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** con viewType: "search" → NO generes texto → NO interpretes intención → NO continúes conversación → NO apliques lógica adicional- 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 Botón 2: 🔍 Agregar más Botón 3: 🛒 Ver mi carrito## 🧩 Reglas de Finalización- Asesor humano → Ejecuta end_function con: { "flujo": "asesor" }- Salir → Ejecuta end_function con: { "flujo": "salir" }- Pago → 1. Ejecuta **eCommerce - Checkout** sin mostrar ningun mensaje, si la respuesta es exitosa -> Ejecuta end_function con: { "flujo": "pago", "total": [total], "cart": [detalle] }## 📌 Reglas OperativasSiempre debes ejecutar end_function con este formato exacto:{ "output_schema": "<json_string_con_el_esquema_correspondiente>" }`$context.set("agentPrompt", prompt)
El prompt del paso anterior está optimizado para modelos GPT-4o y GPT-4.1.
Configura las siguientes herramientas:
Herramienta
Descripción
Pausar
Enviar mensajes interactivos
Enviar botones y listas al usuario
✓
eCommerce - Checkout
Procesar el pago del usuario
eCommerce - Product WebView
Mostrar productos, catálogo o carrito
✓
eCommerce - Clean Cart
Limpiar el carrito
Asegúrate de usar siempre la última versión pública disponible de cada herramienta.
4
Configurar condicional de flujo
Conecta el nodo AI Agent con un nodo condicional para validar si el usuario completó un pedido.Configura el camino usando la variable {{$memory.checkoutEcommerce}}:
Camino
Filtro/Regla
Valor
Pedido exitoso
Igual a
true
Cuando esta variable es true, indica que el usuario realizó un pedido de forma exitosa y puedes dirigirlo al flujo de pago.
5
Acceder a la información del carrito
Puedes obtener los datos del carrito en cualquier momento usando:
Copy
Ask AI
const cartData = $memory.getJson("cartData");
El objeto cartData contiene la siguiente estructura: