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:
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)
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ónPausarend_function
Enviar mensajes interactivosEnviar botones y listas al usuario
eCommerce - Clean CartLimpiar el carrito antes del pago
eCommerce - Get CartConsultar productos en el carrito
eCommerce - Product WebViewMostrar el catálogo de productos
4

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}}:
CaminoFiltro/ReglaValor
PagoIgual apago
AsesorIgual aasesor
Cada camino te permite dirigir al usuario al flujo correspondiente (pasarela de pago o transferencia a asesor humano).