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

# Uygulama içi mesajlar için HTML şablonları

> OneSignal Uygulama İçi Mesajlarda kullanabileceğiniz kopyala/yapıştır HTML şablonları, gerekli kurulum ve yaygın sorunlar.

Özel OneSignal uygulama içi mesajlarını daha hızlı oluşturmak için bu kopyala/yapıştır HTML şablonlarını kullanın.

Uygulama İçi Mesaj HTML Editörümüz, HTML, CSS ve JavaScript kullanarak uygulama içi mesaj düzen ve davranışınızı tamamen kontrol etmenizi sağlar. Editör **yerleşik şablonlar içermez**, ancak bu sayfa editöre yapıştırıp özelleştirebileceğiniz **kullanıma hazır örnekler** sağlar.

<Note>
  Bu şablonlar bir uygulama içi mesaj webview'u içinde çalışır. Mesajları kapatmak, URL'leri açmak, kullanıcıları etiketlemek ve tıklamaları yakalamak için [Uygulama İçi Mesaj JS API](./in-app-message-api)'sini kullanın.
</Note>

## Ön koşullar

Başlamadan önce, şunları gözden geçirmenizi öneririz:

* [Uygulama İçi Mesajlara Genel Bakış](./in-app-messages-setup) sayfası.
* [HTML Editörü ile Uygulama İçi Mesajınızı Tasarımın](./design-your-in-app-message-with-html) sayfası.

<Warning>
  Şablon koduna sırlar (API anahtarları, tokenler) koymayın. Tüm uygulama içi mesaj girişini güvenilmez olarak görün ve uygulanızda veya arka uçta doğrulayın.
</Warning>

## Şablonları nasıl kullanılır

1. OneSignal'de **Messages > In-App > New In-App**'e gidin.
2. **HTML editörü**nü seçin.
3. Aşağıdan bir şablon bulun.
4. Kod bloğundan tam HTML'i kopyalayın ve editöre yapıştırın.
5. Yer tutucuları güncelleyin (URL'ler, uç noktalar, tarihler ve metin).
6. Gerçek bir cihazda test edin, ardından yayınlayın.

## Mevcut şablonlar

<Card title="E-posta Toplama Formu" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/email-form.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=d74293c6b7c0c2ed0694078d41a8c1c8" href="#email-form" width="1258" height="708" data-path="images/html-iam/email-form.png">
  Kullanıcının e-postasını isteyin ve tıklama adı ile uygulanıza gönderin.
</Card>

<Card title="Telefon Numarası Toplama Formu" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/sms-form.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=d5444750f75c638f9aacc4cadc8ce8e3" href="#sms-form" width="1251" height="704" data-path="images/html-iam/sms-form.png">
  SMS göndermek için onay isteyin ve alın. E.164 formatında telefon numarasını içerir ve tıklama adı ile uygulanıza gönderir.
</Card>

<Card title="Kontrol Listesi Anketi" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/checklist-survey.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=e35945ecfefabdb013053aa814c3618d" href="#checklist-survey" width="574" height="322" data-path="images/html-iam/checklist-survey.png">
  Arka uçunuza gönderebileceğiniz veya etiketlere dönüştürebileceğiniz çoklu seçim anketi.
</Card>

<Card title="Geri Sayım" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/count_down.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=bcc786162ca0f4837c244f0d7f03097d" href="#countdown" width="1820" height="1024" data-path="images/html-iam/count_down.png">
  Süre sınırlı promosyonlar için geri sayım zamanlayıcısı.
</Card>

<Card title="Promosyon Çarkı" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/promo-wheel.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=dfd0aa50f5981774267644acb17da817" href="#promo-wheel" width="574" height="322" data-path="images/html-iam/promo-wheel.png">
  Çevir-kazan promosyon deneyimi (promosyon işlemesini özelleştirin).
</Card>

<Card title="Quiz Modalı" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/quiz_modal.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=66399edf105d0799bdfab78412a60744" href="#quiz-modal" width="1820" height="1024" data-path="images/html-iam/quiz_modal.png">
  Kullanıcıları skorlarıyla etiketleyebilen quiz deneyimi.
</Card>

<Card title="Derecelendirme Anketi" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/ranking-survey.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=42cfa0b554dbfe1f59f61c47306f8460" href="#ranking-survey" width="574" height="322" data-path="images/html-iam/ranking-survey.png">
  1–5 derecelendirme anketi (uç noktanıza gönderin veya kullanıcıyı etiketleyin).
</Card>

<Card title="Ses/Video Oynatıcı" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/ui-ui.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=cf9bdf607dda82687faa1c874fddebb4" href="#audio/video-player" width="574" height="322" data-path="images/html-iam/ui-ui.png">
  Doğrudan MP3 dosyası için basit ses önizleme arayüzü.
</Card>

<Card title="Dikey Kaydırma" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/vertical-swiping.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=3cb4a092cf2e4bb14bee214a0c22c58b" href="#vertical-swiping" width="574" height="322" data-path="images/html-iam/vertical-swiping.png">
  Çok slaytlı dikey kaydırma oryantasyon veya özellik turu.
</Card>

***

### E-posta formu

Bir uygulama içi mesaj aracılığıyla E-posta [Aboneliklerini](./subscriptions) toplayın.

Bu formun nasıl çalıştığı:

1. Kullanıcı bir e-posta adresi girer ve bir onay kutusunu işaretler.

2. Gönderimde, OneSignal'in Create User API'sı çağrılır ve uygulanızda e-posta Aboneliği oluşturulur.

3. Ayrıca, şablon `OneSignalIamApi.addClickName(e, email)` çağrısı yapar ve e-posta adresini SDK'mızın Uygulama İçi Mesaj Tıklama Dinleyicisine geçirir.

4. Uygulanız içinde, tıklama adını okumak ve e-postayı SDK'mızın `addEmail` metoduna geçirmek için Uygulama İçi Mesaj Tıklama Dinleyicisini ekleyebilirsiniz.

5. ve 4. adımların her ikisinin de e-posta Aboneliği oluşturmayı içerdiğini fark edebilirsiniz.

* 2) adım doğrudan uygulamaya kod ekleme gerektirmez ancak `login` metodunu çağırdıysanız kullanıcıya e-posta Aboneliği eklemez.
* 4. adım ek kod (Uygulama İçi Mesaj Tıklama Dinleyicisi) gerektirir ancak `login` metodunu çağırdıysanız da kullanıcıya e-posta Aboneliği ekler.

<Accordion title="E-posta Formu HTML Kodu">
  \*\*[Ayarlar > Anahtarlar ve ID'ler](./keys-and-ids)'de bulunan OneSignal Uygulama ID'nizle `YOUR_APP_ID`'yi değiştirin.

  ```html theme={null}
  <!DOCTYPE html>
  <html lang="tr">
  <head>
      <meta charset="UTF-8">
      <!-- iOS input odaklanmada zoom'u engelle -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <style>
          /* ===== SIFIRLAMA ===== */
          * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
          }
          
          /* ===== TEMEL ===== */
          body {
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
              background: transparent;
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 100vh;
              padding: 20px;
          }
          
          /* ===== KART ===== */
          .container {
              position: relative;
              background: #ffffff;
              border-radius: 16px;
              padding: 32px 24px;
              max-width: 340px;
              width: 100%;
              box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
              text-align: center;
          }
          
          /* ===== KAPAT DÜĞMESİ ===== */
          .close-btn {
              position: absolute;
              top: 12px;
              right: 12px;
              background: none;
              border: none;
              font-size: 24px;
              color: #999;
              cursor: pointer;
              padding: 4px 8px;
              line-height: 1;
          }
          
          .close-btn:hover {
              color: #333;
          }
          
          /* ===== TİPOGRAFİ ===== */
          h1 {
              font-size: 22px;
              font-weight: 600;
              color: #333;
              margin-bottom: 8px;
          }
          
          p {
              font-size: 14px;
              color: #666;
              margin-bottom: 24px;
              line-height: 1.5;
          }
          
          /* ===== E-POSTA GİRİŞİ ===== */
          .email-input {
              width: 100%;
              padding: 14px 16px;
              font-size: 16px; /* iOS otomatik zoom'unu engellemek için 16px */
              border: 2px solid #e0e0e0;
              border-radius: 10px;
              margin-bottom: 16px;
              outline: none;
              transition: border-color 0.2s;
              touch-action: manipulation;
          }
          
          .email-input:focus {
              border-color: #007AFF;
          }
          
          .email-input::placeholder {
              color: #aaa;
          }
          
          /* ===== ONAY CHECKBOX'I ===== */
          .consent-wrapper {
              display: flex;
              align-items: flex-start;
              gap: 10px;
              text-align: left;
              margin-bottom: 16px;
          }
          
          .consent-wrapper input[type="checkbox"] {
              width: 18px;
              height: 18px;
              margin-top: 2px;
              cursor: pointer;
              flex-shrink: 0;
          }
          
          .consent-wrapper label {
              font-size: 13px;
              color: #666;
              line-height: 1.4;
              cursor: pointer;
          }
          
          /* ===== GÖNDER DÜĞMESİ ===== */
          .submit-btn {
              width: 100%;
              padding: 14px 24px;
              font-size: 16px;
              font-weight: 600;
              color: #fff;
              background: #007AFF;
              border: none;
              border-radius: 10px;
              cursor: pointer;
              transition: background 0.2s, opacity 0.2s;
          }
          
          .submit-btn:hover {
              background: #0056b3;
          }
          
          .submit-btn:disabled {
              background: #ccc;
              cursor: not-allowed;
              opacity: 0.7;
          }
          
          /* ===== DURUM MESAJLARI ===== */
          .error-msg,
          .success-msg {
              font-size: 12px;
              margin-top: -12px;
              margin-bottom: 12px;
              display: none;
          }
          
          .error-msg {
              color: #e53935;
          }

          .success-msg {
              color: #4CAF50;
              font-size: 14px;
          }
          
          /* ===== YÜKLENME DURUMU ===== */
          .loading {
              pointer-events: none;
              opacity: 0.7;
          }
      </style>
  </head>
  <body>
      <div class="container">
          <!-- Kapat Düğmesi -->
          <button id="close-btn" class="close-btn" data-onesignal-unique-label="close-button">×</button>
          
          <!-- Başlık -->
          <h1>Bağlantıda Kalın!</h1>
          <p>Güncellemeler ve özel teklifler almak için e-postanızı girin. İstediğiniz zaman abonelikten çıkabilirsiniz!</p>
          
          <!-- E-posta Girişi -->
          <input 
              type="email" 
              id="email-input" 
              class="email-input" 
              placeholder="E-postanızı girin" 
              data-onesignal-unique-label="email-input" 
              autocomplete="email" 
              autocapitalize="off"
          >
          
          <!-- Durum Mesajları -->
          <p id="error-msg" class="error-msg">Lütfen geçerli bir e-posta adresi girin</p>
          <p id="success-msg" class="success-msg">Abone olduğunuz için teşekkürler!</p>
          
          <!-- Onay Checkbox'ı -->
          <div class="consent-wrapper">
              <input type="checkbox" id="consent-checkbox" name="consent">
              <label for="consent-checkbox">Pazarlama e-postaları almayı kabul ediyorum</label>
          </div>
          
          <!-- Gönder Düğmesi -->
          <button id="submit-btn" class="submit-btn" data-onesignal-unique-label="submit-email" disabled>
              Abone Ol
          </button>
      </div>

      <script>
          document.addEventListener("DOMContentLoaded", function() {
              
              // ===== DOM REFERANSLARI =====
              var emailInput = document.getElementById("email-input");
              var submitBtn = document.getElementById("submit-btn");
              var closeBtn = document.getElementById("close-btn");
              var errorMsg = document.getElementById("error-msg");
              var successMsg = document.getElementById("success-msg");
              var consentCheckbox = document.getElementById("consent-checkbox");
              
              // ===== YARDIMCI FONKSİYONLAR =====
              
              // E-posta formatını doğrula
              function isValidEmail(email) {
                  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
              }
              
              // Sadece e-posta geçerli VE onay işaretlendiğinde gönder düğmesini etkinleştir
              function updateSubmitState() {
                  var email = emailInput.value.trim();
                  submitBtn.disabled = !(isValidEmail(email) && consentCheckbox.checked);
              }
              
              // OneSignal API aracılığıyla e-posta aboneliği oluştur
              async function createOneSignalUser(email) {
                  // ⚠️ OneSignal Uygulama ID'nizle değiştirin
                  var appId = "YOUR_APP_ID";
                  var url = "https://api.onesignal.com/apps/" + appId + "/users";
                  
                  var payload = {
                      properties: {
                          tags: { email_created_from: "iam" },
                          language: "tr"
                      },
                      subscriptions: [{
                          type: "Email",
                          token: email,
                          enabled: true
                      }]
                  };
                  
                  var response = await fetch(url, {
                      method: "POST",
                      headers: { "Content-Type": "application/json" },
                      body: JSON.stringify(payload)
                  });
                  
                  if (!response.ok) throw new Error("API isteği başarısız oldu");
                  return response.json();
              }
              
              // ===== OLAY DİNLEYİCİLERİ =====
              
              // Kapat düğmesi - IAM'i kapat
              closeBtn.addEventListener("click", function(e) {
                  OneSignalIamApi.close(e);
              });
              
              // Checkbox - düğme durumunu güncelle
              consentCheckbox.addEventListener("change", updateSubmitState);
              
              // E-posta girişi - düğme durumunu güncelle ve hataları gizle
              emailInput.addEventListener("input", function() {
                  errorMsg.style.display = "none";
                  updateSubmitState();
              });
              
              // E-posta girişi - Enter tuşuyla gönder
              emailInput.addEventListener("keypress", function(e) {
                  if (e.key === "Enter" && !submitBtn.disabled) {
                      submitBtn.click();
                  }
              });
              
              // Gönder düğmesi - aboneliği işle
              submitBtn.addEventListener("click", async function(e) {
                  var email = emailInput.value.trim();
                  
                  if (!isValidEmail(email) || !consentCheckbox.checked) {
                      errorMsg.textContent = "Lütfen geçerli bir e-posta adresi girin";
                      errorMsg.style.display = "block";
                      return;
                  }
                  
                  // E-postayı OneSignal tıklama işleyicisine geç (senkron olarak çağrılmalı)
                  OneSignalIamApi.addClickName(e, email);
                  
                  // Yükleme durumunu göster
                  errorMsg.style.display = "none";
                  submitBtn.textContent = "Abone oluyor...";
                  submitBtn.classList.add("loading");
                  
                  try {
                      await createOneSignalUser(email);
                      
                      // Başarı - mesajı göster ve otomatik kapat
                      successMsg.style.display = "block";
                      submitBtn.textContent = "Abone olundu!";
                      
                      setTimeout(function() {
                          closeBtn.click();
                      }, 1500);
                      
                  } catch (error) {
                      // Hata - sıfırla ve mesajı göster
                      submitBtn.textContent = "Abone Ol";
                      submitBtn.classList.remove("loading");
                      errorMsg.textContent = "Bir şeyler yanlış gitti. Lütfen tekrar deneyin.";
                      errorMsg.style.display = "block";
                  }
              });
          });
      </script>
  </body>
  </html>
  ```
</Accordion>

**4. adım için gerekli:**

1. HTML gönderim işleyicinizde [addClickName](./in-app-message-api#click-name) çağrısını tutun.
2. SDK'mızın [Uygulama İçi Mesaj Tıklama Dinleyicisi](./mobile-sdk-reference#addclicklistener-in-app) ile girişi okuyun
3. Tıklama adı bir e-posta gibi göründüğünde, uygulama içi mesaj tıklama dinleyicisi içinde [addEmail](./mobile-sdk-reference#addemail-,-removeemail) metodunu çağırın.

**Uygulama içi mesaj tıklama dinleyicisi ve addEmail metodunu kullanan örnek:**

```swift theme={null}
// HTML uygulama içi mesajlardan e-posta ve telefon yakalamak için örnek Uygulama İçi Mesaj Tıklama İşleyicisi
class InAppMessageClickHandler: NSObject, OSInAppMessageClickListener {
    func onClick(event: OSInAppMessageClickEvent) {
        // Olaydan tıklama adını (actionId) al
        let clickName = event.result.actionId
        print("Uygulama içi mesaja tıklandı, actionId: \(clickName ?? "nil")")
        
        guard let value = clickName else { return }
        
        // Tıklama adının bir e-posta adresi gibi görünüp görünmediğini kontrol et
        if value.contains("@") && value.contains(".") {
            OneSignal.User.addEmail(value)
            print("OneSignal'e e-posta eklendi: \(value)")
        }
        // Tıklama adının E.164 formatında bir telefon numarası gibi görünüp görünmediğini kontrol et (+1XXXXXXXXXX)
        else if value.hasPrefix("+") && value.count >= 11 {
            OneSignal.User.addSms(value)
            print("OneSignal'e SMS eklendi: \(value)")
        }
    }
}
```

***

### SMS formu

Bir uygulama içi mesaj aracılığıyla SMS [Aboneliklerini](./subscriptions) toplayın.

Bu formun nasıl çalıştığı:

1. Kullanıcı ülke kodunu seçer, 10 haneli bir numara girer ve bir onay kutusunu işaretler.

2. Gönderimde, OneSignal'in Create User API'sı çağrılır ve uygulanızda SMS Aboneliği oluşturulur.

3. Ayrıca, şablon `OneSignalIamApi.addClickName(e, e164Phone)` çağrısı yapar ve telefon numarasını SDK'mızın Uygulama İçi Mesaj Tıklama Dinleyicisine geçirir.

4. Uygulanız içinde, tıklama adını okumak ve telefon numarasını SDK'mızın `addSms` metoduna geçirmek için Uygulama İçi Mesaj Tıklama Dinleyicisini ekleyebilirsiniz.

5. ve 4. adımların her ikisinin de SMS Aboneliği oluşturmayı içerdiğini fark edebilirsiniz.

* 2) adım doğrudan uygulamaya kod ekleme gerektirmez ancak `login` metodunu çağırdıysanız kullanıcıya SMS Aboneliği eklemez.
* 4. adım ek kod (Uygulama İçi Mesaj Tıklama Dinleyicisi) gerektirir ancak `login` metodunu çağırdıysanız da kullanıcıya SMS Aboneliği ekler.

<Accordion title="SMS Formu HTML Kodu">
  \*\*[Ayarlar > Anahtarlar ve ID'ler](./keys-and-ids)'de bulunan OneSignal Uygulama ID'nizle `YOUR_APP_ID`'yi değiştirin.

  ```html theme={null}
  <!DOCTYPE html>
  <html lang="tr">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <style>
          /* Stiller e-posta formuyla aynı, telefon girişi için ayarlanmış */
          * { box-sizing: border-box; margin: 0; padding: 0; }
          body {
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
              background: transparent;
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 100vh;
              padding: 20px;
          }
          .container {
              position: relative;
              background: #ffffff;
              border-radius: 16px;
              padding: 32px 24px;
              max-width: 340px;
              width: 100%;
              box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
              text-align: center;
          }
          /* Diğer stiller... */
      </style>
  </head>
  <body>
      <div class="container">
          <button id="close-btn" class="close-btn">×</button>
          <h1>SMS ile güncellemeler alın!</h1>
          <p>Önemli güncellemeleri SMS ile almak için telefon numaranızı girin.</p>
          
          <div class="phone-input-wrapper">
              <select id="country-select" class="country-select">
                  <option value="+1">🇺🇸 +1</option>
                  <option value="+90">🇹🇷 +90</option>
                  <!-- Diğer ülke kodları... -->
              </select>
              <input type="tel" id="phone-input" class="phone-input" placeholder="1234567890" maxlength="10">
          </div>
          
          <div class="consent-wrapper">
              <input type="checkbox" id="consent-checkbox">
              <label for="consent-checkbox">SMS pazarlama mesajları almayı kabul ediyorum</label>
          </div>
          
          <button id="submit-btn" class="submit-btn" disabled>Abone Ol</button>
      </div>
      
      <script>
          // JavaScript mantığı (e-posta formuyla aynı, telefon işleme için ayarlanmış)
          // Ayrıntılı uygulama e-posta formuyla aynı deseni takip eder
      </script>
  </body>
  </html>
  ```
</Accordion>

### Diğer şablonlar

Yukarıdaki e-posta ve SMS formlarına ek olarak, bu şablonları da kullanabilirsiniz:

* **Kontrol Listesi Anketi**: Çoklu seçim anketi
* **Geri Sayım**: Süre sınırlı promosyonlar
* **Promosyon Çarkı**: Çevir-kazan deneyimi
* **Quiz Modalı**: Skor tabanlı quiz
* **Derecelendirme Anketi**: 1–5 değerlendirme
* **Ses/Video Oynatıcı**: Medya önizlemesi
* **Dikey Kaydırma**: Çok slaytlı tur

Her şablonun ayrıntılı HTML kodu ve uygulama adımları için yukarıdaki kart bağlantılarından her bölüme bakın.