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

# Botões

> Exibe botões interativos para o usuário selecionar uma opção

O nodo **Botões** envia uma mensagem com botões que o usuário pode tocar para escolher uma opção. É ideal para guiar a conversa por caminhos específicos sem que o usuário precise digitar.

## Configuração geral

* **Cabeçalho**: Título da mensagem (máximo 60 caracteres)
* **Conteúdo**: Mensagem principal que acompanha os botões (máximo 1.024 caracteres no WhatsApp, 640 no Facebook/Instagram)
* **Rodapé**: Texto adicional abaixo do conteúdo (opcional)

### Opções

Cada botão tem:

* **Nome da opção**: Texto visível no botão (máximo 20 caracteres)
* **Descrição**: Texto de contexto adicional (opcional, máximo 72 caracteres)

Você pode adicionar até **3 botões**. Para mostrar mais opções, use o nodo [Lista](/pt/guias/nodos/lista).

### Tipos de botão

| Tipo         | Comportamento                                                |
| :----------- | :----------------------------------------------------------- |
| **Postback** | Envia um payload para o fluxo e continua pela rota conectada |
| **URL**      | Abre uma página web no navegador                             |
| **Telefone** | Inicia uma chamada telefônica                                |

### Opções dinâmicas

Se as opções vêm de dados variáveis (por exemplo, uma lista de produtos da sua API), você pode habilitar o modo **dinâmico** em vez de defini-las manualmente.

Configure:

* **Variável de origem**: A variável que contém a lista (por exemplo, `{{$memory.products}}`)
* **Template de rótulo**: Como cada opção é exibida (por exemplo, `{{$item.name}} - ${{$item.price}}`)
* **Template de descrição**: Texto adicional por opção (por exemplo, `{{$item.description}}`)

Templates predefinidos disponíveis: Lista simples, Produtos, Horários disponíveis, Filiais.

## Variáveis nas mensagens

Você pode usar variáveis no cabeçalho e conteúdo:

```
Cabeçalho: Olá {{$user.names}}
Conteúdo: Escolha uma opção para {{$memory.category}}
```

## Configuração avançada

### Seleção obrigatória

Quando habilitado, o usuário **deve** tocar em um botão para continuar. Se digitar texto livre, verá uma mensagem de erro personalizável (máximo 250 caracteres).

### Variável de resposta

Salva a opção selecionada pelo usuário em uma variável de memória para uso posterior no fluxo.

**Como configurar:**

1. Habilite o toggle **Salvar resposta**.
2. Insira o nome da variável (por exemplo, `department`).

#### Valor salvo com opções estáticas

Quando os botões são definidos manualmente, o **payload** do botão escolhido é salvo como texto simples.

Exemplo com estes botões:

| Botão           | Payload   |
| :-------------- | :-------- |
| Vendas          | `sales`   |
| Suporte Técnico | `support` |
| Faturamento     | `billing` |

Se o usuário tocar em **Suporte Técnico**:

```javascript theme={null}
// {{$memory.department}} contém:
const department = "support";
```

#### Valor salvo com opções dinâmicas

Quando os botões são gerados a partir de uma variável de origem, o **objeto completo** do array ao qual a opção selecionada pertence é salvo.

Suponha que `{{$memory.departments}}` contenha:

```json theme={null}
[
  { "id": "dep1", "name": "Sales", "email": "sales@company.com" },
  { "id": "dep2", "name": "Support", "email": "support@company.com" },
  { "id": "dep3", "name": "Billing", "email": "billing@company.com" }
]
```

Se o usuário tocar em **Support**, a variável contém o objeto completo:

```javascript theme={null}
// {{$memory.department}} contém o objeto completo:
const department = {
  id: "dep2",
  name: "Support",
  email: "support@company.com"
};
```

Você pode acessar cada propriedade do objeto em nodos subsequentes:

```javascript theme={null}
// Acessando propriedades de {{$memory.department}}:
department.name;   // "Support"
department.email;  // "support@company.com"
department.id;     // "dep2"
```

#### Casos de uso

<AccordionGroup>
  <Accordion title="Direcionar o fluxo com base na seleção (opções estáticas)">
    Conecte um nodo [Condicional](/pt/guias/nodos/condicional) e crie um ramo para cada payload:

    ```
    Se {{$memory.department}} = "sales"   → Ramo Vendas
    Se {{$memory.department}} = "support" → Ramo Suporte
    Se {{$memory.department}} = "billing" → Ramo Faturamento
    ```
  </Accordion>

  <Accordion title="Usar dados do objeto selecionado (opções dinâmicas)">
    Com o objeto completo salvo, você pode usá-lo diretamente em mensagens ou nodos subsequentes sem consultas adicionais:

    ```
    Texto: "Vou conectá-lo com a equipe {{$memory.department.name}}.
    Escreva para eles em {{$memory.department.email}}"
    ```
  </Accordion>

  <Accordion title="Personalizar a resposta do AI Agent">
    Passe a seleção como contexto para o nodo [AI Agent](/pt/guias/nodos/ai-agent):

    ```
    O usuário selecionou o departamento: {{$memory.department.name}}.
    E-mail de contato: {{$memory.department.email}}.
    Responda com informações específicas para esse departamento.
    ```
  </Accordion>

  <Accordion title="Registrar a escolha em um banco de dados">
    Use um nodo [API](/pt/guias/nodos/api) ou [Datum](/pt/guias/nodos/datum) para salvar a seleção:

    ```json theme={null}
    {
      "userId": "{{$user.id}}",
      "departmentId": "{{$memory.department.id}}",
      "departmentName": "{{$memory.department.name}}",
      "timestamp": "{{$context.timestamp}}"
    }
    ```
  </Accordion>
</AccordionGroup>

### Botão de uso único

Após a primeira seleção, os botões são desativados. Você pode configurar o que acontece depois:

* **Enviar texto**: Exibe uma mensagem informativa
* **Redirecionar para fluxo**: Leva o usuário a outro fluxo

### Botão expira

Se o usuário não selecionar nenhum botão dentro do tempo configurado na sua organização:

* **Enviar texto**: Exibe uma mensagem de expiração
* **Redirecionar para fluxo**: Leva o usuário a outro fluxo