> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sürükle ve bırak ile uygulama içi mesajlar tasarlama

> Bloklar, düzenler, carousel'ler ve kişiselleştirme ile yüksek dönüşüm sağlayan uygulama içi mesajlar oluşturmak için OneSignal'ın görsel composer'ını kullanın.

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](./design-your-in-app-message-with-html)'e bakın.

<Frame caption="Uygulama içi mesaj sürükle ve bırak editörü">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/iam-block-create.gif?s=f3a6e2388fc6855a2fc8378fb5ce51b1" alt="Sürükle ve bırak editörü kullanarak uygulama içi mesaj oluşturma" width="780" height="589" data-path="images/iam/iam-block-create.gif" />
</Frame>

## Ö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.

<Warning>
  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.
</Warning>

***

## Ö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.

<Note>
  **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.
</Note>

***

## 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 uygun                                                | Nasıl davranır                                                        |
| ---------- | ------------------------------------------------------- | --------------------------------------------------------------------- |
| **Top**    | İnce duyurular ve onaylar                               | Yukarıdan aşağı kayar                                                 |
| **Center** | Çoğu pazarlama ve ürün istemleri                        | Merkezden genişler ve ekranı kısmen doldurur                          |
| **Bottom** | Snackbar'lar, onay istemleri                            | Alttan yukarı kayar                                                   |
| **Full**   | Onboarding akışları, çok adımlı teklifler, carousel'ler | Ekranı dolduracak şekilde genişler (isteğe bağlı kenar boşluklarıyla) |

<Frame caption="Uygulama içi mesaj düzen türleri">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/a675b8f-Type.png?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=e04ab2110fcd37eb6481db3dd8c63ece" alt="Top, Center, Bottom ve Full uygulama içi mesaj düzenleri" width="1115" height="788" data-path="images/docs/a675b8f-Type.png" />
</Frame>

### 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.

<Frame caption="Carousel örneği">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/carousel.gif?s=0ebac15f1b7b55229705970a84bda5be" alt="Birden fazla uygulama içi mesaj kartı içeren carousel örneği" width="900" height="800" data-path="images/iam/carousel.gif" />
</Frame>

### 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.

<Frame caption="Dikey ve yatay uygulama içi mesaj örnekleri">
  <img src="https://mintcdn.com/onesignal/Z6xkXGfmy814If53/images/docs/e2b95e5-IAM-portrait-landscape.png?fit=max&auto=format&n=Z6xkXGfmy814If53&q=85&s=25028bc942075b84814ae5ee850bf458" alt="Dikey ve yatay yönlendirmelerde görüntülenen uygulama içi mesaj" width="1279" height="564" data-path="images/docs/e2b95e5-IAM-portrait-landscape.png" />
</Frame>

<Note> 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. </Note>

***

## 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.

<Frame caption="Editörde padding ve margin">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/padding-margin.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=f328dfed369bb0369a825818cb264802" alt="Uygulama içi editörde arka plan padding ve blok margin kontrolleri" width="1536" height="1024" data-path="images/iam/padding-margin.png" />
</Frame>

***

## 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ı**

* Dil tabanlı segmentlerle veya [Liquid sözdizimi kullanarak](./using-liquid-syntax) yerelleştirin.
* [Veri etiketleriyle](./message-personalization) kişiselleştirin.

<Frame caption="Metin bloğu">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/a556236-Screenshot_2022-12-10_at_5.45.53_PM.png?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=cec5db0519c7ec85ddce8bcc9e4b190f" alt="Editörde metin bloğu yapılandırma seçenekleri" width="1004" height="836" data-path="images/docs/a556236-Screenshot_2022-12-10_at_5.45.53_PM.png" />
</Frame>

### 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](./links#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.

<Frame caption="Görsel bloğu">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0cc2179-Screenshot_2022-12-10_at_5.46.27_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=440933533b6d5985256b0ef45a5802a6" alt="Editörde görsel bloğu yapılandırma seçenekleri" width="1004" height="718" data-path="images/docs/0cc2179-Screenshot_2022-12-10_at_5.46.27_PM.png" />
</Frame>

<Warning> 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. </Warning>

### 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.

<Frame caption="Düğme bloğu ayarları">
  <img src="https://mintcdn.com/onesignal/YOTSrtBSoqdrJ37A/images/docs/49beca3-Screenshot_2022-12-10_at_5.48.17_PM.png?fit=max&auto=format&n=YOTSrtBSoqdrJ37A&q=85&s=f3bce4770825e17bae48c4f5f7d8b385" alt="Editörde düğme bloğu yapılandırma seçenekleri" width="996" height="1578" data-path="images/docs/49beca3-Screenshot_2022-12-10_at_5.48.17_PM.png" />
</Frame>

### 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

<Warning>
  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.
</Warning>

<Frame caption="Kapatma düğmesi ayarları">
  <img src="https://mintcdn.com/onesignal/9_Q1FZLh6C0BFLq-/images/docs/c07a30b-Screenshot_2022-12-10_at_5.49.22_PM.png?fit=max&auto=format&n=9_Q1FZLh6C0BFLq-&q=85&s=acdcebb3ae4e83df14dab2d82753f2bf" alt="Editörde kapatma düğmesi yapılandırma seçenekleri" width="990" height="732" data-path="images/docs/c07a30b-Screenshot_2022-12-10_at_5.49.22_PM.png" />
</Frame>

### 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

<Frame caption="Arka plan bloğu ayarları">
  <img src="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/9a441fd-Background_Controls.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=04a65877dc5e9818147ba15975cc5e92" alt="Renk, görsel, padding ve eylemler için arka plan bloğu kontrolleri" width="1071" height="806" data-path="images/docs/9a441fd-Background_Controls.png" />
</Frame>

***

## Kişiselleştirme ve yerelleştirme

Metin, düğme etiketleri ve URL'lerin içinde dahil olmak üzere [veri etiketlerini](./add-user-data-tags) kullanarak uygulama içi mesajları kişiselleştirebilirsiniz.

Yerelleştirme için [Multi-langauge messages](./multi-language-messaging#send-messages-in-different-languages)'a bakın.

<Check>
  İ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
</Check>

***

## 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+**

```xml iOS Info.plist theme={null}
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
```

**Android 5.1.9+**

```xml Android Manifest.xml theme={null}
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>
```

***

## Sonraki adımlar

* Kullanıcılar mesajınızdaki öğelere tıkladığında ne olacağını özelleştirmek için [Uygulama İçi Tıklama Eylemleri](./iam-click-actions) hakkında bilgi edinin.
* Mesajların ne zaman görüneceğini kontrol etmek için farklı [Uygulama İçi Mesaj Tetikleyicileri](./iam-triggers)'ni deneyin.
* Daha fazla özelleştirmeye mi ihtiyacınız var? [HTML ile Uygulama İçi Mesajlar Tasarlama](./design-your-in-app-message-with-html)'yı deneyin.

***