Ana içeriğe atla

​
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
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:

​
Ç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:
1

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)
2

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
3

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
4

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

  1. OneSignal panelinde Messages → In-App Messages bölümüne gidin
  2. New In-App Message öğesine tıklayın
  3. Mesaj türü olarak HTML seçin
  4. Full Screen veya Large düzeni seçin (görsel etki için onboarding’de önerilir)
  5. 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
<!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:
  1. 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>
  1. İlerleme noktası ekleyin:
<div class="dots" id="dots">
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div> <!-- Yeni nokta -->
</div>
  1. 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
}
  1. Ö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);
});
  1. 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

  1. OneSignal panelinde mesajı kaydedin
  2. 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
  3. 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)
  4. İş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

SorunOlası nedenÇözüm
Mesaj görünmüyorTetikleme 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ıyorJavaScript 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üklenmiyorCORS sorunları veya geçersiz URL’lerHTTPS URL’leri kullanın; önce görsel URL’lerini bir tarayıcıda test edin
Mesaj görünüyor ama kapanmıyorOneSignal SDK yüklenmediMobile 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: 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