# Widget oluşturucu > KickBot widget oluşturucuda HTML, CSS ve JavaScript ile kendi Kick yayın widget'ını yap, sahte olaylarla test et ve kütüphanede yayınla. Source: https://kickbot.com/tr/docs/widgets/widget-builder Widget oluşturucu, HTML, CSS ve JavaScript ile Kick yayının için kendi overlay'ini yapmanı sağlar. KickBot canlı Kick olaylarını (takip, abone, hediye abonelik, KICKs, raid, chat mesajları ve daha fazlası) koduna gönderir, yani hiçbir API'ye bağlanman gerekmez. Widget'ı kendi yayınında kullanabilir, diğer yayıncılar da widget kütüphanesinden yükleyebilsin diye yayınlayabilirsin. [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder) adresinden aç. Oluşturucu biraz kod yazabilenler için. Sadece hazır bir overlay istiyorsan [widget kütüphanesini](https://kickbot.com/tr/docs/widgets/widget-library) kullan. Kod referansı (olaylar, veriler ve ayarlar) için [Widget oluşturucu referansı](https://kickbot.com/tr/docs/widgets/widget-builder-reference) sayfasına bak. ![Yeni widget düğmesi, URL'si gizli bir widget ve Referans bölümüyle KickBot widget oluşturucu ana sayfası](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "Widget oluşturucu widget'larını ve OBS URL'lerini listeler.") ## Yeni widget yap 1. [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder) adresini aç ve **Yeni widget**'a tıkla. 2. **Boş**'u seç ya da bir şablondan başla: **Viewer Count**, **Simple Follower Goal** veya **Basic Chat Widget**. Şablon, o KickBot widget'ının kodunu kopyalar, böylece onu değiştirebilirsin. 3. Bir **Widget adı** gir. Boş widget için ayrıca piksel cinsinden **Genişlik** ve **Yükseklik** belirle (varsayılan 800 × 600). 4. **Widget oluştur**'a tıkla. Editör açılır. ![Boş seçeneği ve Viewer Count ile Simple Follower Goal şablonlarıyla Yeni widget penceresi](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "Boş bir widget'la veya bir şablonla başla.") > **Note:** Ücretsiz planda widget oluşturucuda en fazla 10 widget'ın olabilir. Premium'da sınır yok. Kütüphaneden yüklediğin widget'lar sayılmaz. ## Editör Editörün üç bölümü var: solda ayarlar, ortada kod ve sağda canlı önizleme. ![Solda Temel ayarlar ve Kullanıcı değişkenleri, ortada HTML kod sekmesi ve sağda önizlemeyle widget oluşturucu editörü](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "Widget oluşturucu editöründe ayarlar, kod ve önizleme.") - **Temel ayarlar**: ad ve widget'ın gösterildiği genişlik ve yükseklik. - **Kullanıcı değişkenleri**: yayıncıların kod yazmadan değiştirebileceği ayarlar, örneğin bir renk, bir metin veya bir hedef sayısı. [Kullanıcı değişkenleri](https://kickbot.com/tr/docs/widgets/widget-builder-reference#user-variables) bölümüne bak. - **Test olayı gönder**: önizlemeye sahte bir olay (Sub, Hediye sub, KICKs, Follow, Raid, Mesaj ve daha fazlası) gönderen düğmeler. - **Görünürlük**: widget'ın gizli mi yoksa yayında mı olduğunu gösterir ve **Widget'ı yayınla** düğmesi buradadır. - **Kod**: **HTML**, **CSS** ve **JavaScript** sekmeleri. Tek bir dosya (**Tek**) veya aynı anda iki dosya (**Yan yana** veya **Alt alta**) göstermek için üstteki **Editör düzeni**'ni kullan. - **Önizleme**: widget'ı kendi boyutunda, sığacak şekilde ölçeklenmiş olarak gösterir. Sen yazdıkça güncellenir. Baştan başlatmak için yenile düğmesini, kendi penceresinde açmak için açılır pencere düğmesini kullan (tarayıcı konsolunu açmak için işe yarar). Editör, sen yazarken çalışmanı kendiliğinden kaydeder. **Kaydet** her şeyi aynı anda kaydeder, altındaki metin en son ne zaman kaydedildiğini gösterir. **Çıkış** widget listesine geri döner. Editör geniş bir ekran ister. Telefonda KickBot onu bir bilgisayarda açmanı ister. Widget'ın kaydedildi, bilgisayardan devam edebilirsin. ## Widget'ını test et 1. **Test olayı gönder**'i aç. 2. Bir olaya tıkla, örneğin **Follow** veya **Mesaj**. 3. Önizlemenin tepkisini izle. Test olayları gerçek olaylarla aynı yapıdadır ve örnek veri taşır. Sadece bu sayfadaki önizlemeye gider, asla OBS'ye veya yayınına gitmez. Gerçek olaylarla test etmek için widget'ı OBS'ye ekleyip yayına geç ya da bir arkadaşından kanalını takip etmesini iste. ## Widget'ını yayında kullan Yaptığın her widget [Kayıtlı widget'lar](https://kickbot.com/dashboard/saved-widgets) sayfasında da görünür, adının altında “Kendi widget'ın” yazar. URL'si her zaman en son kodunu çalıştırır. 1. Widget oluşturucu sayfasında widget'ındaki **URL'yi kopyala**'ya tıkla. 2. OBS'de bir **Browser** (Tarayıcı) kaynağı ekle, URL'yi yapıştır ve genişliği ve yüksekliği widget boyutuna ayarla. 3. **OK**'a tıkla. Widget OBS'deyken kodu değiştirirsen yeni kodu yüklemek için tarayıcı kaynağını yenile. Kayıtlı widget'larda bir kullanıcı değişkeninin değerini değiştirip **Değişiklikleri Kaydet**'e tıkladığında OBS widget'ı kendiliğinden yeniden yükler. Daha fazla yardım için [OBS'ye tarayıcı kaynağı ekle](https://kickbot.com/tr/docs/getting-started/add-browser-source-obs) sayfasına bak. > **Caution:** URL'yi gizli tut. Ona sahip olan herkes widget'ını kendi ekranında gösterebilir. ## Widget kütüphanesinde yayınla Diğer yayıncıların widget'ını bulup yüklemesini istiyorsan onu yayınla. 1. Editörde **Görünürlük**'ü aç ve **Widget'ı yayınla**'ya tıkla. 2. Bir **Birincil görsel** ve en az bir görsel daha ekle. Toplam en fazla 10 görsel ekleyebilirsin, her biri en fazla 10 MB. En iyi sonuç 1920 × 1080 ile alınır. 3. Bir **Açıklama** yaz: widget ne gösteriyor ve nasıl kurulur. 4. Gönder. Pencere **Widget yayınlandı!** mesajını gösterir: widget'ın incelemeye gönderildi. KickBot ekibi her widget'ı inceler. Onaylanırsa widget kütüphanesinde, oluşturan olarak senin Kick adınla görünür. İnceleme genelde 24 saatten kısa sürer. > **Caution:** Bir widget'ı sadece bir kez yayınlayabilirsin. Ondan sonra editör “Widget zaten yayında. Değişiklikler için destek ile iletişime geç” yazar. Yayınlamadan önce widget'ını iyice test et. ## Widget sil Widget oluşturucu sayfasında bir widget'ın **⋯** menüsünü aç ve **Sil**'e tıkla. Bu, kodunu ve ayarlarını siler ve geri alınamaz. ## Ekip üyeleri Ekip üyelerinin editörü açıp widget yapabilmesi için **Widget Oluşturucu** yetkisi gerekir. Widget URL'lerini görmek için **Widget'ları yapılandır** yetkisi gerekir. [Ekibi yönet](https://kickbot.com/tr/docs/account/team) sayfasına bak. ## Sıkça sorulan sorular **Kod yazmayı bilmem gerekiyor mu?** Evet, biraz HTML, CSS ve JavaScript. Kod yazmıyorsan bunun yerine [widget kütüphanesinden](https://kickbot.com/tr/docs/widgets/widget-library) bir widget yükle ve ayarlarını değiştir. **Kütüphanedeki bir KickBot widget'ını düzenleyebilir miyim?** Kütüphane widget'ının kodunu değiştiremezsin. Değiştirebileceğin bir kod kopyası almak için **Viewer Count**, **Simple Follower Goal** veya **Basic Chat Widget** şablonundan yeni bir widget başlat. **Widget'ım font, görsel veya başka script yükleyebilir mi?** Evet. HTML, CSS ve JavaScript'in OBS'de normal bir web sayfasında çalışır, yani başka sitelerden web fontlarına, görsellere ve script'lere bağlantı verebilirsin. Yayıncıların kendi dosyalarını yükleyebilmesi için **Görsel/GIF**, **Video** veya **Ses** kullanıcı değişkenlerini kullan. **KickBot API ile widget yapabilir miyim?** Evet. KickBot API widget'larını listeleyebilir, oluşturabilir ve güncelleyebilir. [Widget API referansı](https://kickbot.com/docs/api/reference/widgets) sayfasına bak.