---
title: "Onboarding düğmeleri"
description: "Kullanıcıları ekranlar arasında yönlendirmek, onboarding'i kapatmak veya paywall'a geçmek için düğmeler ekleyin."
---

Adapty'nin kodsuz onboarding oluşturucusunda standart, animasyonlu, parlak ve geri sayımlı düğmeleri nasıl ekleyip yapılandıracağınızı öğrenin. Tek bir satır kod yazmadan kullanıcıları yönlendirin, dönüşümleri artırın ve akışı kapatın.

## Düğme ekleme \{#add-buttons\}

Dikkat çekmek ve tıklama oranlarını artırmak için Pulse Button kullanın. Ya da aciliyet hissi yaratmak ve yükseltmeleri artırmak için deneme süresi bitiş ekranlarına Countdown Button ekleyin.

Düğme eklemek için:
1. Sol üstteki **Add** seçeneğine tıklayın.
2. **Buttons**'ı seçin ve bir düğme türü belirleyin:
   - **Button**
   - **Pulse Button**
   - **Glossy Button**
   - **Pulse Glossy Button**
   - **Countdown Button**
3. Sağdaki **On Press** açılır menüsünden [düğme eylemini](onboarding-actions) seçin:
   - **Navigate**: Kullanıcıyı belirtilen onboarding ekranına yönlendirir.
   - **Show/Hide element**: Hedef bir öğeyi gösterir veya gizler.
   - **Open paywall**: Satın alma için paywall ekranını açar. Paywall açmayı nasıl yöneteceğinizi öğrenmek için: [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) ve [Flutter](flutter-handling-onboarding-events#opening-a-paywall).
   - **Scroll to**: Sayfayı belirli bir öğeye kadar kaydırır.
   - **Custom**: Özel olay mantığınızı çalıştırır. Örneğin, giriş penceresi açmak veya uygulama izinleri istemek için kullanılabilir. Özel eylemi nasıl yöneteceğinizi öğrenmek için: [iOS](ios-handling-onboarding-events#custom-actions), [Android](android-handle-onboarding-events#custom-actions), [React Native](react-native-handling-onboarding-events#handle-custom-actions) ve [Flutter](flutter-handling-onboarding-events#handle-custom-actions).
   - **Close onboarding**: Onboarding akışını kapatır. Onboarding kapanışını nasıl yöneteceğinizi öğrenmek için: [iOS](ios-handling-onboarding-events#closing-onboarding), [Android](android-handle-onboarding-events#closing-onboarding), [React Native](react-native-handling-onboarding-events#closing-onboarding) ve [Flutter](flutter-handling-onboarding-events#closing-onboarding).

Düğme metnini düzenlemek için önizlemedeki düğmeye tıklayın ve WYSIWYG modunda değişikliklerinizi yapın.

:::tip
Premium özellikleri akış ortasında tanıtmak için Pulse Glossy Button içeren bir [popup ekleyin](onboarding-layout#containers).

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

## Düğme özelleştirme \{#button-customization\}

Temel [öğe düzeni](onboarding-layout#element-layout) seçeneklerinin ötesinde düğmelerin görünümünü de özelleştirebilirsiniz:

1. Sol taraftan düğme öğesini seçin.
2. Sağ menüde **Styles** sekmesine gidin.
3. Düğme türüne göre şu seçenekleri ayarlayabilirsiniz:
   - **Tüm düğmeler**: Genişlik, dolgu, arka plan, yuvarlaklık, kenarlık, kenarlık rengi, gölgeler, sonraki ok ve ok boyutu, sağ kaydırma, metin veya geri sayım rengi, yazı tipi ve satır yüksekliği.
   - **Pulse Button**: Animasyon süresi ve geçişi, gölge rengi ve boyutu, düğme büyümesi.
   - **Glossy Button**: Parlak çizgi rengi, genişliği, açısı ve animasyon süresi.
   - **Pulse Glossy Button**: Animasyon süresi ve geçişi, gölge rengi ve boyutu, düğme büyümesi, parlak çizgi rengi, genişliği, açısı ve animasyon süresi.

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