---
title: "Кнопки онбординга"
description: "Добавляйте кнопки для навигации между экранами, закрытия онбординга или перехода на пейвол."
---

Узнайте, как добавлять и настраивать обычные, анимированные, глянцевые и кнопки с обратным отсчётом в конструкторе онбординга Adapty без написания кода. Направляйте пользователей, повышайте конверсию и завершайте флоу — всё без единой строки кода.

## Добавление кнопок \{#add-buttons\}

Используйте Pulse Button, чтобы привлечь внимание и увеличить кликабельность. Или добавьте Countdown Button на слайды с истекающим пробным периодом, чтобы создать срочность и повысить количество обновлений.

Чтобы добавить кнопку:
1. Нажмите **Add** в верхнем левом углу.
2. Выберите **Buttons** и укажите тип:
   - **Button**
   - **Pulse Button**
   - **Glossy Button**
   - **Pulse Glossy Button**
   - **Countdown Button**
3. Выберите [действие кнопки](onboarding-actions) в выпадающем списке **On Press** справа:
   - **Navigate**: Переводит пользователя на указанный экран онбординга.
   - **Show/Hide element**: Показывает или скрывает целевой элемент.
   - **Open paywall**: Открывает экран пейвола для совершения покупок. Узнайте, как обрабатывать открытие пейвола на [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) и [Flutter](flutter-handling-onboarding-events#opening-a-paywall).
   - **Scroll to**: Прокручивает страницу до указанного элемента.
   - **Custom**: Выполняет пользовательскую логику события. Например, может использоваться для открытия окна входа или запроса разрешений приложения. Узнайте, как обрабатывать пользовательское действие на [iOS](ios-handling-onboarding-events#custom-actions), [Android](android-handle-onboarding-events#custom-actions), [React Native](react-native-handling-onboarding-events#handle-custom-actions) и [Flutter](flutter-handling-onboarding-events#handle-custom-actions).
   - **Close onboarding**: Закрывает флоу онбординга. Узнайте, как обрабатывать закрытие онбординга на [iOS](ios-handling-onboarding-events#closing-onboarding), [Android](android-handle-onboarding-events#closing-onboarding), [React Native](react-native-handling-onboarding-events#closing-onboarding) и [Flutter](flutter-handling-onboarding-events#closing-onboarding).

Чтобы изменить текст кнопки, кликните по её превью и внесите правки в режиме WYSIWYG.

:::tip
[Вложите попап](onboarding-layout#containers) с Pulse Glossy Button, чтобы предлагать премиум-функции прямо в середине флоу.

  <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 */
  }}
/>

## Настройка кнопок \{#button-customization\}

Помимо базовой [компоновки элементов](onboarding-layout#element-layout), вы можете настроить внешний вид кнопки:

1. Выберите элемент кнопки слева.
2. Перейдите в раздел **Styles** в правом меню.
3. В зависимости от типа кнопки доступны следующие параметры:
   - **Все кнопки**: ширина, отступы, фон, скругление углов, рамка, цвет рамки, тени, стрелка «вперёд» и её размер, правое смещение, цвет текста или обратного отсчёта, шрифт и межстрочный интервал.
   - **Pulse Button**: длительность и easing анимации, цвет и размер тени, увеличение кнопки.
   - **Glossy Button**: цвет глянцевой полосы, её ширина, угол и длительность анимации.
   - **Pulse Glossy Button**: длительность и easing анимации, цвет и размер тени, увеличение кнопки, цвет глянцевой полосы, её ширина, угол и длительность анимации.

  <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 */
  }}
/>