HTML in-app mesajları, şablon galerisi ve carousel

Karar kaydı: ADR-0027. In-app mesaj editöründe içerik türü HTML seçilir veya Şablondan başla ile galeriden (24 hazır şablon, tr/en) bir görünüm kopyalanır.

Güvenlik modeliBağlantıyı kopyala

HTML temizlenmez, yalıtılır:

• Web: <iframe sandbox="allow-scripts"> (allow-same-origin yok). İçerik opak kökende çalışır; uygulamanın DOM'una, çerezlerine, localStorage'ına erişemez, window.top.location'ı değiştiremez, açılır pencere açamaz, form gönderemez.
• Belgenin başına CSP eklenir: default-src 'none'; img-src https: data:; style-src 'unsafe-inline'; script-src 'unsafe-inline'. fetch, XHR, WebSocket, dış betik/stil/yazı tipi yüklenemez; yalnızca https ve data: görseller.
• İçerik kendi içinde başka sayfaya gitmeye çalışırsa (bağlantı, location, meta refresh) mesaj kapatılır. Bağlantı tıklamaları otomatik olarak köprüye (click('link', href)) çevrilir.
• Android WebView ve iOS WKWebView aynı belgeyi yükler; dosya/içerik erişimi kapalı, gezinme ve ağ istekleri engelli, JavaScript arayüzü yalnızca köprüdür. Flutter'da HTML mesajları yerel SDK çizer.
• Liquid değişkenleri ({{ user.tags.name }}) sunucuda HTML kaçışlı yerleştirilir.

Sitenizin CSP'si satır içi betiğe izin vermiyorsa (script-src içinde 'unsafe-inline' veya karşılığı yoksa) srcdoc belgesi bu politikayı devraldığından köprü betiği çalışmaz; HTML in-app kullanılacak sayfalarda CSP buna göre ayarlanmalı.

PushizoBridge API'siBağlantıyı kopyala

İçerik içinde window.PushizoBridge hazırdır (değiştirilemez):

Bildirime dayalı kısayollar:

• data-hs-close olan öğeye tıklama → close().
• data-hs-action="kimlik" olan öğeye tıklama → click("kimlik", href veya data-hs-url).
• <a href> tıklaması → click("link", href).

Örnek:

<style>body{font-family:system-ui;text-align:center;padding:24px}@media (prefers-color-scheme:dark){body{background:#18181b;color:#fafafa}}</style>
<h1>Bizi puanlar mısın?</h1>
<button onclick="PushizoBridge.trackEvent('rating',{stars:5});PushizoBridge.click('rate_store','https://example.com/store')">5 yıldız</button>
<button data-hs-close>Daha sonra</button>

Mesaj protokolü (SDK geliştiricileri için): { hs: "pushizo-bridge", v: 1, nonce, type, … }, türler ready, close, click (action_id, url?), add_tag (key, value), track_event (name, props), resize (height). Kabul için kaynak çerçeve, gösterim başına nonce ve şema doğrulanır; ortak vektörler sdk/testdata/html-bridge-vectors.json.

Yükseklik ve düzenBağlantıyı kopyala

Modal ve banner'larda html_height (40–2000 px) ilk yüksekliktir; içerik yüklenince köprü gerçek yüksekliği bildirir (ekranın %90'ı sınır). Tam ekranda içerik tüm alanı kaplar. Koyu tema için @media (prefers-color-scheme: dark) kullanın.

Carousel bloğuBağlantıyı kopyala

Blok içerikte Carousel bloğu 1–10 kart taşır: görsel (https, alt metin), başlık, metin ve isteğe bağlı düğme (in-app düğme eylemleri). Kartlar yatay kaydırılır; ekran okuyucular "Kart 1/3" etiketini duyurur, ok düğmeleri ve klavye (←/→) ile gezilir. Kart düğmesi tıklaması normal düğme tıklamasıdır; tüm düğme kimlikleri mesaj içinde tekil olmalıdır.

SDK uyumluluğuBağlantıyı kopyala

SDK'lar supports=html,carousel ile yetenek bildirir (Web, Android, iOS, Flutter güncel sürümleri). Eski SDK'lara HTML mesajlar gönderilmez ve carousel blokları çıkarılır; mesajın geri kalanı gösterilir.

Şablon galerisiBağlantıyı kopyala

• Sistem şablonları kodla sürümlenir (IN_APP_GALLERY_VERSION); kategoriler: hoş geldin, kampanya, sepet, anket, puanlama, tanıtım, güncelleme, izin, bülten, duyuru, sadakat.
• Şablon olarak kaydet mevcut görünümü organizasyon şablonu yapar; aynı organizasyonun tüm app'lerinde görünür.
• API: GET /internal/v1/apps/{appId}/in-app-templates?language=tr&source=system|org&category=…, POST (ad, açıklama, kategori, görünüm), PATCH/DELETE …/{templateId} (yalnızca organizasyon şablonları).