Ana içeriğe atla

​
Genel Bakış

OneSignal iki uygulama içi mesaj editörü sunar:
  • Teknik olmayan yaratıcılar için Drag & Drop GUI
  • Düzen, davranış ve duyarlılık üzerinde piksel mükemmel kontrol isteyen geliştiriciler için HTML Editor.

Görselleştirilmiş uygulama içi kod yanında işlenmiş uygulama içini gösteren görsel

HTML Editor ile yapabilecekleriniz:
  • Düzenler: Karmaşık duyarlı düzenler oluşturun (örneğin, yan yana CTA’lar).
  • Formlar: Satır içinde girişler toplayın (email, geri bildirim, anket).
  • Fontlar ve Marka: Özel web fontları ve CSS değişkenleri kullanın.
  • JS Eylemleri: Tıklamaları izleyin, kullanıcıları etiketleyin, sonuçlar gönderin ve daha fazlası.

​
Gereksinimler

  • iOS: 3.9.0+
  • Android: 4.6.3+
    • Uygulamanız daha eski bir SDK kullanıyorsa, uygulama içi mesajlar bunun yerine Center Modal düzeninde görüntülenecektir.

​
HTML In‑App oluşturma ve önizleme

Uygulama içi mesajlarınızı oluşturmak, düzenlemek, test etmek, duraklatmak, çoğaltmak veya silmek için Messages > New In-App’e gidin.

HTML Templates

Önceden oluşturulmuş şablonlarla hızlıca başlayın.

In-app JavaScript Library

Etkileşimleri izlemek ve uygulama içi davranışları tetiklemek için JavaScript kütüphanemizi kullanın.
Sol tarafta HTML kodunuzu girin ve canlı olarak önizleyin. Duyarlılığı ve tasarımı test etmek için Send Test In-App kullanın.

Önizlemenin yanındaki HTML Editor'ü gösteren görsel

​
İzlenebilir etiketler ekleyin

Tıklamaların izlenmesi ve eyleme dönüştürülebilir olması için etkileşimli öğelere data-onesignal-unique-label ekleyin. 
<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>

​
JavaScript ile tıklama eylemlerini bağlayın

// Bir düğmeye tıkladıklarında kullanıcıyı etiketleyin
document.querySelector(".tag-user").onclick = (e) => {
  OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
In-App JS Library documentation’da daha fazla bilgi edinin.

​
Asset desteği

Asset’ler, sağladığınız URL’lerden işleme zamanında yüklenir. 
<img src="https://media.onesignal.com/iam/default_image_20200320.png" alt="Promo" />

​
Kişiselleştirme

Kullanıcı veri değerlerini dinamik olarak ekleyin using Liquid syntax: 
<div>Hi there {{ name | default: 'you' }}!</div>
Desteklenen bağlamlar:
  • div, p, li gibi öğeler içindeki metin
  • <style> blokları içinde
  • href, src, action ve data özniteliklerinde
Desteklenmeyen:
  • <script> etiketleri içinde
  • Ayrıştırmanın belirsiz hale geldiği karmaşık iç içe içerik genelinde, örneğin:
<div>
  Hi {{name}}
  <span>Here's your coupon!</span>
</div>

​
Erişilebilirlik ve duyarlı tasarım

Cihaz boyutuna ve işletim sistemi metin ayarlarına uyum sağlamak için CSS media query’leri ve platform tipografisi kullanın. 
@media only screen and (max-width: 620px) {
  .btn-primary { width: 100% !important; }
}
/* iOS'ta dinamik metin boyutlarına saygı gösterin */
:root { font: -apple-system-body; }

​
Güvenli alanlar (çentikler, ana çubuklar)

Modern cihazlarda güvenli alanlar (çentikler veya ana çubuklar gibi) vardır. Düzeninize dolgu eklemek için safe-area-inset-* değişkenlerini kullanın: 
body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  padding-left: var(--safe-area-inset-left);
  margin: 0;
}

​
Dark mode stilleme

Mobil cihazlar ve uygulamalar genellikle kullanıcının sistem temasına göre otomatik dark mode ayarlamaları uygular. Bu, uygulama içi mesajların (IAM’ler) istenenden farklı görünmesine neden olabilir. Örneğin, metin renk tersine çevirebilir veya arka plan resimleri soluk görünebilir. IAM’nizin açık ve koyu temalar genelinde tutarlı görünmesini sağlamak için her iki mod için açık stiller tanımlayın.

​
En iyi uygulamalar

  • Açık renkler ayarlayın. HTML veya CSS’nizde her zaman metin, arka plan ve düğme renklerini doğrudan tanımlayın. Sistem davranışına dayanan şeffaf veya varsayılan renklerden kaçının.
  • prefers-color-scheme media query’leri kullanın. Dark mode geçersiz kılmalarını şununla ekleyebilirsiniz: 
    @media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }
  .button {
    background-color: #ffffff;
    color: #000000;
  }
}
  • Resimleri her iki mod için optimize edin. Mümkün olduğunda şeffaf PNG’ler veya SVG’ler kullanın. Arka plan resimleri için, hem açık hem de koyu temalarda okunabilirliği test edin.
  • Çift tersine çevirmelerden kaçının. Bazı Android ve iOS sürümleri renkleri otomatik olarak ayarlayabilir. Açık dark mode stilleri kullanmak, özel koyu temanızın işletim sistemi tarafından tekrar tersine çevrilmesini önlemeye yardımcı olur.
  • Her iki modda da önizleyin. Metin, düğmeler ve arka planların yeterli kontrasta sahip olduğunu ve erişilebilir kaldığını doğrulamak için uygulamanızın koyu ve açık temalarını kullanın.
Platformlar arasında test edin. Android WebView, iOS WKWebView ve web yapıları dark mode’u farklı şekilde işler. Yayınlamadan önce uygulama içi mesajınızı her iki temada da her zaman önizleyin.

​
Video gömme

Video’ları (örneğin, YouTube, Vimeo) <iframe> kullanarak doğrudan uygulama içi mesajlarınıza gömebilirsiniz. Bu, demolar, promosyonlar veya onboarding akışları için yararlıdır. Çoğu tarayıcı yalnızca video sessiz başlarsa otomatik oynatmaya izin verir, bu nedenle gömme URL’sine her zaman &mute=1 ekleyin.
Otomatik oynatılan video performansı etkileyebilir. Video’ları kısa tutun ve tek bir uygulama içinde birden fazla otomatik oynatma gömmekten kaçının.

​
Örnek: Otomatik oynatma YouTube gömme

Aşağıdaki snippet, bir YouTube video’sunu sabit bir boyutla (560×315) uygulama içinin ortasında nasıl ortalayacağınızı gösterir: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center; /* yatay ortala */
        align-items: center;     /* dikey ortala */
        background: #f0f0f0;     /* isteğe bağlı arka plan */
      }
      .video-box {
        width: 560px;  /* sabit genişlik */
        height: 315px; /* sabit yükseklik (16:9 oranı) */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        border-radius: 8px;
        overflow: hidden;
        background: #000;
      }
      .video-box iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="video-box">
      <iframe src="https://www.youtube.com/embed/bH60T1PZg1c?autoplay=1&mute=1"
        allow="autoplay; encrypted-media"
        allowfullscreen>
      </iframe>
    </div>
  </body>
</html>

​
Otomatik oynatma davranışını anlama

  • Otomatik oynatma için gömme URL’si (/embed/VIDEO_ID) gereklidir — normal watch?v= link’leri çalışmaz.
  • ?autoplay=1&mute=1 eklemek, video’nun otomatik olarak oynatılmasını sağlar ve tarayıcı otomatik oynatma kurallarına uyar.
  • allow=“autoplay; encrypted-media” özniteliği otomatik oynatma için izin verir.
  • .video-box, video’nun tam ekrana uzanması yerine içerilmiş görünmesi için sabit bir 560×315px boyut (YouTube’un varsayılan 16:9’u) kullanır.
  • body, video kutusunu ekranın tam ortasına konumlandırmak için justify-content: center ve align-items: center ile flex container olarak ayarlanmıştır.

​
Performans ipuçları

  • Kritik CSS’yi inline tercih edin; ağır script’leri erteleyin.
  • Resimleri optimize edin (boyutlandırılmış <img> ile object-fit), mümkün olduğunda modern formatlar kullanın.
  • HTML payload’larını kısa tutun; büyük base64 blob’larından kaçının.
  • Sistem fontlarını kullanın veya font-display: swap ile performanslı web fontlarını barındırın.
  • Dosya boyutlarını azaltın ve uygun çözünürlük kullanın:

​
Cihazlar arasında test edin

Davranışı ve düzeni cihaz türleri arasında doğrulamak için test mesajlarını sık sık gönderin. Find & set test subscriptions’a bakın.

​
SSS

Evet. Üst/alt banner’lar için, SDK’larınızı güncelleyin ve şunları ayarlayın: iOS 5.1.5+ 
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+ 
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

​
Diğer sağlayıcılardan uygulama içi şablonları yeniden kullanabilir miyim?

Evet. HTML’nizi editöre yapıştırın ve analitik/eylemleri OneSignal In‑App JS yöntemleriyle değiştirin.

​
Şablonlarım yok. Nasıl başlarım?

Sağlanan başlangıç şablonunu kullanın veya mevcut şablonlara göz atın. Biraz HTML/CSS deneyimi önerilir.

​
Hangi SDK sürümü gereklidir?

  • iOS: 3.9.0+
  • Android: 4.6.3+
Daha eski SDK’lar Center Modal görüntülemeye geri dönecektir.

​
Uygulama içi mesajlar çevrimdışı çalışır mı?

Hayır. Mesajlar, içeriği almak ve işlemek için aktif bir internet bağlantısı gerektirir.