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

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

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’sini kullanın.

Ön koşullar

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

Uygulama İçi Mesajlara Genel Bakış sayfası.
HTML Editörü ile Uygulama İçi Mesajınızı Tasarımın sayfası.

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

Şablonları nasıl kullanılır

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

Mevcut şablonlar

E-posta Toplama Formu

Kullanıcının e-postasını isteyin ve tıklama adı ile uygulanıza gönderin.

Telefon Numarası Toplama Formu

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.

Kontrol Listesi Anketi

Arka uçunuza gönderebileceğiniz veya etiketlere dönüştürebileceğiniz çoklu seçim anketi.

Geri Sayım

Süre sınırlı promosyonlar için geri sayım zamanlayıcısı.

Promosyon Çarkı

Çevir-kazan promosyon deneyimi (promosyon işlemesini özelleştirin).

Quiz Modalı

Kullanıcıları skorlarıyla etiketleyebilen quiz deneyimi.

Derecelendirme Anketi

1–5 derecelendirme anketi (uç noktanıza gönderin veya kullanıcıyı etiketleyin).

Ses/Video Oynatıcı

Doğrudan MP3 dosyası için basit ses önizleme arayüzü.

Dikey Kaydırma

Çok slaytlı dikey kaydırma oryantasyon veya özellik turu.

E-posta formu

Bir uygulama içi mesaj aracılığıyla E-posta Aboneliklerini toplayın. Bu formun nasıl çalıştığı:

Kullanıcı bir e-posta adresi girer ve bir onay kutusunu işaretler.
Gönderimde, OneSignal’in Create User API’sı çağrılır ve uygulanızda e-posta Aboneliği oluşturulur.
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.
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.
ve 4. adımların her ikisinin de e-posta Aboneliği oluşturmayı içerdiğini fark edebilirsiniz.

1. adım doğrudan uygulamaya kod ekleme gerektirmez ancak login metodunu çağırdıysanız kullanıcıya e-posta Aboneliği eklemez.
1. 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.

E-posta Formu HTML Kodu

**Ayarlar > Anahtarlar ve ID’ler’de bulunan OneSignal Uygulama ID’nizle YOUR_APP_ID’yi değiştirin.

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

4. adım için gerekli:

HTML gönderim işleyicinizde addClickName çağrısını tutun.
SDK’mızın Uygulama İçi Mesaj Tıklama Dinleyicisi ile girişi okuyun
Tıklama adı bir e-posta gibi göründüğünde, uygulama içi mesaj tıklama dinleyicisi içinde addEmail metodunu çağırın.

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

// 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 toplayın. Bu formun nasıl çalıştığı:

Kullanıcı ülke kodunu seçer, 10 haneli bir numara girer ve bir onay kutusunu işaretler.
Gönderimde, OneSignal’in Create User API’sı çağrılır ve uygulanızda SMS Aboneliği oluşturulur.
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.
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.
ve 4. adımların her ikisinin de SMS Aboneliği oluşturmayı içerdiğini fark edebilirsiniz.

1. adım doğrudan uygulamaya kod ekleme gerektirmez ancak login metodunu çağırdıysanız kullanıcıya SMS Aboneliği eklemez.
1. 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.

SMS Formu HTML Kodu

**Ayarlar > Anahtarlar ve ID’ler’de bulunan OneSignal Uygulama ID’nizle YOUR_APP_ID’yi değiştirin.

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

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.

İlk adımlar & ayarlar

Mesaj kanalları

Journey'ler

Hedeflenen & özel olaylar

Analitik ve Entegrasyonlar

Gizlilik & Güvenlik

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

Ön koşullar

Şablonları nasıl kullanılır

Mevcut şablonlar

E-posta Toplama Formu

Telefon Numarası Toplama Formu

Kontrol Listesi Anketi

Geri Sayım

Promosyon Çarkı

Quiz Modalı

Derecelendirme Anketi

Ses/Video Oynatıcı

Dikey Kaydırma

E-posta formu

SMS formu

Diğer şablonlar

​Ön koşullar

​Şablonları nasıl kullanılır

​Mevcut şablonlar

E-posta Toplama Formu

Telefon Numarası Toplama Formu

Kontrol Listesi Anketi

Geri Sayım

Promosyon Çarkı

Quiz Modalı

Derecelendirme Anketi

Ses/Video Oynatıcı

Dikey Kaydırma

​E-posta formu

​SMS formu

​Diğer şablonlar

Ön koşullar

Şablonları nasıl kullanılır

Mevcut şablonlar

E-posta formu

SMS formu

Diğer şablonlar