# Botón de un bloque o de un disparador de conexión

## Cómo crear un botón a partir de una conexión

Los botones de teclado se pueden crear usando conectores. Para ello, arrastra un conector y abre el editor:

<div data-with-frame="true"><figure><img src="/files/4ca42ec86cdbbddc5ea48afd9356ace8dd33aa0e" alt=""><figcaption></figcaption></figure></div>

Para crear botones a partir de conexiones:

1. Activa este interruptor.
2. Para cada conexión, introduce el texto del botón deseado en su **"Disparador"** campo.

{% hint style="warning" %}
¡Nota!

Esto funciona solo en mensajeros que admiten botones.
{% endhint %}

{% hint style="warning" %}
Puedes crear **SOLO botones de teclado** usando conexiones.
{% endhint %}

**Luego, aplica la misma configuración a las demás conexiones:**

1. **Abrir la configuración de la conexión:** haz clic en el conector para abrir su configuración.
2. **Configura el texto del botón:** en el **Disparador** campo, introduce el texto que deseas mostrar en el botón.
3. **Selecciona el tipo de coincidencia:** establece el tipo de comparación en **"Coincidencia exacta"**.
4. **Habilitar la visualización del botón:** activa la opción **"Mostrar como botón"** .
5. **Guardar la configuración:** haz clic en **"Guardar"** para aplicar la configuración.

<div data-with-frame="true"><figure><img src="/files/2762d08ad9a97ad8d71ed7e3c555e5788ebe3e94" alt=""><figcaption></figcaption></figure></div>

**Línea y posición:** los botones creados a partir de conexiones se apilan verticalmente de forma predeterminada. Usa este campo para especificar un número de línea y controlar la posición vertical de un botón en el diseño.

<div data-with-frame="true"><figure><img src="/files/d4de3542fff8f400f81ae8b5dd97e14c2204e660" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
LA numeración de LÍNEA y posición COMIENZA EN 0.
\
El primer botón en la línea superior tendrá los valores 0 y 0.
{% endhint %}

**Color del botón:** Si es necesario, puedes especificar el color del botón — esto funciona en chat en línea y Viber.

<div data-with-frame="true"><figure><img src="/files/027d16563fb3587fe0e9acab303e41ac97bbbe0d" alt=""><figcaption></figcaption></figure></div>

Resultado:

<div data-with-frame="true"><figure><img src="/files/4a291edd1b9e8e664940613ca3d9106f646bfd85" alt="" width="563"><figcaption></figcaption></figure></div>

## **Botón a partir de un disparador de bloque**

Ahora veamos un método más avanzado para crear botones usando la **"Configuración avanzada de botones"** en la **Botones** sección.

del editor de bloques. Anteriormente, creamos botones usando conexiones y disparadores en los conectores. Un método alternativo es usar bloques de disparo dedicados, como el **Bloque de inicio** (punto de entrada del embudo) o **Bloque disparador**.

**Paso 1: Crea la estructura del bloque**

1. Crea un **Bloque de inicio** (el punto de entrada del embudo).
2. Crea varios bloques adicionales debajo de él. El número de bloques debe coincidir con el número de botones que necesitas.

**Ejemplo:** En el flujo de trabajo siguiente, se crean tres bloques para corresponder con tres botones.

<div data-with-frame="true"><figure><img src="/files/def6630798d38401476ec9b87a91ad15710c8237" alt=""><figcaption></figcaption></figure></div>

**Paso 2.** Configura las condiciones de disparo en los bloques posteriores (en este ejemplo, los tres bloques de inicio).

<div data-with-frame="true"><figure><img src="/files/e20ee1f31888704e1c44c6ba78b7f2cd311238cf" alt=""><figcaption></figcaption></figure></div>

**Paso 3.** Ve al bloque principal (el punto de entrada del embudo) y haz clic en la pestaña Botones.

<div data-with-frame="true"><figure><img src="/files/1c1db3cd3d2b9ff72d78424108d956b3f2e6d389" alt=""><figcaption></figcaption></figure></div>

**Paso 4.** En la **Botones** sección del editor de bloques, cambia a **Configuración avanzada** e inserta el código de tu botón personalizado.

`[{"line":0,"index_in_line":0,"text":"Go","type":"reply"},{"line":1,"index_in_line":0,"text":"No","type":"reply"},{"line":2,"index_in_line":0,"text":"Next time","type":"reply"}]`

Verás un menú idéntico, pero sin las conexiones. Si se configura correctamente, al hacer clic en un botón el bot enviará el mensaje del bloque de respuesta correspondiente.

<div data-with-frame="true"><figure><img src="/files/5ea3c81911380f86fa4eac589184e7d736de4d4b" alt=""><figcaption></figcaption></figure></div>

**Paso 5.** Guarda la configuración del bloque y cambia al modo de prueba del bot.

<div data-with-frame="true"><figure><img src="/files/7299a656be66f10a9ca7869b9a51d4ad58a7cf86" alt=""><figcaption></figcaption></figure></div>

Cuando pruebes el bot, mostrará botones de teclado que son funcional y visualmente idénticos a los creados con la opción "Agregar botón".

<div data-with-frame="true"><figure><img src="/files/4083ee62dbb1f673139fadc2530dc7b252be869d" alt="" width="563"><figcaption></figcaption></figure></div>

Al hacer clic en un botón se entregará el mensaje de su bloque de inicio vinculado (creado en el Paso 1).

<div data-with-frame="true"><figure><img src="/files/46a52b167eb19bd5038a359fa28016ef30a3a00f" alt="" width="563"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/es/chatbot/builder/botones/trigger.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.