> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jelou.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Interação por WebView

> Catálogo incorporado no WhatsApp para uma experiência de compra completa.

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.

<Frame>
  <img src="https://mintcdn.com/jelouai/HiydMYZzhF4lkFia/assets/images/integraciones/e-commerce/webview-screens-2.png?fit=max&auto=format&n=HiydMYZzhF4lkFia&q=85&s=3fc1fc98829319db5becff6da918116c" alt="Experiência de compra no WebView" width="1536" height="1024" data-path="assets/images/integraciones/e-commerce/webview-screens-2.png" />
</Frame>

## Requisitos

<Warning>
  Para que o WebView funcione dentro do WhatsApp, sua conta deve ser verificada pelo Meta.
</Warning>

Para exibir produtos no WebView você precisa que eles estejam carregados no Jelou Shop:

<CardGroup cols={2}>
  <Card title="Shopify" icon="store" href="/pt/guias/integracoes/e-commerce/shopify">
    Sincronize a partir do Shopify
  </Card>

  <Card title="VTEX" icon="store" href="/pt/guias/integracoes/e-commerce/vtex">
    Sincronize a partir do VTEX
  </Card>

  <Card title="WooCommerce" icon="store" href="/pt/guias/integracoes/e-commerce/woocommerce">
    Sincronize a partir do WooCommerce
  </Card>

  <Card title="API" icon="code" href="/pt/guias/integracoes/e-commerce/api">
    Faça upload de produtos diretamente via API
  </Card>
</CardGroup>

## Instalação

<Steps>
  <Step title="Criar um fluxo">
    Crie uma nova fluxo para o fluxo de e-commerce. Se for a primeira vez, veja o guia [Seu primeiro workflow](/pt/guias/primeiros-passos/seu-primeiro-workflow).
  </Step>

  <Step title="Configurar o nó de Agente de IA">
    Use um [nó de Agente de IA](/pt/guias/agentes-ia) e escolha como ele se conecta à sua loja:

    <AccordionGroup>
      <Accordion title="Shopify">
        Na aba Tools, selecione adicionar tool e escolha Shopify. O MCP do **Jelou Shop** é incluído automaticamente com a integração.

        <Frame>
          <img src="https://mintcdn.com/jelouai/Zbe4KVXVGO3RWKqI/assets/images/marketplace/e-commerce/shopify-instalation-agent-pt.gif?s=6310f7763c3fa8e0ace12c884c179624" alt="Adicionar tool Shopify no nó de Agente de IA" width="2704" height="1298" data-path="assets/images/marketplace/e-commerce/shopify-instalation-agent-pt.gif" />
        </Frame>
      </Accordion>

      <Accordion title="WooCommerce">
        Na aba Tools, selecione adicionar tool e escolha WooCommerce. O MCP do **Jelou Shop** é incluído automaticamente com a integração.
      </Accordion>

      <Accordion title="VTEX, Jelou Shop ou API">
        Na aba Tools, selecione adicionar tool e escolha Jelou Shop.

        <Frame>
          <img src="https://mintcdn.com/jelouai/HiydMYZzhF4lkFia/assets/images/integraciones/e-commerce/jelou-shop-mcp.png?fit=max&auto=format&n=HiydMYZzhF4lkFia&q=85&s=4a43d0ec3c60b01926b33a6e9b7d9944" alt="Importe o MCP do Jelou Shop pelo nó de Agente de IA" width="548" height="286" data-path="assets/images/integraciones/e-commerce/jelou-shop-mcp.png" />
        </Frame>

        Configure as seguintes ferramentas:

        | Ferramenta                          | Descrição                                           | Pausar |
        | ----------------------------------- | --------------------------------------------------- | ------ |
        | Enviar mensagem com opções          | Enviar botões de resposta rápida ao usuário         | ✓      |
        | Obter e limpar carrinho             | Obter o carrinho e limpá-lo (checkout)              |        |
        | Enviar carrinho WebView             | Enviar o carrinho como webview interativo           | ✓      |
        | Pesquisar e enviar produtos WebView | Pesquisar produtos e enviar resultados como webview | ✓      |
        | Limpar carrinho                     | Remover todos os produtos do carrinho               |        |
        | Enviar catálogo WebView             | Enviar o catálogo completo como webview             | ✓      |
      </Accordion>
    </AccordionGroup>

    <Tip>
      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.
    </Tip>

    Em seguida, configure o seguinte prompt:

    <Accordion title="Ver 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>" }
      ```
    </Accordion>
  </Step>

  <Step title="Acessar informações do carrinho">
    Você pode obter os dados do carrinho a qualquer momento usando:

    ```javascript theme={null}
    const cartData = $memory.getJson("cartData");
    ```

    O objeto `cartData` contém a seguinte estrutura:

    <Accordion title="Ver exemplo de resposta">
      ```json theme={null}
      {
        "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,
            "tax_rate": 15,
            "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,
        "tax_breakdown": [
          {
            "rate": 15,
            "label": "IVA 15%",
            "amount": 3.26
          }
        ]
      }
      ```

      | Campo                         | Descrição                                             |
      | ----------------------------- | ----------------------------------------------------- |
      | `data`                        | Array com os produtos do carrinho                     |
      | `data[].item_id`              | ID único do item no carrinho                          |
      | `data[].product_id`           | UUID do produto                                       |
      | `data[].product_name`         | Nome do produto                                       |
      | `data[].quantity`             | Quantidade no carrinho                                |
      | `data[].sku`                  | SKU do produto ou variação                            |
      | `data[].price`                | Preço unitário                                        |
      | `data[].price_without_tax`    | Preço sem impostos                                    |
      | `data[].tax_rate`             | Taxa de imposto aplicada ao produto (porcentagem)     |
      | `data[].discount_value`       | Preço com desconto aplicado                           |
      | `data[].product_variation_id` | UUID da variação (se aplicável)                       |
      | `data[].variation`            | Dados da variação: `id`, `sku`, `price`, `properties` |
      | `data[].modifiers`            | Modificadores selecionados (se aplicável)             |
      | `data[].modifiers_total`      | Total dos modificadores                               |
      | `total`                       | Total do carrinho (com impostos)                      |
      | `subTotal`                    | Subtotal do carrinho (sem impostos)                   |
      | `tax`                         | Valor dos impostos                                    |
      | `tax_value`                   | Taxa de imposto aplicada                              |
      | `tax_breakdown`               | Detalhamento de impostos agrupado por taxa            |
      | `tax_breakdown[].rate`        | Taxa de imposto (porcentagem)                         |
      | `tax_breakdown[].label`       | Etiqueta descritiva (ex: "IVA 15%")                   |
      | `tax_breakdown[].amount`      | Valor do imposto para essa taxa                       |

      <Note>
        Quando `enable_per_product_tax` está ativo, `tax_breakdown` pode conter múltiplas entradas com diferentes taxas. Caso contrário, todos os produtos tributados são agrupados sob a taxa global da loja. Para produtos com `has_tax: false`, `tax_rate` será `0`.
      </Note>
    </Accordion>
  </Step>
</Steps>

## 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

<Steps>
  <Step title="Navegar pelo catálogo">
    Você abre o webview e navega pelos produtos disponíveis.
  </Step>

  <Step title="Selecionar produto">
    Você vê os detalhes, confere as imagens e seleciona variantes (tamanho, cor, etc.).
  </Step>

  <Step title="Adicionar ao carrinho">
    Você adiciona produtos ao carrinho e revisa o total.
  </Step>

  <Step title="Concluir a compra">
    Você finaliza o pedido sem sair do WhatsApp.
  </Step>
</Steps>