BUTTONS - Botões de Resposta Rápida WhatsApp

O que é este Node?

O BUTTONS é o node responsável por criar botões de resposta rápida nativos do WhatsApp, permitindo que usuários façam escolhas simples de forma visual e intuitiva. É a maneira mais rápida e direta de coletar respostas objetivas em conversas.

Por que este Node existe?

Quando você precisa de respostas rápidas e objetivas, digitar texto livre é lento e propenso a erros. O BUTTONS existe para:

Respostas Instantâneas: Usuário clica em vez de digitar, reduzindo atrito e aumentando taxa de resposta
Validação Automática: Respostas são pré-definidas, eliminando erros de digitação ou respostas inválidas
Interface Nativa: Usa componente oficial do WhatsApp, garantindo experiência familiar e confiável
Ações Claras: Botões visuais mostram exatamente quais ações estão disponíveis, reduzindo confusão

Como funciona internamente?

Quando o BUTTONS é executado, o sistema:

Valida Quantidade: Verifica se há 1-3 botões (limite do WhatsApp)
Valida Texto: Confirma que cada botão tem texto (máx 20 caracteres)
Gera IDs Únicos: Cria IDs automáticos para botões sem ID definido
Corta Texto Longo: Automaticamente limita texto a 20 chars se exceder
Constrói Payload WhatsApp: Monta estrutura interactive com type reply
Adiciona Elementos Opcionais: Inclui header e footer se fornecidos
Retorna Estrutura Pronta: Envia payload aguardando clique do usuário

Código interno (whatsapp-ui-executor.service.ts:103-162):

private async executeButtons(parameters: any, context: any): Promise<any> {
  const { body, buttons, header, footer } = parameters;

  this.logger.log(`🔘 BUTTONS - Creating WhatsApp buttons: ${buttons?.length || 0} buttons`);

  // Validate buttons
  if (!buttons || buttons.length === 0) {
    throw new Error('Buttons node requires at least one button');
  }

  if (buttons.length > 3) {
    throw new Error('WhatsApp supports maximum 3 buttons per message');
  }

  // Validate button text length (WhatsApp limit: 20 characters)
  buttons.forEach((button, index) => {
    if (button.text && button.text.length > 20) {
      this.logger.warn(`Button ${index + 1} text exceeds 20 character limit: "${button.text}"`);
    }
  });

  // Build WhatsApp buttons structure
  const whatsappButtons = {
    type: 'interactive',
    body: {
      text: body || 'Please choose an option:'
    },
    action: {
      buttons: buttons.map((button, index) => ({
        type: 'reply',
        reply: {
          id: button.id || `button_${index}`,
          title: (button.text || `Button ${index + 1}`).substring(0, 20) // Enforce 20 char limit
        }
      }))
    }
  };

  if (header) {
    whatsappButtons['header'] = {
      type: 'text',
      text: header
    };
  }

  if (footer) {
    whatsappButtons['footer'] = {
      text: footer
    };
  }

  return {
    success: true,
    action: 'whatsapp_buttons_created',
    messageType: 'interactive_buttons',
    payload: whatsappButtons,
    awaitingUserSelection: true,
    timestamp: new Date().toISOString()
  };
}

Quando você DEVE usar este Node?

Use BUTTONS sempre que precisar de escolhas simples e rápidas com 1-3 opções:

Casos de uso

Confirmação Sim/Não: "Deseja confirmar o pedido?" → [Sim] [Não]
Escolha de Categoria: "Qual departamento?" → [Vendas] [Suporte] [Financeiro]
Avaliação Rápida: "Como foi o atendimento?" → [Ótimo] [Bom] [Ruim]
Ações de Fluxo: "O que deseja fazer?" → [Continuar] [Cancelar] [Falar com atendente]
Navegação: "Próximo passo?" → [Ver produtos] [Fazer pedido] [Sair]

Quando NÃO usar BUTTONS

4+ opções: Use MENU ou LIST para múltiplas escolhas organizadas
Resposta em texto livre: Use INPUT quando precisa de texto digitado pelo usuário
Coleta de dados específicos: Use NUMBER, EMAIL, PHONE para validação especializada
Opções com descrições longas: Use MENU que suporta descrições detalhadas

Parâmetros Detalhados

body (string, obrigatório)

O que é: Texto principal da mensagem, explicando ao usuário qual escolha ele deve fazer.

Padrão: "Please choose an option:"

Flow completo para testar:

{
  "name": "Teste BUTTONS - Body Personalizado",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "buttons_1",
      "type": "buttons",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Pergunta com Body",
        "parameters": {
          "body": "🎯 Seu pedido está pronto para envio!\n\nDeseja confirmar o endereço de entrega?",
          "buttons": [
            { "id": "confirmar", "text": "✅ Sim, está correto" },
            { "id": "alterar", "text": "📝 Alterar endereço" }
          ]
        }
      }
    },
    {
      "id": "message_1",
      "type": "message",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Processar Resposta",
        "parameters": {
          "message": "Você selecionou: {{button_response}}"
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 700, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "buttons_1" },
    { "source": "buttons_1", "target": "message_1" },
    { "source": "message_1", "target": "end_1" }
  ]
}

Teste: 1. Inicie o flow 2. Verá mensagem personalizada com emojis e quebras de linha 3. Dois botões aparecem abaixo da mensagem 4. Clique em qualquer botão 5. Sistema captura o ID do botão clicado

buttons (array, obrigatório)

O que é: Array de botões a serem exibidos. Cada botão tem id (identificador único) e text (texto exibido).

Estrutura de cada botão:

{
  id: string,    // ID único do botão (usado no flow)
  text: string   // Texto exibido (máx 20 caracteres)
}

Limite: Mínimo 1, máximo 3 botões

Flow completo para testar:

{
  "name": "Teste BUTTONS - Três Botões",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "buttons_1",
      "type": "buttons",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Três Opções",
        "parameters": {
          "body": "Como podemos ajudar você hoje?",
          "buttons": [
            { "id": "comprar", "text": "🛒 Comprar produtos" },
            { "id": "rastrear", "text": "📦 Rastrear pedido" },
            { "id": "suporte", "text": "🆘 Falar com suporte" }
          ]
        }
      }
    },
    {
      "id": "switch_1",
      "type": "switch",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Direcionar Ação",
        "parameters": {
          "variable": "{{button_response}}",
          "cases": [
            { "value": "comprar", "label": "Comprar" },
            { "value": "rastrear", "label": "Rastrear" },
            { "value": "suporte", "label": "Suporte" }
          ]
        }
      }
    },
    {
      "id": "message_comprar",
      "type": "message",
      "position": { "x": 700, "y": 0 },
      "data": {
        "label": "Resposta Comprar",
        "parameters": {
          "message": "🛒 Ótimo! Vamos ver nossos produtos..."
        }
      }
    },
    {
      "id": "message_rastrear",
      "type": "message",
      "position": { "x": 700, "y": 100 },
      "data": {
        "label": "Resposta Rastrear",
        "parameters": {
          "message": "📦 Vou buscar seu pedido. Digite o número:"
        }
      }
    },
    {
      "id": "message_suporte",
      "type": "message",
      "position": { "x": 700, "y": 200 },
      "data": {
        "label": "Resposta Suporte",
        "parameters": {
          "message": "🆘 Conectando com atendente humano..."
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 900, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "buttons_1" },
    { "source": "buttons_1", "target": "switch_1" },
    { "source": "switch_1", "target": "message_comprar", "label": "Comprar" },
    { "source": "switch_1", "target": "message_rastrear", "label": "Rastrear" },
    { "source": "switch_1", "target": "message_suporte", "label": "Suporte" },
    { "source": "message_comprar", "target": "end_1" },
    { "source": "message_rastrear", "target": "end_1" },
    { "source": "message_suporte", "target": "end_1" }
  ]
}

Teste: 1. Inicie o flow 2. Três botões aparecem com emojis e textos claros 3. Clique em qualquer botão (ex: "Rastrear pedido") 4. SWITCH direciona para mensagem específica daquele botão 5. Cada botão leva a uma ação diferente

header (string, opcional)

O que é: Título destacado exibido acima do body, ideal para chamar atenção ou categorizar a mensagem.

Padrão: Nenhum (mensagem sem header)

Flow completo para testar:

{
  "name": "Teste BUTTONS - Header",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "buttons_1",
      "type": "buttons",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Botões com Header",
        "parameters": {
          "header": "🚨 Ação Necessária",
          "body": "Sua assinatura vence em 3 dias.\n\nDeseja renovar agora?",
          "buttons": [
            { "id": "renovar", "text": "✅ Sim, renovar" },
            { "id": "lembrar", "text": "⏰ Lembrar depois" },
            { "id": "cancelar", "text": "❌ Cancelar plano" }
          ]
        }
      }
    },
    {
      "id": "message_1",
      "type": "message",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Confirmar Ação",
        "parameters": {
          "message": "Processando sua escolha: {{button_response}}"
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 700, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "buttons_1" },
    { "source": "buttons_1", "target": "message_1" },
    { "source": "message_1", "target": "end_1" }
  ]
}

Teste: 1. Inicie o flow 2. Header "🚨 Ação Necessária" aparece em destaque no topo 3. Body explica a situação abaixo do header 4. Três botões de ação aparecem 5. Header chama atenção para urgência da mensagem

O que é: Texto adicional exibido abaixo dos botões, ideal para informações secundárias ou avisos.

Padrão: Nenhum (mensagem sem footer)

Flow completo para testar:

{
  "name": "Teste BUTTONS - Footer",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "buttons_1",
      "type": "buttons",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Botões com Footer",
        "parameters": {
          "header": "📝 Pesquisa de Satisfação",
          "body": "Como você avalia nosso atendimento?",
          "footer": "Sua opinião é muito importante para nós ❤️",
          "buttons": [
            { "id": "otimo", "text": "😍 Excelente" },
            { "id": "bom", "text": "😊 Bom" },
            { "id": "ruim", "text": "😞 Pode melhorar" }
          ]
        }
      }
    },
    {
      "id": "message_1",
      "type": "message",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Agradecer Feedback",
        "parameters": {
          "message": "🙏 Obrigado pelo seu feedback!\n\nSua avaliação: {{button_response}}"
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 700, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "buttons_1" },
    { "source": "buttons_1", "target": "message_1" },
    { "source": "message_1", "target": "end_1" }
  ]
}

Teste: 1. Inicie o flow 2. Mensagem de pesquisa com header, body e footer 3. Footer aparece em cinza claro abaixo dos botões 4. Clique em qualquer botão de avaliação 5. Sistema agradece e mostra a avaliação recebida

Parâmetros

Campo	Tipo	Obrigatório	Descrição
body	string	Sim	Texto principal da mensagem (padrão: "Please choose an option:")
buttons	array	Sim	Array de 1-3 botões (id, text com máx 20 chars)
header	string	Não	Título destacado acima do body
footer	string	Não	Texto adicional abaixo dos botões

Exemplo 1: Confirmação de Pedido E-commerce

Objetivo: Flow completo de confirmação de pedido com validação de dados

JSON para Importar

{
  "name": "E-commerce - Confirmação de Pedido",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "message_1",
      "type": "message",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Resumo do Pedido",
        "parameters": {
          "message": "🛒 Resumo do seu pedido:\n\n📦 Produto: iPhone 15 Pro\n💰 Valor: R$ 7.999,00\n📍 Endereço: Rua das Flores, 123\n🚚 Entrega: 2-3 dias úteis\n\n💳 Total: R$ 7.999,00"
        }
      }
    },
    {
      "id": "buttons_1",
      "type": "buttons",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Confirmar Pedido",
        "parameters": {
          "header": "✅ Confirmar Compra",
          "body": "Todos os dados estão corretos?\n\nAo confirmar, você será direcionado para o pagamento.",
          "footer": "🔒 Compra 100% segura",
          "buttons": [
            { "id": "confirmar", "text": "✅ Confirmar pedido" },
            { "id": "editar", "text": "✏️ Editar dados" },
            { "id": "cancelar", "text": "❌ Cancelar" }
          ]
        }
      }
    },
    {
      "id": "switch_1",
      "type": "switch",
      "position": { "x": 700, "y": 100 },
      "data": {
        "label": "Processar Escolha",
        "parameters": {
          "variable": "{{button_response}}",
          "cases": [
            { "value": "confirmar", "label": "Confirmar" },
            { "value": "editar", "label": "Editar" },
            { "value": "cancelar", "label": "Cancelar" }
          ]
        }
      }
    },
    {
      "id": "message_confirmar",
      "type": "message",
      "position": { "x": 900, "y": 0 },
      "data": {
        "label": "Pedido Confirmado",
        "parameters": {
          "message": "🎉 Pedido confirmado!\n\n🔢 Número: #12345\n💳 Gerando link de pagamento...\n\n[LINK DE PAGAMENTO]\n\n⏰ Você tem 30 minutos para efetuar o pagamento."
        }
      }
    },
    {
      "id": "message_editar",
      "type": "message",
      "position": { "x": 900, "y": 100 },
      "data": {
        "label": "Editar Pedido",
        "parameters": {
          "message": "✏️ Sem problemas!\n\nO que você gostaria de alterar?\n- Endereço\n- Forma de pagamento\n- Produto\n\nDigite ou escolha:"
        }
      }
    },
    {
      "id": "message_cancelar",
      "type": "message",
      "position": { "x": 900, "y": 200 },
      "data": {
        "label": "Pedido Cancelado",
        "parameters": {
          "message": "❌ Pedido cancelado.\n\nSeu carrinho foi salvo.\n\n💡 Quando quiser, é só voltar e finalizar a compra!\n\nPrecisa de ajuda? Digite 'suporte'."
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 1100, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "message_1" },
    { "source": "message_1", "target": "buttons_1" },
    { "source": "buttons_1", "target": "switch_1" },
    { "source": "switch_1", "target": "message_confirmar", "label": "Confirmar" },
    { "source": "switch_1", "target": "message_editar", "label": "Editar" },
    { "source": "switch_1", "target": "message_cancelar", "label": "Cancelar" },
    { "source": "message_confirmar", "target": "end_1" },
    { "source": "message_editar", "target": "end_1" },
    { "source": "message_cancelar", "target": "end_1" }
  ]
}

Saída esperada:

Sistema: 🛒 Resumo do seu pedido:

📦 Produto: iPhone 15 Pro
💰 Valor: R$ 7.999,00
📍 Endereço: Rua das Flores, 123
🚚 Entrega: 2-3 dias úteis

💳 Total: R$ 7.999,00

[Botões aparecem]
Header: ✅ Confirmar Compra
Body: Todos os dados estão corretos?

Ao confirmar, você será direcionado para o pagamento.

Footer: 🔒 Compra 100% segura

[✅ Confirmar pedido] [✏️ Editar dados] [❌ Cancelar]

Usuário: [Clica em "✅ Confirmar pedido"]

Sistema: 🎉 Pedido confirmado!

🔢 Número: #12345
💳 Gerando link de pagamento...

[LINK DE PAGAMENTO]

⏰ Você tem 30 minutos para efetuar o pagamento.

Exemplo 2: Sistema de Triagem Médica

Objetivo: Triagem inicial para direcionar paciente ao departamento correto

JSON para Importar

{
  "name": "Triagem Médica - Classificação de Urgência",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "message_1",
      "type": "message",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Boas-vindas Hospital",
        "parameters": {
          "message": "🏥 Hospital São Lucas\nCentral de Atendimento 24h\n\nOlá! Vamos fazer uma triagem rápida para melhor atendê-lo."
        }
      }
    },
    {
      "id": "buttons_1",
      "type": "buttons",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Classificar Urgência",
        "parameters": {
          "header": "🚨 Nível de Urgência",
          "body": "Qual a situação atual do paciente?",
          "footer": "Em caso de emergência grave, ligue 192",
          "buttons": [
            { "id": "emergencia", "text": "🔴 Emergência" },
            { "id": "urgente", "text": "🟡 Urgente" },
            { "id": "consulta", "text": "🟢 Consulta normal" }
          ]
        }
      }
    },
    {
      "id": "switch_1",
      "type": "switch",
      "position": { "x": 700, "y": 100 },
      "data": {
        "label": "Direcionar Atendimento",
        "parameters": {
          "variable": "{{button_response}}",
          "cases": [
            { "value": "emergencia", "label": "Emergência" },
            { "value": "urgente", "label": "Urgente" },
            { "value": "consulta", "label": "Consulta" }
          ]
        }
      }
    },
    {
      "id": "message_emergencia",
      "type": "message",
      "position": { "x": 900, "y": 0 },
      "data": {
        "label": "Emergência",
        "parameters": {
          "message": "🔴 EMERGÊNCIA DETECTADA\n\n🚨 Acionando equipe de emergência\n🏃 Prepare-se para chegada imediata\n📍 Vá direto ao PRONTO SOCORRO\n\n⚠️ Se não conseguir vir, ligue 192 IMEDIATAMENTE\n\nEstamos te aguardando!"
        }
      }
    },
    {
      "id": "message_urgente",
      "type": "message",
      "position": { "x": 900, "y": 100 },
      "data": {
        "label": "Urgente",
        "parameters": {
          "message": "🟡 Caso urgente identificado\n\n📋 Você será atendido com prioridade\n⏱️ Tempo médio de espera: 30 minutos\n📍 Dirija-se à RECEPÇÃO URGENTE\n\n🆔 Traga documento com foto\n💳 Convênio/particular\n\nEstamos preparados para recebê-lo."
        }
      }
    },
    {
      "id": "message_consulta",
      "type": "message",
      "position": { "x": 900, "y": 200 },
      "data": {
        "label": "Consulta Normal",
        "parameters": {
          "message": "🟢 Consulta de rotina\n\n📅 Vamos agendar sua consulta:\n\n👨‍⚕️ Qual especialidade você precisa?\n- Clínico Geral\n- Cardiologista\n- Ortopedista\n- Pediatra\n- Outra\n\nDigite a especialidade:"
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 1100, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "message_1" },
    { "source": "message_1", "target": "buttons_1" },
    { "source": "buttons_1", "target": "switch_1" },
    { "source": "switch_1", "target": "message_emergencia", "label": "Emergência" },
    { "source": "switch_1", "target": "message_urgente", "label": "Urgente" },
    { "source": "switch_1", "target": "message_consulta", "label": "Consulta" },
    { "source": "message_emergencia", "target": "end_1" },
    { "source": "message_urgente", "target": "end_1" },
    { "source": "message_consulta", "target": "end_1" }
  ]
}

Saída esperada:

Sistema: 🏥 Hospital São Lucas
Central de Atendimento 24h

Olá! Vamos fazer uma triagem rápida para melhor atendê-lo.

[Botões aparecem]
Header: 🚨 Nível de Urgência
Body: Qual a situação atual do paciente?
Footer: Em caso de emergência grave, ligue 192

[🔴 Emergência] [🟡 Urgente] [🟢 Consulta normal]

Usuário: [Clica em "🔴 Emergência"]

Sistema: 🔴 EMERGÊNCIA DETECTADA

🚨 Acionando equipe de emergência
🏃 Prepare-se para chegada imediata
📍 Vá direto ao PRONTO SOCORRO

⚠️ Se não conseguir vir, ligue 192 IMEDIATAMENTE

Estamos te aguardando!

Exemplo 3: Pesquisa de Satisfação Pós-Atendimento

Objetivo: Coletar feedback do cliente após atendimento ou compra

JSON para Importar

{
  "name": "Pesquisa de Satisfação - NPS",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "message_1",
      "type": "message",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Introdução Pesquisa",
        "parameters": {
          "message": "Olá! 👋\n\nEsperamos que tenha gostado do nosso atendimento.\n\nPodemos fazer 3 perguntinhas rápidas? Leva menos de 1 minuto! ⏱️"
        }
      }
    },
    {
      "id": "buttons_1",
      "type": "buttons",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Aceitar Pesquisa",
        "parameters": {
          "body": "Aceita participar da pesquisa?",
          "buttons": [
            { "id": "sim", "text": "✅ Sim, vamos lá!" },
            { "id": "nao", "text": "❌ Agora não" }
          ]
        }
      }
    },
    {
      "id": "condition_1",
      "type": "condition",
      "position": { "x": 700, "y": 100 },
      "data": {
        "label": "Verificar Aceitação",
        "parameters": {
          "variable": "{{button_response}}",
          "operator": "equals",
          "value": "sim"
        }
      }
    },
    {
      "id": "buttons_2",
      "type": "buttons",
      "position": { "x": 900, "y": 0 },
      "data": {
        "label": "Pergunta 1 - Atendimento",
        "parameters": {
          "header": "📝 Pergunta 1 de 3",
          "body": "Como você avalia o atendimento?",
          "buttons": [
            { "id": "otimo", "text": "😍 Excelente" },
            { "id": "bom", "text": "😊 Bom" },
            { "id": "ruim", "text": "😞 Ruim" }
          ]
        }
      }
    },
    {
      "id": "buttons_3",
      "type": "buttons",
      "position": { "x": 1100, "y": 0 },
      "data": {
        "label": "Pergunta 2 - Tempo",
        "parameters": {
          "header": "📝 Pergunta 2 de 3",
          "body": "O tempo de resposta foi adequado?",
          "buttons": [
            { "id": "sim_rapido", "text": "✅ Sim, rápido" },
            { "id": "ok", "text": "😐 Aceitável" },
            { "id": "demorou", "text": "⏰ Demorou muito" }
          ]
        }
      }
    },
    {
      "id": "buttons_4",
      "type": "buttons",
      "position": { "x": 1300, "y": 0 },
      "data": {
        "label": "Pergunta 3 - Recomendação",
        "parameters": {
          "header": "📝 Pergunta 3 de 3",
          "body": "Você nos recomendaria para um amigo?",
          "footer": "Última pergunta! 🎉",
          "buttons": [
            { "id": "sim_recomendar", "text": "👍 Com certeza!" },
            { "id": "talvez", "text": "🤔 Talvez" },
            { "id": "nao_recomendar", "text": "👎 Não" }
          ]
        }
      }
    },
    {
      "id": "message_agradecimento",
      "type": "message",
      "position": { "x": 1500, "y": 0 },
      "data": {
        "label": "Agradecer Participação",
        "parameters": {
          "message": "🎉 Pesquisa concluída!\n\n💚 Muito obrigado pelo seu feedback!\nSua opinião nos ajuda a melhorar cada dia mais.\n\n🎁 Como agradecimento, você ganhou 10% de desconto na próxima compra!\n\nCódigo: OBRIGADO10\n\nVolte sempre! 😊"
        }
      }
    },
    {
      "id": "message_recusa",
      "type": "message",
      "position": { "x": 900, "y": 200 },
      "data": {
        "label": "Mensagem Recusa",
        "parameters": {
          "message": "Sem problemas! ✨\n\nSe mudar de ideia, é só nos chamar.\n\nEstamos sempre aqui para você! 💙"
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 1700, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "message_1" },
    { "source": "message_1", "target": "buttons_1" },
    { "source": "buttons_1", "target": "condition_1" },
    { "source": "condition_1", "target": "buttons_2", "label": "Sim" },
    { "source": "condition_1", "target": "message_recusa", "label": "Não" },
    { "source": "buttons_2", "target": "buttons_3" },
    { "source": "buttons_3", "target": "buttons_4" },
    { "source": "buttons_4", "target": "message_agradecimento" },
    { "source": "message_agradecimento", "target": "end_1" },
    { "source": "message_recusa", "target": "end_1" }
  ]
}

Saída esperada:

Sistema: Olá! 👋

Esperamos que tenha gostado do nosso atendimento.

Podemos fazer 3 perguntinhas rápidas? Leva menos de 1 minuto! ⏱️

[Botões aparecem]
Body: Aceita participar da pesquisa?

[✅ Sim, vamos lá!] [❌ Agora não]

Usuário: [Clica "✅ Sim, vamos lá!"]

[Pergunta 1 aparece]
Header: 📝 Pergunta 1 de 3
Body: Como você avalia o atendimento?

[😍 Excelente] [😊 Bom] [😞 Ruim]

Usuário: [Clica "😍 Excelente"]

[Pergunta 2 aparece]
Header: 📝 Pergunta 2 de 3
Body: O tempo de resposta foi adequado?

[✅ Sim, rápido] [😐 Aceitável] [⏰ Demorou muito]

Usuário: [Clica "✅ Sim, rápido"]

[Pergunta 3 aparece]
Header: 📝 Pergunta 3 de 3
Body: Você nos recomendaria para um amigo?
Footer: Última pergunta! 🎉

[👍 Com certeza!] [🤔 Talvez] [👎 Não]

Usuário: [Clica "👍 Com certeza!"]

Sistema: 🎉 Pesquisa concluída!

💚 Muito obrigado pelo seu feedback!
Sua opinião nos ajuda a melhorar cada dia mais.

🎁 Como agradecimento, você ganhou 10% de desconto na próxima compra!

Código: OBRIGADO10

Volte sempre! 😊

Resposta do Node

{
  "success": true,
  "action": "whatsapp_buttons_created",
  "messageType": "interactive_buttons",
  "payload": {
    "type": "interactive",
    "header": {
      "type": "text",
      "text": "✅ Confirmar Compra"
    },
    "body": {
      "text": "Todos os dados estão corretos?"
    },
    "footer": {
      "text": "🔒 Compra 100% segura"
    },
    "action": {
      "buttons": [
        {
          "type": "reply",
          "reply": {
            "id": "confirmar",
            "title": "✅ Confirmar pedido"
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "editar",
            "title": "✏️ Editar dados"
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "cancelar",
            "title": "❌ Cancelar"
          }
        }
      ]
    }
  },
  "awaitingUserSelection": true,
  "timestamp": "2025-01-15T10:30:00.000Z"
}

Boas Práticas

✅ SIM:

Use texto claro e objetivo nos botões (máx 20 chars é pouco!)
Adicione emojis estratégicos para identificação visual rápida (✅❌📝🆘)
Combine com SWITCH para direcionar ações diferentes por botão
Use IDs descritivos que fazem sentido no código (ex: "confirmar", "cancelar")
Aproveite header para contexto e footer para avisos importantes
Limite-se a 3 botões (mesmo sendo o máximo, pode usar 1 ou 2 se fizer sentido)
Ordene botões por importância (ação principal primeiro)
Use linguagem que inspira ação ("Confirmar agora" vs apenas "Ok")

❌ NÃO:

Não crie texto de botão maior que 20 caracteres (será cortado automaticamente)
Não use mais de 3 botões (WhatsApp não suporta)
Não coloque botões sem contexto (sempre explique o que usuário está escolhendo)
Não use IDs iguais em botões diferentes (causa conflito)
Não esqueça SWITCH ou CONDITION para processar a resposta
Não use botões quando precisa de 4+ opções (use MENU)
Não force usuário a digitar quando pode clicar (ruim para UX)

Dicas

💡 Ordem Importa: Botão do topo geralmente tem mais cliques. Coloque a ação principal primeiro (ex: "Confirmar" antes de "Cancelar").

💡 Emojis Aumentam Conversão: Botões com emojis são 30% mais clicados. Use com moderação e relevância.

💡 Limite de Caracteres: Sistema corta automaticamente em 20 chars. Teste seus textos! "Confirmar agendamento" vira "Confirmar agendament".

💡 Capture em Variável: Sempre salve resposta do botão em variável (ex: {{button_response}}) para usar em lógica posterior.

💡 Combinação Poderosa: BUTTONS + SWITCH é uma dupla perfeita. Botões coletam, SWITCH direciona ações diferentes.

💡 Header e Footer Opcionais: Use header para urgência/importância ("🚨 Ação Necessária") e footer para avisos ("🔒 Seguro").

💡 Testes A/B: Teste diferentes textos de botões. "✅ Sim" vs "✅ Confirmar" vs "✅ Quero" podem ter conversões diferentes.

💡 Evite Ambiguidade: "Ok" pode significar muitas coisas. Seja específico: "Aceitar termos", "Confirmar dados", "Prosseguir".

Próximo Node

→ MENU - Menu interativo com múltiplas opções organizadas em seções → LIST - Lista de seleção com até 10 itens → SWITCH - Direcione flow baseado no botão clicado → CONDITION - Valide resposta do botão com lógica condicional

BUTTONS - Botões de Resposta Rápida WhatsApp

O que é este Node?

Por que este Node existe?

Como funciona internamente?

Quando você DEVE usar este Node?

Casos de uso

Quando NÃO usar BUTTONS

Parâmetros Detalhados

body (string, obrigatório)

buttons (array, obrigatório)

header (string, opcional)

footer (string, opcional)

Parâmetros

Exemplo 1: Confirmação de Pedido E-commerce

JSON para Importar

Exemplo 2: Sistema de Triagem Médica

JSON para Importar

Exemplo 3: Pesquisa de Satisfação Pós-Atendimento

JSON para Importar

Resposta do Node

Boas Práticas

Dicas

Próximo Node