---
title: "Botones en el Flow Builder"
description: "Añade y configura botones de acción en el Flow Builder."
---

:::info
Esta sección describe el nuevo Flow Builder, que funciona con las versiones 4.0 o superiores de los SDKs de Adapty.
:::
Los botones son los elementos interactivos del Flow Builder que responden a los toques del usuario. Úsalos para:
- CTAs de compra que se conectan a productos y procesan transacciones automáticamente
- Navegación — mueve a los usuarios entre pantallas (Siguiente, Atrás, Cerrar, Omitir)
- Enlaces de utilidad — Restaurar compras, Términos de servicio y Política de privacidad

:::tip
Coloca los CTAs de compra, los enlaces de restauración y los enlaces legales dentro de un [Footer](builder-containers#footer) — está anclado en la parte inferior de la pantalla y queda por encima de los elementos que se desplazan debajo.
:::
## Añadir botones \{#add-buttons\}

Para añadir cualquier botón:

1. Haz clic en **+** y selecciona **Button**.
2. Selecciona un tipo de botón.

    <img src="/assets/shared/img/button-type.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

3. Los botones de compra, los enlaces y los botones de cierre vienen con acciones preconfiguradas. Para los enlaces, [configura las URLs a las que se dirigirá a los usuarios](#links). Para los demás tipos de botón, ve al panel **Interactions**. Allí, en la sección **Button triggers**, configura las [acciones](onboarding-actions) que debe realizar el botón.

    <img src="/assets/shared/img/button-action.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

4. Configura el [diseño del botón](builder-styling) en el panel **Design**.
## Tipos de botones \{#button-types\}
### Botones de compra \{#purchase-buttons\}

:::link
Para que los botones de compra funcionen, vincula productos a las pantallas y añade el elemento **Products**. Consulta la [guía](paywall-product-block).
:::

Un botón de compra inicia la compra in-app del producto que el usuario haya seleccionado en la pantalla. El SDK procesa la transacción automáticamente, por lo que no necesitas gestionar las compras en el código de la app.

Para añadir un botón de compra:
1. Haz clic en **+** y selecciona **Button**, luego elige un preset de botón.
2. Con el botón seleccionado, abre la pestaña **Interactions** en el panel derecho.
3. Haz clic en **Add trigger** > **On tap**, luego haz clic en **Add action**.
4. Establece **Action** en **Purchase** y **Product** en `products.selectedProduct`. La variable `products.selectedProduct` siempre se resuelve al producto actualmente seleccionado en la pantalla.

:::tip
Puedes atraer más atención hacia los botones de compra animándolos. El Paywall Builder admite actualmente el tipo de animación **Pulse**.
Configura el estilo de animación en el panel **Design**.
:::

  <img src="/assets/shared/img/purchase-button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Links \{#links\}

:::important
Los botones **Terms of Use** y **Privacy Policy** tienen una acción **Open URL** integrada. Establece la URL de destino allí. Las URLs vacías en Open URL y los [enlaces en línea](onboarding-text#inline-link) bloquean la vista previa y la publicación.
:::

Para cumplir con algunos requisitos del store, puedes añadir enlaces a:
- Términos de servicio
- Política de privacidad
- Restauración de compras
Para añadir enlaces:
1. Haz clic en **+** y selecciona **Button > Links**. Esto añadirá una fila de botones en línea con acciones predefinidas: restaurar compras o abrir una URL. Si no necesitas todos los botones incluidos, elimina los que no necesites en el panel de capas.

    <img src="/assets/shared/img/add-links.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

2. Ahora, configura las acciones de los botones:

   - El botón **Restore purchases** ya gestiona la restauración de compras.
   - Para cada enlace restante:
        1. Haz clic en el botón para seleccionarlo y cambia a la pestaña **Interactions** en el panel derecho.
        2. Pega la URL en el campo.
        3. Por defecto, la URL se abre en un navegador integrado en la app para una experiencia de usuario fluida. Si quieres que los usuarios naveguen a un navegador externo, marca la casilla **Open in external browser**.

  <img src="/assets/shared/img/pb-links.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Cerrar el flow \{#close-flow\}

El botón **Close** cierra el flow automáticamente.

Para añadir un botón de cierre, haz clic en **+** y selecciona **Button > Close flow**.

    <img src="/assets/shared/img/close-flow.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

:::tip
Usa la posición **Absolute** para colocar el botón de cierre en la esquina de la pantalla.
:::
También puedes configurar cualquier otro botón para cerrar el flow usando [acciones](onboarding-actions).
### Botones personalizados \{#custom-buttons\}

Cualquier botón que añadas puede configurarse para realizar una acción al pulsarlo:
- Navegar a la siguiente pantalla
- Mostrar una alerta
- Establecer una [variable](onboarding-variables)
- [Mostrar u ocultar elementos de la pantalla](onboarding-element-visibility)
- Abrir URLs
- Restaurar compras
- Ejecutar acciones condicionales