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:

Shopify

Sincronize a partir do Shopify

VTEX

Sincronize a partir do VTEX

WooCommerce

Sincronize a partir do WooCommerce

API

Faça upload de produtos diretamente via API

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

Use um nó de Agente de IA e escolha como ele se conecta à sua loja:
Na aba Tools, selecione adicionar tool e escolha Shopify. O MCP do Jelou Shop é incluído automaticamente com a integração.
Adicionar tool Shopify no nó de Agente de IA
Na aba Tools, selecione adicionar tool e escolha WooCommerce. O MCP do Jelou Shop é incluído automaticamente com a integração.
Na aba Tools, selecione adicionar tool e escolha Jelou Shop.
Importe o MCP do Jelou Shop pelo nó de Agente de IA
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
Essas ferramentas aceitam parâmetros opcionais:
  • search_and_send_products_webview: category, branchCode, search_mode (semantic|ilike).
  • send_catalog_webview e send_cart_webview: branchCode, cart_id.
  • get_and_clear_cart: debit_stock para debitar estoque. Retorna cart_id para restaurar o carrinho depois.
  • Várias ferramentas aceitam cart_id para restaurar um carrinho de uma compra anterior.
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>" }
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": [
    {
      "item_id": 36629,
      "image_url": "https://example.com/camiseta-azul.png",
      "product_id": "95f851fb-0c3a-4c85-bc25-cf66848894ad",
      "product_name": "Camiseta Jelou",
      "quantity": 1,
      "sku": "jelou-tshirt-azul-l",
      "price": "25.000000",
      "price_without_tax": 21.74,
      "discount": null,
      "discount_type": null,
      "discount_value": 25,
      "discount_value_without_tax": 21.74,
      "product_variation_id": "019c47d9-7061-7305-9e7c-c2e92af99781",
      "variation": {
        "id": "019c47d9-7061-7305-9e7c-c2e92af99781",
        "sku": "jelou-tshirt-azul-l",
        "price": 25,
        "properties": { "color_hex": "#2563EB" }
      },
      "modifiers": null,
      "modifier_hash": null,
      "modifiers_total": 0
    }
  ],
  "total": 25,
  "subTotal": 21.74,
  "tax": 3.26,
  "tax_value": 0.15
}
CampoDescrição
dataArray com os produtos do carrinho
data[].item_idID único do item no carrinho
data[].product_idUUID do produto
data[].product_nameNome do produto
data[].quantityQuantidade no carrinho
data[].skuSKU do produto ou variação
data[].pricePreço unitário
data[].price_without_taxPreço sem impostos
data[].discount_valuePreço com desconto aplicado
data[].product_variation_idUUID da variação (se aplicável)
data[].variationDados da variação: id, sku, price, properties
data[].modifiersModificadores selecionados (se aplicável)
data[].modifiers_totalTotal dos modificadores
totalTotal do carrinho (com impostos)
subTotalSubtotal do carrinho (sem impostos)
taxValor dos impostos
tax_valueTaxa de imposto aplicada

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.