---
title: "Botones de onboarding"
description: "Añade botones para navegar entre pantallas, cerrar el onboarding o ir al paywall."
---

Aprende a añadir y configurar botones estándar, animados, glossy y de cuenta atrás en el editor de onboarding sin código de Adapty. Guía a los usuarios, aumenta las conversiones y cierra tu flujo, todo sin escribir una sola línea de código.

## Añadir botones \{#add-buttons\}

Usa un Pulse Button para captar la atención y aumentar el porcentaje de clics. O añade un Countdown Button en las pantallas de expiración de prueba para generar urgencia e impulsar las actualizaciones.

Para añadir un botón:
1. Haz clic en **Add** en la parte superior izquierda.
2. Selecciona **Buttons** y elige uno:
   - **Button**
   - **Pulse Button**
   - **Glossy Button**
   - **Pulse Glossy Button**
   - **Countdown Button**
3. Elige la [acción del botón](onboarding-actions) en el desplegable **On Press** de la derecha:
   - **Navigate**: Lleva al usuario a una pantalla de onboarding concreta.
   - **Show/Hide element**: Muestra u oculta un elemento de destino.
   - **Open paywall**: Abre la pantalla del paywall para realizar compras. Aprende a gestionar la apertura del paywall en [iOS](ios-handling-onboarding-events#opening-a-paywall), [Android](android-handle-onboarding-events#opening-a-paywall), [React Native](react-native-handling-onboarding-events#opening-a-paywall) y [Flutter](flutter-handling-onboarding-events#opening-a-paywall).
   - **Scroll to**: Desplaza la página hasta un elemento específico.
   - **Custom**: Ejecuta la lógica de tu evento personalizado. Por ejemplo, puede usarse para abrir una ventana de inicio de sesión o solicitar permisos de la app. Aprende a gestionar acciones personalizadas en [iOS](ios-handling-onboarding-events#custom-actions), [Android](android-handle-onboarding-events#custom-actions), [React Native](react-native-handling-onboarding-events#handle-custom-actions) y [Flutter](flutter-handling-onboarding-events#handle-custom-actions).
   - **Close onboarding**: Cierra el flujo de onboarding. Aprende a gestionar el cierre del onboarding en [iOS](ios-handling-onboarding-events#closing-onboarding), [Android](android-handle-onboarding-events#closing-onboarding), [React Native](react-native-handling-onboarding-events#closing-onboarding) y [Flutter](flutter-handling-onboarding-events#closing-onboarding).

Para editar el texto de un botón, haz clic en la vista previa del botón y realiza los cambios en modo WYSIWYG.

:::tip
[Anida un popup](onboarding-layout#containers) con un Pulse Glossy Button para hacer upsell de funciones premium a mitad del flujo.

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

:::

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

## Personalización de botones \{#button-customization\}

Además del [diseño de elementos](onboarding-layout#element-layout) básico, puedes personalizar el aspecto de los botones:

1. Selecciona el elemento de botón en la parte izquierda.
2. Ve a **Styles** en el menú de la derecha.
3. Según el tipo de botón, puedes ajustar estas opciones:
   - **Todos los botones**: Anchura, relleno, fondo, redondez, borde, color de borde, sombras, flecha siguiente y tamaño de flecha, desplazamiento derecho, color del texto o de la cuenta atrás, fuente y altura de línea.
   - **Pulse Button**: Duración de la animación y easing, color y tamaño de la sombra, crecimiento del botón.
   - **Glossy Button**: Color, anchura, ángulo y duración de la animación de la línea glossy.
   - **Pulse Glossy Button**: Duración de la animación y easing, color y tamaño de la sombra, crecimiento del botón, color, anchura, ángulo y duración de la animación de la línea glossy.

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