Sürükle-bırak e-posta editörü

Dashboard → Mesajlar → E-posta Editörü (/{org}/email-designs). Karar kaydı: ADR-0027.

KavramlarBağlantıyı kopyala

• Tasarım (edg_): blok belgesi ({ version: 1, settings, sections[] }), konu, ön başlık. App'e özeldir.
• Bölüm: 1–4 sütun; her sütunda içerik blokları. Sütun genişliği verilmezse kalan genişlik eşit paylaşılır; mobilde sütunlar alt alta dizilir (bölüm ayarıyla kapatılabilir).
• Bloklar: Metin (zengin metin, Liquid), Görsel (alt metin; dekoratif işaretlenebilir), Düğme, Ayraç, Boşluk, Sosyal (Facebook, X, Instagram, LinkedIn, YouTube, Pinterest, GitHub, web), HTML (ham kod; tablolar ve Outlook koşullu yorumları korunur).
• Kayıtlı bloklar (esb_): bir bölüm veya blok, aynı app'teki diğer tasarımlarda paletten sürüklenerek kullanılır.

Kaydetme ve şablon sürümleriBağlantıyı kopyala

Her kayıtta tasarım sunucuda doğrulanır, MJML'e ve HTML'e derlenir ve bağlı e-posta şablonuna yeni sürüm olarak yazılır (email_subject, email_preheader, email_body). İlk kayıt yeni bir şablon (email-designer etiketli) açar. Kampanya, journey ve API (template_id, template_version) bu şablonu her zamanki gibi kullanır; sürüm geçmişi ve geri alma şablon ekranındadır. Tasarımı silmek şablonu silmez. Var olan bir e-posta şablonuna bağlamak için API'de template_id verin (diğer kanal alanları korunur, email_mjml kaldırılır).

KişiselleştirmeBağlantıyı kopyala

Metin, konu, bağlantı ve görsel adreslerinde Liquid kullanılabilir ({{ user.tags.first_name | default: "dostum" }}, {% if … %}, Data Feeds/Dynamic Content etiketleri). Zengin metin araç çubuğundaki değişken seçici imleç konumuna ekler. {{ unsubscribe_url }} ve {{ preference_center_url }} gönderimde teslimata özgü adresle değişir; kullanılmazsa altbilgi otomatik eklenir. Değişken çıktıları HTML kaçışlıdır.

ÖnizlemeBağlantıyı kopyala

Önizleme sekmesi tasarımı API'de gönderimle aynı derleyiciyle derler ve örnek kişiselleştirmeyle (first_name = Ayşe) gösterir. Masaüstü/mobil (375 px) ve açık/koyu tema seçilebilir. Koyu tema, prefers-color-scheme: dark destekleyen istemcilerin (Apple Mail, Outlook macOS/iOS) davranışını simüle eder; renkler Belge ayarları → Koyu tema renklerinden verilir. İzleme pikseli, tıklama yönlendirmesi ve abonelikten çıkma bağlantıları gönderimde eklenir.

Erişilebilirlik denetimiBağlantıyı kopyala

Sağ paneldeki liste anlık güncellenir; bir soruna tıklamak bloğu seçer:

• Alternatif metni olmayan görsel (dekoratif değilse),
• WCAG AA altı kontrast (normal metin 4.5:1, büyük/kalın metin 3:1; düğmeler ve satır içi renkler dahil; koyu tema renkleri tanımlıysa ayrıca),
• Boş bağlantı (düğme, sosyal, metin içi href=""), metinsiz düğme veya bağlantı.

Denetim kaydı engellemez; aynı sonuçlar API yanıtında issues alanındadır.

KlavyeBağlantıyı kopyala

Palet öğeleri düğmedir: Enter/Boşluk seçili bloğun ardına (yoksa seçili bölüme, o da yoksa sona) ekler. Tuvalde bir blok odaktayken Alt+↑/↓ yukarı/aşağı (bölüm sınırını geçer), Alt+←/→ komşu sütuna taşır, Ctrl+D çoğaltır, Delete siler. Ctrl+Z geri alır, Ctrl+Y veya Ctrl+Shift+Z yineler (form alanlarında tarayıcının kendi geri alması çalışır).

API (dashboard oturumu)Bağlantıyı kopyala

Okuma analytics.read, yazma templates.write yetkisi ister. Geçersiz belge 400 (HS_VALIDATION_ERROR), içeriksiz tasarım 422 (HS_CONTENT_INVALID), başka tasarıma bağlı şablon 409 döner.

GüvenlikBağlantıyı kopyala

Metin ve HTML blokları sunucuda temizlenir (betik, iframe, form, on* öznitelikleri, javascript: adresleri atılır). Dashboard'da zengin metin ve yapıştırılan içerik izinli alt kümeye indirgenir; HTML blokları ve önizleme betiksiz (sandbox="") çerçevede gösterilir.