Ana içeriğe atla
OneSignal’ın sürükle ve bırak editörü, modüler bloklar kullanarak uygulama içi mesajlar oluşturmanıza olanak tanır — kodlama gerekmez. İşaretleme tercih ediyorsanız, Design In-App Messages with HTML’e bakın.
Sürükle ve bırak editörü kullanarak uygulama içi mesaj oluşturma

​
Ön koşullar

  • OneSignal SDK’nın uygulamanızda yüklü ve başlatılmış olması.
  • En son editör özellikleri için önerilen SDK’lar:
    • iOS 5.1.5+
    • Android 5.1.9+
  • Görselleri OneSignal’a yüklemiyorsanız, görselleriniz hızlı ve herkese açık bir URL’de barındırılmalı (CDN önerilir) ve mobil ekranlar için uygun boyutta olmalıdır.
Uygulamanızda OneSignal SDK’nın en son sürümünü kullandığınızdan emin olun. Eski sürümler mesajı yine de gösterebilir, ancak yedek stillendirme ile (örneğin, varsayılan kenar boşlukları veya varsayılan overlay’ler). Minimum desteklenen SDK sürümlerinizdeki davranışı doğrulamak için Önizleme ve cihaz testini kullanın.

​
Önceden oluşturulmuş bir şablonla başlayın

Önceden oluşturulmuş şablonlar, dönüşüm için tasarlanmış düzenlerle (izin istemleri dahil) hızlıca başlamanıza yardımcı olur. Bir şablon seçin, ardından metni, renkleri ve eylemleri markanıza uyacak şekilde güncelleyin.
Cihaz testi: Önceden oluşturulmuş tasarımlar Pixel 6+, iPhone (iOS 14+), Huawei Nova 9, Huawei P50 Foldable ve iPad (10. nesil+) üzerinde test edilmiştir. Bu şablonlar dikey yönlendirme için optimize edilmiştir ve yatay modda istendiği gibi görüntülenmeyebilir.

​
Bir mesaj düzeni seçin

Mesaj düzeni, uygulama içi mesajın ekranda nasıl göründüğünü kontrol eder.
Mesaj türüEn uygunNasıl davranır
Topİnce duyurular ve onaylarYukarıdan aşağı kayar
CenterÇoğu pazarlama ve ürün istemleriMerkezden genişler ve ekranı kısmen doldurur
BottomSnackbar’lar, onay istemleriAlttan yukarı kayar
FullOnboarding akışları, çok adımlı teklifler, carousel’lerEkranı dolduracak şekilde genişler (isteğe bağlı kenar boşluklarıyla)
Top, Center, Bottom ve Full uygulama içi mesaj düzenleri

​
Carousel’ler ile çok ekranlı akışlar oluşturun

Carousel’ler onboarding, özellik turları veya çok adımlı teklifler gibi çok ekranlı uygulama içi deneyimler oluşturmanıza olanak tanır.
  1. Full mesaj türünü seçin.
  2. Create Carousel düğmesine tıklayın.
  3. 10’a kadar kart (ekran) ekleyin.
  4. Her kartı herhangi bir blok kombinasyonuyla özelleştirin.
Birden fazla uygulama içi mesaj kartı içeren carousel örneği

​
Yönlendirme desteği

Uygulama içi mesajlar dikey ve yatay modları destekler, ancak düzenlerin (özellikle şablonların) her ikisinde de iyi görünmesi için ayarlamalar gerekebilir.
Dikey ve yatay yönlendirmelerde görüntülenen uygulama içi mesaj
Sık yatay kullanım bekliyorsanız (tabletler, oyunlar, video uygulamaları), yayınlamadan önce mesajınızı yatay modda test edin. Geniş düzenler genellikle daha küçük metin boyutları, daha dar boşluklar veya daha az yığılmış blok gerektirir.

​
Temiz düzenler için bloklar ve boşluk kullanın

Her şey Background bloğunun (tuvaliniz) üzerine yerleştirilir. Şunları kullanın:
  • İçeriğiniz ile mesaj kenarları arasındaki boşluk için Background üzerinde Padding.
  • Öğeler arasındaki boşluk (başlık → görsel → düğme) için bireysel bloklarda Margin.
Tutarlı düzenler için hızlı kurallar
  1. Mesaj kenarlarından mesafeyi kontrol etmek için Padding kullanın.
  2. Blokları dikey olarak ayırmak için Margin kullanın.
  3. Aynı tarafta büyük padding ve margin’leri istiflemekten kaçının.
  4. Sıkı/kenara hizalanmış tasarımlar yerine merkezli, akış tabanlı düzenleri tercih edin.
  5. Yayınlamadan önce her zaman birden fazla cihaz boyutunda Önizleme kullanın.
Uygulama içi editörde arka plan padding ve blok margin kontrolleri

​
Blok referansı

Mesajınızı oluşturmak için bu blokları kullanın. Her blok stil desteği ve (çoğu durumda) isteğe bağlı bir tıklama eylemi sunar.

​
Metin bloğu

Başlıklar, açıklamalar, yasal uyarılar veya kişiselleştirilmiş metinler için kullanın. Özelleştirebilecekleriniz
  • Duyarlı boyutlandırma: Yüzdelerle genişlik/yükseklik.
  • Fontlar: Google Fonts.
  • Biçimlendirme: Kalın, italik, altı çizili.
  • Renk: Hex veya RGBA (şeffaflığı destekler).
  • Hizalama: Sol, orta, sağ.
  • Boyut: Ayarlanabilir font boyutu.
Gelişmiş
  • Margin’ler: Bloğun etrafındaki boşluk.
İpuçları
Editörde metin bloğu yapılandırma seçenekleri

​
Görsel bloğu

Teklifi pekiştirmek, bir özelliği göstermek veya marka kimliği eklemek için görseller kullanın. Desteklenen formatlar ve limitler
  • .jpg, .png, .gif
  • Maksimum dosya boyutu: 5MB
İpuçları ve öneriler
  • 16:9, 4:3 veya 3:2 gibi yaygın en boy oranlarını kullanın.
  • Sunucu tarafında barındırılan yolları kullanarak linkleri ve görsel URL’lerini dinamik olarak değiştirebilirsiniz. Dynamic URLs’e bakın.
    • Örnek: https://example.com/images/{{ tag_key }}.png
Özelleştirebilecekleriniz
  • Görsel URL’si: Performans için barındırılan URL önerilir.
  • Tıklama eylemi: İsteğe bağlı (link, deep link, etiket, sonuç, istem).
Gelişmiş
  • Tıklamada kapat
  • Margin’ler: Bloğun etrafındaki boşluk.
Editörde görsel bloğu yapılandırma seçenekleri
Bir görsel URL’si yavaşsa, engelleniyorsa veya hata döndürüyorsa, mesajınız bozuk veya boş medya ile render edilebilir. Görselleri güvenilir bir CDN’de barındırın ve mobil ağlarda hızlı yüklendiklerini doğrulayın.

​
Düğme bloğu

Gezinme, geri bildirim toplama veya izin istemleri gibi birincil eylemler için düğmeleri kullanın. Özelleştirebilecekleriniz
  • Düğme metni ve font stili
  • Arka plan rengi, boyut ve köşe yarıçapı
  • İsteğe bağlı ikon/görsel
  • Tıklama eylemi (etiketleme, sonuçlar, istemler, deep link’ler)
Gelişmiş
  • Tıklamada kapat
  • Margin’ler
  • Kenarlıklar ve gölgeler
İpuçları
  • Düğme metnini veya hedefleri etiketler kullanarak kişiselleştirin.
  • Arka plan opaklığını 0 yaparak yalnızca görsellerden oluşan bir düğme yapabilirsiniz.
  • Birincil CTA’yı öne çıkarmak için ince gölgeler (düşük opaklık, yüksek bulanıklık) kullanın.
Editörde düğme bloğu yapılandırma seçenekleri

​
Kapatma düğmesi bloğu

Kapatma düğmesi, kullanıcıların mesajı bir “X” simgesi kullanarak kapatıp kapatamayacağını kontrol eder. Özelleştirebilecekleriniz
  • Görünürlüğü etkinleştir/devre dışı bırak
  • Özel ikon (.jpg, .png, .svg, .gif)
  • Önerilen boyut: 10x10px
  • İsteğe bağlı tıklama eylemi
Gelişmiş
  • Margin’ler
Kapatma düğmesini devre dışı bırakırsanız, kullanıcıların hâlâ çıkabilecekleri net bir yol olduğundan emin olun (örneğin, bir düğme veya arka plan üzerinde kapatma eylemi ya da deneyiminiz kullanıyorsa bir kapatma zamanlayıcısı). Aksi takdirde kullanıcıları mesajda sıkıştırma riski taşırsınız.
Editörde kapatma düğmesi yapılandırma seçenekleri

​
Arka plan bloğu

Arka plan, düzeninizi tutan tuvaldir. Özelleştirebilecekleriniz
  • Arka plan rengi (RGBA desteklenir)
  • Arka plan görseli (.jpg, .png, .gif)
  • İsteğe bağlı tıklama eylemi
Gelişmiş
  • Padding (varsayılan 24px)
  • Tıklamada kapat
Renk, görsel, padding ve eylemler için arka plan bloğu kontrolleri

​
Kişiselleştirme ve yerelleştirme

Metin, düğme etiketleri ve URL’lerin içinde dahil olmak üzere veri etiketlerini kullanarak uygulama içi mesajları kişiselleştirebilirsiniz. Yerelleştirme için Multi-langauge messages’a bakın.
İyi bir kişiselleştirme testi, mesajı bilinen etiket değerlerine sahip küçük bir dahili segmente göndermek ve şunları doğrulamaktır:
  • Metin ve görsellerin beklenen değişikliklerle render edildiğini
  • Linklerin doğru şekilde çözümlendiğini
  • Düğmelerin beklenen tıklama sonuçlarını/etiketlerini tetiklediğini

​
SSS

​
Üst/alt banner uygulama içi mesajlardan gri overlay’i veya gölge efektini kaldırabilir miyim?

Evet — SDK’larınızı güncelleyin ve aşağıdaki yapılandırmayı ekleyin. iOS 5.1.5+
iOS Info.plist
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+
Android Manifest.xml
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

​
Sonraki adımlar