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

# Botones

> Muestra botones interactivos para que el usuario seleccione una opción

El nodo **Botones** envía un mensaje con botones que el usuario puede tocar para elegir una opción. Es ideal para guiar la conversación por caminos específicos sin que el usuario tenga que escribir.

## Configuración general

* **Encabezado**: Título del mensaje (máximo 60 caracteres)
* **Contenido**: Mensaje principal que acompaña los botones (máximo 1,024 caracteres en WhatsApp, 640 en Facebook/Instagram)
* **Pie de página**: Texto adicional debajo del contenido (opcional)

### Opciones

Cada botón tiene:

* **Nombre de la opción**: Texto visible en el botón (máximo 20 caracteres)
* **Descripción**: Texto adicional de contexto (opcional, máximo 72 caracteres)

Puedes agregar hasta **3 botones**. Para mostrar más opciones, usa el nodo [Lista](/guides/nodos/lista).

### Tipos de botón

| Tipo         | Comportamiento                                             |
| :----------- | :--------------------------------------------------------- |
| **Postback** | Envía un payload al flujo y continúa por la ruta conectada |
| **URL**      | Abre una página web en el navegador                        |
| **Teléfono** | Inicia una llamada telefónica                              |

### Opciones dinámicas

Si las opciones vienen de un dato variable (por ejemplo, una lista de productos de tu API), puedes activar el modo **dinámico** en lugar de definirlas manualmente.

Configura:

* **Variable fuente**: La variable que contiene la lista (por ejemplo, `{{$memory.productos}}`)
* **Plantilla de etiqueta**: Cómo se muestra cada opción (por ejemplo, `{{$item.nombre}} - ${{$item.precio}}`)
* **Plantilla de descripción**: Texto adicional por opción (por ejemplo, `{{$item.descripcion}}`)

Plantillas predefinidas disponibles: Lista simple, Productos, Horarios disponibles, Sucursales.

## Variables en mensajes

Puedes usar variables en el encabezado y contenido:

```
Encabezado: Hola {{$user.names}}
Contenido: Elige una opción para {{$memory.categoria}}
```

## Configuración avanzada

### Selección obligatoria

Cuando está activada, el usuario **debe** tocar un botón para continuar. Si escribe texto libre, verá un mensaje de error personalizable (máximo 250 caracteres).

### Variable de respuesta

Guarda la opción que el usuario seleccionó en una variable de memoria para usarla más adelante en el flujo.

**Cómo configurarlo:**

1. Activa el interruptor **Guardar respuesta**.
2. Escribe el nombre de la variable (por ejemplo, `departamento`).

#### Valor guardado con opciones estáticas

Cuando los botones están definidos manualmente, se guarda el **payload** del botón elegido como texto plano.

Ejemplo con estos botones:

| Botón           | Payload       |
| :-------------- | :------------ |
| Ventas          | `ventas`      |
| Soporte Técnico | `soporte`     |
| Facturación     | `facturacion` |

Si el usuario toca **Soporte Técnico**:

```javascript theme={null}
// {{$memory.departamento}} contiene:
const departamento = "soporte";
```

#### Valor guardado con opciones dinámicas

Cuando los botones se generan desde una variable fuente, se guarda el **objeto completo** del array al que pertenece la opción seleccionada.

Supón que `{{$memory.departamentos}}` contiene:

```json theme={null}
[
  { "id": "dep1", "nombre": "Ventas", "correo": "ventas@empresa.com" },
  { "id": "dep2", "nombre": "Soporte", "correo": "soporte@empresa.com" },
  { "id": "dep3", "nombre": "Facturación", "correo": "facturacion@empresa.com" }
]
```

Si el usuario toca **Soporte**, la variable queda con el objeto completo:

```javascript theme={null}
// {{$memory.departamento}} contiene el objeto completo:
const departamento = {
  id: "dep2",
  nombre: "Soporte",
  correo: "soporte@empresa.com"
};
```

Puedes acceder a cada propiedad del objeto en nodos posteriores:

```javascript theme={null}
// Acceso a propiedades de {{$memory.departamento}}:
departamento.nombre;  // "Soporte"
departamento.correo;  // "soporte@empresa.com"
departamento.id;      // "dep2"
```

#### Casos de uso

<AccordionGroup>
  <Accordion title="Enrutar el flujo según la selección (opciones estáticas)">
    Conecta un nodo [Condicional](/guides/nodos/condicional) y crea una rama por cada payload:

    ```
    Si {{$memory.departamento}} = "ventas"      → rama Ventas
    Si {{$memory.departamento}} = "soporte"     → rama Soporte
    Si {{$memory.departamento}} = "facturacion" → rama Facturación
    ```
  </Accordion>

  <Accordion title="Usar datos del objeto seleccionado (opciones dinámicas)">
    Con el objeto completo guardado, puedes usarlo directamente en mensajes o nodos posteriores sin nuevas consultas:

    ```
    Texto: "Te conectaré con el equipo de {{$memory.departamento.nombre}}.
    Escríbeles a {{$memory.departamento.correo}}"
    ```
  </Accordion>

  <Accordion title="Personalizar la respuesta del AI Agent">
    Pasa la selección como contexto al nodo [AI Agent](/guides/nodos/ai-agent):

    ```
    El usuario seleccionó el departamento: {{$memory.departamento.nombre}}.
    Correo de contacto: {{$memory.departamento.correo}}.
    Responde con información específica para ese departamento.
    ```
  </Accordion>

  <Accordion title="Registrar la elección en una base de datos">
    Usa un nodo [API](/guides/nodos/api) o [Datum](/guides/nodos/datum) para guardar la selección:

    ```json theme={null}
    {
      "userId": "{{$user.id}}",
      "departamentoId": "{{$memory.departamento.id}}",
      "departamentoNombre": "{{$memory.departamento.nombre}}",
      "timestamp": "{{$context.timestamp}}"
    }
    ```
  </Accordion>
</AccordionGroup>

### Botón de un solo uso

Tras la primera selección, los botones se desactivan. Puedes configurar qué sucede después:

* **Enviar texto**: Muestra un mensaje informativo
* **Redirigir a flujo**: Lleva al usuario a otro flujo

### Botón expira

Si el usuario no selecciona ningún botón dentro del tiempo configurado en tu organización:

* **Enviar texto**: Muestra un mensaje de expiración
* **Redirigir a flujo**: Lleva al usuario a otro flujo