Custom Widget

Kendi HTML, CSS ve JavaScript'inizi yazdığınız kampanya tipi. Hazır tiplerin hiçbiri işinizi görmüyorsa buna düşersiniz.

Panelde nerede

Kişiselleştirme → Kampanyalar (Personalization → Campaigns) → Create Campaign → tür: Custom Widget (Özel Widget), Engagement grubunda.

Yerleşim

both — sabit konum (top / bottom) ya da sayfa içinde bir seçicinin yanı. Target Selector doldurursanız seçici, boşsa sabit konum geçerlidir. Ayrıntı: Yerleşim.

İçerik alanları

Design → Content bölmesinde:

Alan	Açıklama
Custom HTML (Özel HTML)	Widget'ın gövdesi. Boşsa hiçbir şey çizilmez
Custom CSS (Özel CSS)	Bu kampanyayla birlikte sayfaya eklenen stil
Custom JavaScript (Özel JavaScript)	İsteğe bağlı betik
JavaScript Execution Timing	Immediate (Hemen), After DOM Ready (DOM Hazır Olduktan Sonra), On Custom Event (Özel Olayda)
Custom Event Name	Yalnızca özel olay zamanlamasında; zorunludur

Alanların üstündeki Templates (Şablonlar) şeridiyle kütüphanenizdeki bir şablonu üç alana birden uygulayabilirsiniz — Kütüphane. Bu tip koşullu içerik durumu taşımaz: içerik sizin kodunuzdur, değişiklikleri kodunuz yapar.

Custom Widget'ın görünümünü Style bölmesi yalnızca iki alanla etkiler: Container Padding ve Container Background. Gerisi HTML ve CSS'inizdedir.

Güvenlik kuralları

HTML sayfaya konmadan önce temizlenir: script, iframe, style ve onclick gibi olay nitelikleri atılır, CSS'inizden @import, data: ve expression silinir. Neyin izinli olduğu, JavaScript'in nasıl çalıştığı ve güvenlik politikası uyarısı için Özel Kod sayfasını okuyun.

Marka temasını kullanın

Kendi HTML'inizde renkleri sabit yazmak yerine marka temasının değişkenlerini okuyun. Böylece marka renginizi değiştirdiğinizde bu kampanya da değişir:

<div class="promo">
  <h3>Yaz indirimi</h3>
  <a class="promo-cta" href="/kampanya">İncele</a>
</div>

.promo {
  background: var(--selwise-surface, #fff);
  color: var(--selwise-text, #111);
  border-radius: var(--selwise-radius, 8px);
  font-family: var(--selwise-font, inherit);
}
.promo-cta {
  background: var(--selwise-brand, #111);
  color: var(--selwise-brand-text, #fff);
}

Her değişkenin ikinci parametresi yedek değerdir: tema tanımlı değilse o kullanılır. Değişkenlerin tam listesi: Marka Teması.

CSS kapsamı

Yazdığınız CSS sayfanın tamamına uygulanır, yalnızca kampanyaya değil. Sınıf adlarına kendinize ait bir önek verin (.promo-*), body, a, h3 gibi element seçicilerini kapsamsız kullanmayın.

JavaScript

Custom JavaScript alanı ve Code bölmesi vardır; bu alandaki betik kampanyanın kabına eklenen bir script olarak çalışır. Sayfa hedefli, sıralı ve hata yönetimli betikler için ayrı bir modül de vardır: Özel Scriptler.

Uygulama kanalında

Uygulamada Custom Widget bir WebView içinde çizilir ve kodu orada çalışır; diğer tiplerin aksine CSS ve JavaScript uygulanır — bkz. Kampanya ve Widget (mobil).