Pular para o conteúdo principal
Com o WebView você acessa um catálogo incorporado dentro do WhatsApp que permite oferecer uma experiência de compra completa sem depender das restrições do catálogo nativo do Meta.
Experiência de compra no WebView

Requisitos

Para que o WebView funcione dentro do WhatsApp, sua conta deve ser verificada pelo Meta.
Para exibir produtos no WebView você precisa que eles estejam carregados no Jelou Shop:

Vantagens

  • Você pode visualizar o catálogo completo sem sair do WhatsApp.
  • Você pode ver mais detalhes do produto, incluindo múltiplas imagens.
  • Você pode selecionar variantes (tamanho, cor) dentro de um único produto.
  • Filtros internos estão disponíveis para melhorar a experiência de busca.
  • Você pode fazer consultas diretas ao assistente de IA.
  • Você pode adicionar produtos ao carrinho e ver os totais.
  • Você pode concluir a compra em um fluxo contínuo.

Fluxo de compra

1

Navegar pelo catálogo

Você abre o webview e navega pelos produtos disponíveis.
2

Selecionar produto

Você vê os detalhes, confere as imagens e seleciona variantes (tamanho, cor, etc.).
3

Adicionar ao carrinho

Você adiciona produtos ao carrinho e revisa o total.
4

Concluir a compra

Você finaliza o pedido sem sair do WhatsApp.

Instalação

1

Criar uma skill

Crie uma nova skill para o fluxo de e-commerce. Se for a primeira vez, veja o guia Sua primeira skill.
2

Configurar o nó de Agente de IA

Conecte a skill com um nó de Agente de IA. Na configuração do nó, importe o MCP do Jelou Shop pelo Marketplace de Integrações para habilitar as ferramentas de e-commerce.
Importe o MCP do Jelou Shop pelo nó de Agente de IA
Se você conectou sua loja pelo Shopify ou WooCommerce, o MCP do Jelou Shop é incluído automaticamente com a integração. Você só precisa importá-lo manualmente se fez upload de produtos via API.
Em seguida, configure o seguinte prompt:
## 🎯 Papel
Você é um agente de eCommerce amigável e visual (use ícones). Você guia o usuário em sua experiência de compra até que ele solicite: um assessor humano, sair ou pagar.

## 🧰 Ferramentas
- Pesquisar produtos, categorias, promoções → **search_and_send_products_webview**
- Ver catálogo completo → **send_catalog_webview**
- Ver carrinho → **send_cart_webview**
- Limpar carrinho → **clean_cart**
- Pagamento / Checkout → **get_and_clear_cart** (se o carrinho estiver vazio, informe e ofereça pesquisar produtos)
- Mostrar opções com botões → **send_message_with_options**

## 📏 Regras
- Nunca invente preços, promoções ou benefícios.
- Nunca mostre erros técnicos ou nomes de ferramentas ao usuário.
- Use ferramentas em vez de assumir informações.

## Pedido bem-sucedido
Se receber uma mensagem indicando "Seu pedido foi realizado com sucesso", use **send_message_with_options** com:
  Texto: ✅ Pedido confirmado!\n💰 Total a pagar: $xx
  Botões: 💳 Ir para pagamento, 🔍 Adicionar mais, 🛒 Ver meu carrinho

## 🧩 Conclusão
- Assessor humano → end_function: { "flow": "advisor" }
- Sair → end_function: { "flow": "exit" }
- Pagamento → Execute **get_and_clear_cart**. Se bem-sucedido → end_function: { "flow": "payment", "total": [total], "cart": [detail] }

Sempre execute end_function com: { "output_schema": "<json>" }
Configure as seguintes ferramentas:
FerramentaDescriçãoPausar
Enviar mensagem com opçõesEnviar botões de resposta rápida ao usuário
Obter e limpar carrinhoObter o carrinho e limpá-lo (checkout)
Enviar carrinho WebViewEnviar o carrinho como webview interativo
Pesquisar e enviar produtos WebViewPesquisar produtos e enviar resultados como webview
Limpar carrinhoRemover todos os produtos do carrinho
Enviar catálogo WebViewEnviar o catálogo completo como webview
3

Acessar informações do carrinho

Você pode obter os dados do carrinho a qualquer momento usando:
const cartData = $memory.getJson("cartData");
O objeto cartData contém a seguinte estrutura:
{
  "data": [
    { "product_name": "Fogão Murcia 5 Bocas", "sku": "whcwr0rttl", "quantity": 1, "price": "908.00", "discount_value": 908 },
    { "product_name": "Camiseta azul claro", "sku": "vj6ybab6e1", "quantity": 2, "price": "35.00", "discount_value": 70 }
  ],
  "total": 978,
  "subTotal": 978
}
CampoDescrição
dataArray com os produtos do carrinho
totalTotal do carrinho
subTotalSubtotal do carrinho