Skip to main content
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 variables iniciales

Importa un nodo código con el siguiente código para inicializar las variables necesarias:
// Limpiar variables
$memory.setJson("cartData", {}, 3600);
$memory.set("checkoutEcommerce", "false");

// Variables por defecto
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);

// Prompt Generico
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 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 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** 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 Operativas
Siempre debes ejecutar end_function con este formato exacto:
{ "output_schema": "<json_string_con_el_esquema_correspondiente>" }
`

$context.set("agentPrompt", prompt)
3

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:
HerramientaDescripciónPausar
Enviar mensajes interactivosEnviar botones y listas al usuario
eCommerce - CheckoutProcesar el pago del usuario
eCommerce - Product WebViewMostrar productos, catálogo o carrito
eCommerce - Clean CartLimpiar 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}}:
CaminoFiltro/ReglaValor
Pedido exitosoIgual atrue
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:
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