Buton odaklı onboarding karuseli oluşturma

Genel Bakış

Bu eğitim, tek bir HTML Uygulama İçi Mesaj kullanarak çok adımlı bir onboarding karuseli oluşturmayı gösterir. Kaydırma hareketlerine dayanan geleneksel karusellerin aksine, bu yaklaşım buton odaklı navigasyon kullanır ve tüm adımları tek bir mesaj içinde tutar. Ne inşa edeceksiniz:

Görsel, metin ve butonlar içeren iki adımlı bir onboarding akışı
Buton navigasyonu (ilerlemek için “İleri”ye, kapatmak için “Başla”ya dokunun)
İlerleme gösterge noktaları
Adımlar arası yumuşak geçiş efektleri

Görsel, metin ve İleri butonu içeren karşılama ekranını gösteren onboarding karuseli — Buton odaklı navigasyonlu onboarding karuseli örneği

Bu yaklaşımı ne zaman kullanmalısınız:

Kullanıcıları kısa bir onboarding veya eğitim akışından (2-5 adım) geçirmek istediğinizde
Kullanıcıların devam etmek için açıkça bir butona dokunmasını gerektirdiğinizde (kaydırma hareketi yok)
Basitlik için her şeyi tek bir HTML Uygulama İçi Mesaj içinde tutmak istediğinizde
Akış tamamlandığında mesajı otomatik olarak kapatmak istediğinizde

Bu kılavuz tam kontrol için HTML Uygulama İçi Mesaj kullanır. Ayrıca sürükle-bırak düzenleyiciyle kart tabanlı onboarding akışları oluşturabilirsiniz—bu kartlar kaydırılabilir ancak daha az özelleştirme sunar.

Ön Koşullar

Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:

Uygulama İçi Mesajlar etkinleştirilmiş aktif bir OneSignal uygulaması
HTML Uygulama İçi Mesajları oluşturma veya düzenleme izni
Mobil uygulamanızda Mobile SDK kurulu
HTML, CSS ve JavaScript hakkında temel anlayış

Çok Adımlı Akış Nasıl Çalışır

Koda geçmeden önce teknik yaklaşımı anlamak önemlidir. Bu uygulama, birden fazla ayrı mesaj yüklemek yerine içeriği gösterip gizleyerek adımlar arasında geçiş yapan tek bir HTML Uygulama İçi Mesaj kullanır. Mimari dört temel bileşene dayanır:

Her adım için kart konteynerleri

Her adım card sınıfı ve benzersiz bir ID ile bir <div> içine sarılır:

<div id="card-0" class="card active">...</div>
<div id="card-1" class="card">...</div>

Tüm kartlar DOM’da aynı anda bulunur
Aynı anda yalnızca bir kart görünür (active sınıfıyla kontrol edilir)

CSS görünürlük kontrolü

CSS, opaklık ve pointer olaylarını kullanarak göster/gizle mantığını yönetir:

.card {
  opacity: 0;
  pointer-events: none;  /* Gizli kartlarla etkileşimi engeller */
  transition: opacity .25s ease;
}

.card.active {
  opacity: 1;
  pointer-events: auto;  /* Görünür kartla etkileşime izin verir */
}

Bu neden önemli:

opacity: 0 kartı görsel olarak gizler ancak düzende tutar
pointer-events: none gizli kartlara yanlışlıkla tıklamayı engeller
transition yumuşak geçiş efektleri oluşturur

JavaScript durum yönetimi

setActive(i) fonksiyonu hangi kartın görünür olduğunu kontrol eder:

function setActive(i) {
  // Kart görünürlüğünü güncelle
  document.getElementById("card-0").className = i === 0 ? "card active" : "card";
  document.getElementById("card-1").className = i === 1 ? "card active" : "card";

  // İlerleme noktalarını güncelle
  var dots = document.getElementById("dots").children;
  dots[0].classList.toggle("active", i === 0);
  dots[1].classList.toggle("active", i === 1);
}

Bu fonksiyon:

Tüm kartlardan active’i kaldırır
Hedef karta active ekler
İlerleme gösterge noktalarını günceller

Buton olay dinleyicileri

Butonlar navigasyonu veya kapatmayı tetikler:

// Sonraki adıma ilerle
document.getElementById("next-0").addEventListener("click", function () {
  setActive(1);
});

// Uygulama İçi Mesajı kapat
document.getElementById("done").addEventListener("click", function (e) {
  if (window.OneSignalIamApi && OneSignalIamApi.close) {
    OneSignalIamApi.close(e);
  }
});

Önemli: OneSignalIamApi.close(e) HTML içinden Uygulama İçi Mesajı kapatan OneSignal SDK yöntemidir.

Önemli nokta: Bu, bir Uygulama İçi Mesaj içindeki tek sayfa uygulama (SPA) modelidir. Tüm içerik bir kez yüklenir ve JavaScript yeniden yükleme olmadan durum değişikliklerini yönetir.

Adım 1: Yeni bir HTML Uygulama İçi Mesaj Oluşturun

OneSignal panelinde Messages → In-App Messages bölümüne gidin
New In-App Message öğesine tıklayın
Mesaj türü olarak HTML seçin
Full Screen veya Large düzeni seçin (görsel etki için onboarding’de önerilir)
HTML düzenleyiciye devam edin

HTML düzenleyici önizlemesi çalışma zamanı davranışını tam olarak yansıtmayabilir. Animasyonları, buton davranışını ve kapatma işlemini doğrulamak için her zaman gerçek bir cihazda veya test kullanıcısında test edin.

Adım 2: HTML Şablonunu Ekleyin

Düzenleyici içeriğini aşağıdaki şablonla değiştirin. Bu şablon şunları içerir:

Bağımsız kod: Tüm HTML, CSS ve JavaScript tek bir dosyada
Buton odaklı navigasyon: Kaydırma hareketi yok (cihazlar arasında daha güvenilir)
Geçiş efektleri: Adımlar arası yumuşak opaklık değişimleri
OneSignal SDK entegrasyonu: Mesajı kapatmak için OneSignalIamApi.close(e) kullanır
Mobil optimize: Viewport meta etiketi ile duyarlı düzen

Tam HTML şablonunu görüntüle

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <!-- viewport-fit=cover çentikli cihazlarda güvenli alan kapsamını sağlar -->
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <style>
    /* Temel stiller - sıfırlama ve sistem fontu */
    html, body {
      margin: 0;
      padding: 0;
      background: #ffffff;
      font-family: -apple-system, system-ui;
    }

    /* Dolgulu ana konteyner */
    .wrap {
      padding: 28px 22px 24px;
    }

    /* Sahne konteyneri - tüm kartları aynı konumda tutar */
    .stage {
      position: relative;
      min-height: 74vh;  /* Yeterli dikey alan sağlar */
    }

    /* Kart - onboarding akışının her adımı */
    .card {
      position: absolute;  /* Tüm kartlar aynı konumda üst üste gelir */
      inset: 0;            /* Sahneyi tam kaplar */
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;               /* Varsayılan olarak gizli */
      pointer-events: none;     /* Gizliyken tıklamayı engeller */
      transition: opacity .25s ease;  /* Yumuşak geçiş efekti */
    }

    /* Aktif kart görünür ve etkileşimli */
    .card.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Tipografi */
    h1 {
      margin: 44px 0 12px;
      font-size: 26px;
      text-align: center;
    }

    p {
      margin: 0;
      color: #6b7280;
      text-align: center;
      max-width: 260px;
      line-height: 1.35;
    }

    /* Görsel konteyneri - yuvarlatılmış köşeli kare */
    .image {
      width: 240px;
      height: 240px;
      border-radius: 16px;
      margin: 24px 0 12px;
      background-size: cover;
      background-position: center;
    }

    /* Ana buton */
    .btn {
      margin-top: auto;  /* Butonu kartın altına iter */
      width: 100%;
      max-width: 260px;
      height: 52px;
      border: 0;
      border-radius: 12px;
      background: #3b82f6;  /* Mavi - markanıza göre özelleştirin */
      color: #fff;
      font-size: 18px;
      font-weight: 600;
    }

    /* İlerleme gösterge noktaları */
    .dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 12px 0 8px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #d1d5db;  /* Pasif nokta rengi */
    }

    .dot.active {
      background: #6b7280;  /* Aktif nokta rengi */
      transform: scale(1.15);  /* Aktifken biraz daha büyük */
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="stage">

      <!-- ADIM 1: Karşılama kartı ("active" sınıfıyla görünür başlar) -->
      <div id="card-0" class="card active">
        <h1>Hoş Geldiniz</h1>
        <div
          class="image"
          style="background-image: url('https://images.pexels.com/photos/6153129/pexels-photo-6153129.jpeg');">
        </div>
        <p>Dakikalar içinde sakin bir günlük alışkanlık oluşturun.</p>
        <button
          id="next-0"
          class="btn"
          data-onesignal-unique-label="onboarding_next_0">
          İleri
        </button>
      </div>

      <!-- ADIM 2: Nefes kartı (gizli başlar, kullanıcı "İleri"ye dokunduğunda görünür) -->
      <div id="card-1" class="card">
        <h1>Nefes Alın</h1>
        <div
          class="image"
          style="background-image: url('https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg');">
        </div>
        <p>Sıfırlanmaya ihtiyaç duyduğunuzda rehberli nefes egzersizi.</p>
        <button
          id="done"
          class="btn"
          data-onesignal-unique-label="onboarding_done">
          Başla
        </button>
      </div>

    </div>

    <!-- İlerleme göstergesi: 2 nokta, ilki aktif başlar -->
    <div class="dots" id="dots">
      <div class="dot active"></div>
      <div class="dot"></div>
    </div>
  </div>

  <script>
    (function () {
      /**
       * "active" sınıfını değiştirerek kartlar arasında geçiş yap
       * @param {number} i - Gösterilecek kartın indeksi (0 veya 1)
       */
      function setActive(i) {
        // Kart görünürlüğünü güncelle
        document.getElementById("card-0").className = i === 0 ? "card active" : "card";
        document.getElementById("card-1").className = i === 1 ? "card active" : "card";

        // İlerleme noktalarını güncelle
        var dots = document.getElementById("dots").children;
        dots[0].classList.toggle("active", i === 0);
        dots[1].classList.toggle("active", i === 1);
      }

      // Buton: İleri (kart 0 → kart 1)
      document.getElementById("next-0").addEventListener("click", function () {
        setActive(1);
      });

      // Buton: Başla (Uygulama İçi Mesajı kapatır)
      document.getElementById("done").addEventListener("click", function (e) {
        // OneSignal IAM API'sinin kullanılabilir olup olmadığını kontrol et
        if (window.OneSignalIamApi && OneSignalIamApi.close) {
          OneSignalIamApi.close(e);  // Mesajı kapat
        }
      });
    })();
  </script>
</body>
</html>

Adım 3: İçeriğinizi Özelleştirin

Güvenle özelleştirilebilir

İşlevselliği bozmadan bu öğeleri değiştirebilirsiniz: İçerik:

<h1> etiketlerindeki başlık metni
<p> etiketlerindeki gövde metni
Buton etiketleri (İleri, Başla)
background-image: url('...') stillerindeki görsel URL’leri

Görsel stil:

Renkler: .btn arka planını, metin rengini veya nokta renklerini değiştirin
Boşluk: Padding ve marjları ayarlayın
Tipografi: font-family, font-size, font-weight değiştirin
Kenar yarıçapı: Butonlar ve görseller için border-radius değerlerini güncelleyin

Daha fazla adım ekleme

Üçüncü bir adım eklemek için bu kalıbı izleyin:

HTML kartı ekleyin:

<div id="card-2" class="card">
  <h1>Başlığınız</h1>
  <div class="image" style="background-image: url('gorsel-url');"></div>
  <p>Açıklamanız</p>
  <button id="next-2" class="btn">İleri</button>
</div>

İlerleme noktası ekleyin:

<div class="dots" id="dots">
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div> <!-- Yeni nokta -->
</div>

setActive() fonksiyonunu güncelleyin:

function setActive(i) {
  document.getElementById("card-0").className = i === 0 ? "card active" : "card";
  document.getElementById("card-1").className = i === 1 ? "card active" : "card";
  document.getElementById("card-2").className = i === 2 ? "card active" : "card"; // Yeni kart

  var dots = document.getElementById("dots").children;
  dots[0].classList.toggle("active", i === 0);
  dots[1].classList.toggle("active", i === 1);
  dots[2].classList.toggle("active", i === 2); // Yeni nokta
}

Önceki adımın buton ID’sini güncelleyin: Kart 1’in butonunda id="done"’ı id="next-1" olarak değiştirin, ardından tıklama dinleyicisi ekleyin:

document.getElementById("next-1").addEventListener("click", function () {
  setActive(2);
});

Yeni son karta (card-2) kapatma butonu ekleyin:

document.getElementById("done").addEventListener("click", function (e) {
  if (window.OneSignalIamApi && OneSignalIamApi.close) {
    OneSignalIamApi.close(e);
  }
});

Onboarding akışlarını kısa tutun (maksimum 2-4 adım). Kullanıcılar uzun akışlarda hızla vazgeçer. Tıklama takibi ile tamamlanma oranlarını test edin.

Adım 4: Uygulama İçi Mesajı Test Edin

Test kontrol listesi

OneSignal panelinde mesajı kaydedin
Teslimat ayarlarını yapılandırın:
- Tetikleme koşullarını ayarlayın (örn., oturum başlangıcı, belirli sayfa görüntüleme)
- Hedef kitlenizi seçin veya bir test kullanıcısı belirleyin
Test cihazına gönderin:
- Üretim kullanıcılarını etkilemeden önizlemek için Test Kullanıcıları kullanın
- Uygulamanızı fiziksel bir cihaza yükleyin (doğru davranış için simülatörler yerine önerilir)
İşlevselliği doğrulayın:
- ✓ İlk kart doğru içerikle görünüyor
- ✓ “İleri” butonu kart 2’ye ilerliyor
- ✓ İlerleme noktaları doğru güncelleniyor
- ✓ Geçiş efektleri yumuşak
- ✓ “Başla” butonu mesajı kapatıyor
- ✓ Mesaj hemen tekrar görünmüyor (frekans sınırlama ayarlarını kontrol edin)

Simülatörler/emülatörler özellikle dokunma etkileşimleri ve SDK entegrasyonları için gerçek cihaz davranışını doğru yansıtmayabilir. Üretime çıkmadan önce her zaman fiziksel cihazlarda test edin.

Yaygın sorunları giderme

Sorun	Olası neden	Çözüm
Mesaj görünmüyor	Tetikleme koşulları karşılanmadı	Uygulama İçi Mesaj Tetikleyicilerini kontrol edin ve test kullanıcınızın kriterleri karşıladığını doğrulayın
Butonlar çalışmıyor	JavaScript hataları veya ID uyuşmazlığı	Tarayıcı konsolunda hataları kontrol edin; buton ID’lerinin olay dinleyici ID’leriyle eşleştiğini doğrulayın
Görseller yüklenmiyor	CORS sorunları veya geçersiz URL’ler	HTTPS URL’leri kullanın; önce görsel URL’lerini bir tarayıcıda test edin
Mesaj görünüyor ama kapanmıyor	OneSignal SDK yüklenmedi	Mobile SDK kurulumunun tamamlandığını doğrulayın

Sonraki Adımlar

Kullanıcı etkileşimini takip edin:

Adımlar arası vazgeçmeyi ölçmek için data-onesignal-unique-label niteliklerini kullanarak tıklama takibi ekleyin (şablonda zaten dahil)
Messages → In-App Messages → [Mesajınız] → Analytics bölümünde tıklama analizlerini görüntüleyin

Deneyimi kişiselleştirin:

Onboarding’i tamamlayan kullanıcıları etiketleyin (örn., onboarding_completed: true)
Etiketleri kullanarak kullanıcıları segmentleyin ve onboarding akışının tekrar gösterilmesini engelleyin
Gelecekteki mesajlarda içeriği kişiselleştirmek için kullanıcı verisi ekleyin

Gelişmiş özelleştirme:

Kapatma sonrası kullanıcıları belirli bir ekrana derin bağlantı ile yönlendirin
Başlıkları kullanıcı adları veya niteliklerle kişiselleştirmek için Liquid sözdizimi kullanın
Tamamlanma oranlarını optimize etmek için farklı onboarding akışlarıyla A/B testi uygulayın

Eğitimler

🏢 Sektörlere Göre

📈 Katılımı ve Elde Tutmayı Artırın

🔔 Kritik veya Zaman Sınırlı Mesajları Gönderin

🧠 Hedefleme ve Kişiselleştirmeyi Artırın

🛠️ Kullanıcı Deneyimini ve Onboarding'ı Artırın

Buton odaklı onboarding karuseli oluşturma

Genel Bakış

Ön Koşullar

Çok Adımlı Akış Nasıl Çalışır

Adım 1: Yeni bir HTML Uygulama İçi Mesaj Oluşturun

Adım 2: HTML Şablonunu Ekleyin

Adım 3: İçeriğinizi Özelleştirin

Güvenle özelleştirilebilir

Daha fazla adım ekleme

Adım 4: Uygulama İçi Mesajı Test Edin

Test kontrol listesi

Yaygın sorunları giderme

Sonraki Adımlar

​Genel Bakış

​Ön Koşullar

​Çok Adımlı Akış Nasıl Çalışır

​Adım 1: Yeni bir HTML Uygulama İçi Mesaj Oluşturun

​Adım 2: HTML Şablonunu Ekleyin

​Adım 3: İçeriğinizi Özelleştirin

​Güvenle özelleştirilebilir

​Daha fazla adım ekleme

​Adım 4: Uygulama İçi Mesajı Test Edin

​Test kontrol listesi

​Yaygın sorunları giderme

​Sonraki Adımlar

Genel Bakış

Ön Koşullar

Çok Adımlı Akış Nasıl Çalışır

Adım 1: Yeni bir HTML Uygulama İçi Mesaj Oluşturun

Adım 2: HTML Şablonunu Ekleyin

Adım 3: İçeriğinizi Özelleştirin

Güvenle özelleştirilebilir

Daha fazla adım ekleme

Adım 4: Uygulama İçi Mesajı Test Edin

Test kontrol listesi

Yaygın sorunları giderme

Sonraki Adımlar