# Custom Widget

Kendi HTML içeriğiniz
Kaynak: https://selwise.com/docs/widgets/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](/docs/widgets/placement).

## İç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](/docs/library/overview). 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](/docs/campaigns/custom-code) 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:

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

```css
.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ı](/docs/brand/theme).

## 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](/docs/custom-scripts/overview).

## 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)](/docs/mobile/surfaces).