SEND_INTERACTIVE - Enviar Mensagem Interativa

O que é este Node?

O SEND_INTERACTIVE é o node responsável por enviar mensagens interativas com botões e listas via WhatsApp Business API.

Por que este Node existe?

Interação facilita conversas. O SEND_INTERACTIVE existe para:

Botões: Oferecer opções rápidas de resposta
Listas: Apresentar múltiplas escolhas organizadas
Menu: Criar menus de navegação
Call-to-action: Facilitar ações do usuário
UX melhorada: Tornar interação mais intuitiva

Como funciona internamente?

Quando o SEND_INTERACTIVE é executado, o sistema:

Valida tipo: Verifica interactiveType (button, list, etc)
Valida body: Confirma texto obrigatório
Constrói estrutura: Header, body, footer, action
Adiciona ações: Botões ou lista de opções
Envia para API: POST com tipo interactive
Retorna message_id: Confirma envio

Código interno (whatsapp-meta-executor.service.ts:595-632):

private async sendInteractive(data: WhatsAppMetaNodeData): Promise<any> {
  const interactive: any = {
    type: data.interactiveType,
    body: data.interactiveBody
  };

  if (data.interactiveHeader) {
    interactive.header = data.interactiveHeader;
  }

  if (data.interactiveFooter) {
    interactive.footer = data.interactiveFooter;
  }

  if (data.interactiveAction) {
    interactive.action = data.interactiveAction;
  }

  const payload = {
    messaging_product: 'whatsapp',
    to: data.recipientPhone,
    type: 'interactive',
    interactive
  };

  const response: AxiosResponse = await axios.post(
    `${this.WHATSAPP_API_BASE}/${data.phoneNumberId}/messages`,
    payload,
    {
      headers: {
        'Authorization': `Bearer ${data.accessToken}`,
        'Content-Type': 'application/json'
      }
    }
  );

  return response.data;
}

Parâmetros

Campo	Tipo	Obrigatório	Descrição
operation	string	Sim	Deve ser "send_interactive"
accessToken	string	Sim	Token de acesso da WhatsApp Business API
phoneNumberId	string	Sim	ID do número WhatsApp Business
recipientPhone	string	Sim	Número do destinatário
interactiveType	string	Sim	button, list, product, product_list
interactiveBody	object	Sim	{ text: "Mensagem principal" }
interactiveHeader	object	Não	Cabeçalho (text, image, video, document)
interactiveFooter	object	Não	Rodapé
interactiveAction	object	Sim	Botões ou lista de opções

Exemplo 1: Botões de Confirmação

{
  "name": "Confirmação com Botões - SEND_INTERACTIVE",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "whatsapp_1",
      "type": "whatsapp_meta",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Enviar Botões",
        "parameters": {
          "operation": "send_interactive",
          "accessToken": "EAAxxxxxxxx",
          "phoneNumberId": "123456789",
          "recipientPhone": "5511999999999",
          "interactiveType": "button",
          "interactiveHeader": {
            "type": "text",
            "text": "Confirmação de Agendamento"
          },
          "interactiveBody": {
            "text": "Seu agendamento está marcado para 15/01/2025 às 14:30.\n\nDeseja confirmar?"
          },
          "interactiveFooter": {
            "text": "Responda em até 24h"
          },
          "interactiveAction": {
            "buttons": [
              {
                "type": "reply",
                "reply": {
                  "id": "confirm_yes",
                  "title": "✅ Confirmar"
                }
              },
              {
                "type": "reply",
                "reply": {
                  "id": "confirm_no",
                  "title": "❌ Cancelar"
                }
              },
              {
                "type": "reply",
                "reply": {
                  "id": "confirm_reschedule",
                  "title": "📅 Remarcar"
                }
              }
            ]
          }
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 500, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "whatsapp_1" },
    { "source": "whatsapp_1", "target": "end_1" }
  ]
}

Exemplo 2: Lista de Opções

{
  "name": "Menu com Lista - SEND_INTERACTIVE",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "whatsapp_1",
      "type": "whatsapp_meta",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Enviar Lista",
        "parameters": {
          "operation": "send_interactive",
          "accessToken": "EAAxxxxxxxx",
          "phoneNumberId": "123456789",
          "recipientPhone": "5511999999999",
          "interactiveType": "list",
          "interactiveHeader": {
            "type": "text",
            "text": "Menu de Atendimento"
          },
          "interactiveBody": {
            "text": "Olá! Como posso ajudar?\n\nEscolha uma das opções abaixo:"
          },
          "interactiveFooter": {
            "text": "Atendimento 24h"
          },
          "interactiveAction": {
            "button": "Ver Opções",
            "sections": [
              {
                "title": "Vendas",
                "rows": [
                  {
                    "id": "sales_new",
                    "title": "Nova Compra",
                    "description": "Fazer um novo pedido"
                  },
                  {
                    "id": "sales_status",
                    "title": "Status do Pedido",
                    "description": "Consultar pedido existente"
                  }
                ]
              },
              {
                "title": "Suporte",
                "rows": [
                  {
                    "id": "support_technical",
                    "title": "Suporte Técnico",
                    "description": "Problemas com produto"
                  },
                  {
                    "id": "support_billing",
                    "title": "Financeiro",
                    "description": "Dúvidas sobre pagamento"
                  }
                ]
              }
            ]
          }
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 500, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "whatsapp_1" },
    { "source": "whatsapp_1", "target": "end_1" }
  ]
}

Tipos de Interactive

Button (até 3 botões)

{
  "interactiveType": "button",
  "interactiveAction": {
    "buttons": [
      {
        "type": "reply",
        "reply": {
          "id": "button_id",
          "title": "Texto Botão"
        }
      }
    ]
  }
}

List (múltiplas seções)

{
  "interactiveType": "list",
  "interactiveAction": {
    "button": "Texto do botão de abrir",
    "sections": [
      {
        "title": "Título Seção",
        "rows": [
          {
            "id": "row_id",
            "title": "Título Opção",
            "description": "Descrição da opção"
          }
        ]
      }
    ]
  }
}

Resposta do Node

{
  "messaging_product": "whatsapp",
  "contacts": [
    {
      "input": "5511999999999",
      "wa_id": "5511999999999"
    }
  ],
  "messages": [
    {
      "id": "wamid.HBgNNTUxMTk5OTk5OTk5ORUCABIYFjNBMzYxNzQyQ0JGRjREMTU0QzFEAA=="
    }
  ]
}

Limites

Botões: Máximo 3 botões por mensagem
Título botão: Máximo 20 caracteres
Lista seções: Máximo 10 seções
Lista rows: Máximo 10 rows por seção
Título row: Máximo 24 caracteres
Descrição row: Máximo 72 caracteres

Boas Práticas

✅ SIM: - Use botões para 2-3 opções simples - Use lista para mais de 3 opções ou categorias - IDs únicos e descritivos (ex: "confirm_yes", "cancel_order") - Textos curtos e claros nos botões - Organize lista em seções lógicas

❌ NÃO: - Não ultrapasse limites de caracteres - Não use mais de 3 botões (use lista) - Não crie IDs duplicados - Não omita body text (obrigatório)

Dicas

💡 Escolha tipo: Button para ações rápidas, List para menus complexos 💡 IDs únicos: Use IDs que facilitem identificar ação no webhook 💡 Descrição: Use description em lista para explicar cada opção 💡 Footer: Adicione informações extras no footer (ex: horário atendimento) 💡 Header: Use header para contexto adicional

Próximo Node

→ SEND_MESSAGE - Enviar texto simples → SEND_TEMPLATE - Enviar templates aprovados