# Tvůrce widgetů > Vytvoř si vlastní widget pro stream na Kicku v HTML, CSS a JavaScriptu v Tvůrci widgetů KickBotu, otestuj ho falešnými událostmi a zveřejni ho v knihovně. Source: https://kickbot.com/cs/docs/widgets/widget-builder V Tvůrci widgetů si vytvoříš vlastní overlay pro svůj stream na Kicku v HTML, CSS a JavaScriptu. KickBot posílá do tvého kódu živé události z Kicku (followy, suby, darované suby, KICKs, raidy, zprávy v chatu a další), takže se nemusíš připojovat k žádnému API. Widget můžeš používat na svém streamu a můžeš ho zveřejnit, aby si ho ostatní streameři mohli nainstalovat z Knihovny widgetů. Otevřeš ho na [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder). Tvůrce je pro ty, kdo umí aspoň trochu programovat. Pokud chceš jen hotový overlay, použij [Knihovnu widgetů](https://kickbot.com/cs/docs/widgets/widget-library). Popis kódu (události, data a nastavení) najdeš v [referenci Tvůrce widgetů](https://kickbot.com/cs/docs/widgets/widget-builder-reference). ![Úvodní stránka Tvůrce widgetů KickBotu s tlačítkem Nový widget, jedním widgetem se skrytou URL a sekcí Reference](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "Tvůrce widgetů ukazuje tvoje widgety a jejich URL pro OBS.") ## Vytvoř nový widget 1. Otevři [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder) a klikni na **Nový widget**. 2. Vyber **Prázdný**, nebo začni ze šablony: **Viewer Count**, **Simple Follower Goal** nebo **Basic Chat Widget**. Šablona zkopíruje kód daného widgetu KickBotu, takže ho můžeš upravit. 3. Zadej **Název widgetu**. U prázdného widgetu nastav i **Šířku** a **Výšku** v pixelech (výchozí je 800 × 600). 4. Klikni na **Vytvořit widget**. Otevře se editor. ![Okno Nový widget s možností Prázdný a šablonami Viewer Count a Simple Follower Goal](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "Začni prázdným widgetem nebo šablonou.") > **Note:** V tarifu zdarma můžeš mít v Tvůrci widgetů až 10 widgetů. S Premium žádný limit není. Widgety nainstalované z knihovny se do limitu nepočítají. ## Editor Editor má tři části: vlevo nastavení, uprostřed kód a vpravo živý náhled. ![Editor Tvůrce widgetů se Základním nastavením a Uživatelskými proměnnými vlevo, záložkou s HTML kódem uprostřed a náhledem vpravo](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "Nastavení, kód a náhled v editoru Tvůrce widgetů.") - **Základní nastavení**: název a šířka a výška, ve které se widget vykresluje. - **Uživatelské proměnné**: nastavení, která streameři můžou měnit bez kódu, třeba barva, text nebo číslo cíle. Viz [Uživatelské proměnné](https://kickbot.com/cs/docs/widgets/widget-builder-reference#user-variables). - **Poslat testovací události**: tlačítka, která do náhledu pošlou falešnou událost (Sub, Darovaný sub, KICKs, Sledování, Raid, Zpráva a další). - **Viditelnost**: ukazuje, jestli je widget soukromý, nebo zveřejněný, a je tu tlačítko **Zveřejnit widget**. - **Kód**: záložky **HTML**, **CSS** a **JavaScript**. Nahoře v **Rozložení editoru** vybereš, jestli chceš vidět jeden soubor (**Jeden panel**), nebo dva soubory najednou (**Vedle sebe** nebo **Pod sebou**). - **Náhled**: ukazuje widget v jeho velikosti, zmenšený tak, aby se vešel. Mění se, zatímco píšeš. Tlačítkem pro znovunačtení ho spustíš od začátku, tlačítkem pro vyskakovací okno ho otevřeš v samostatném okně (hodí se, když chceš otevřít konzoli prohlížeče). Editor ukládá tvoji práci sám, zatímco píšeš. **Uložit** uloží všechno najednou a text pod tlačítkem ukazuje, kdy se naposledy ukládalo. **Odejít** tě vrátí na seznam widgetů. Editor potřebuje širokou obrazovku. Na telefonu tě KickBot požádá, ať ho otevřeš na počítači. Widget je uložený, takže tam můžeš pokračovat. ## Otestuj widget 1. Otevři **Poslat testovací události**. 2. Klikni na událost, třeba **Sledování** nebo **Zpráva**. 3. Sleduj, jak náhled reaguje. Testovací události mají stejný tvar jako skutečné události, jen s ukázkovými daty. Jdou jen do náhledu na této stránce, nikdy do OBS ani na tvůj stream. Se skutečnými událostmi to vyzkoušíš tak, že widget přidáš do OBS a spustíš stream, nebo požádáš kamaráda, ať začne sledovat tvůj kanál. ## Použij widget na streamu Každý widget, který vytvoříš, se ukáže i v [Uložených widgetech](https://kickbot.com/dashboard/saved-widgets) s popiskem „Tvůj vlastní widget“ pod názvem. Jeho URL vždycky spouští tvůj nejnovější kód. 1. Na stránce Tvůrce widgetů klikni u svého widgetu na **Kopírovat URL**. 2. V OBS přidej zdroj **Browser** (prohlížeč), vlož URL a nastav šířku a výšku na velikost widgetu. 3. Klikni na **OK**. Když změníš kód, zatímco je widget v OBS, obnov zdroj prohlížeče, aby se načetl nový kód. Když v Uložených widgetech změníš hodnotu uživatelské proměnné a klikneš na **Uložit**, OBS widget načte znovu sám. Další pomoc najdeš v návodu [Jak přidat overlay KickBotu do OBS](https://kickbot.com/cs/docs/getting-started/add-browser-source-obs). > **Caution:** URL si nech pro sebe. Kdokoli ji má, může si tvůj widget pustit na své obrazovce. ## Zveřejni widget v Knihovně widgetů Widget zveřejni, když chceš, aby ho ostatní streameři našli a nainstalovali. 1. V editoru otevři **Viditelnost** a klikni na **Zveřejnit widget**. 2. Přidej **Hlavní obrázek** a aspoň jeden další obrázek. Celkem můžeš přidat až 10 obrázků, každý do 10 MB. Nejlépe funguje 1920 × 1080. 3. Napiš **Popis**: co widget ukazuje a jak ho nastavit. 4. Odešli ho. Okno ukáže **Odesláno ke kontrole**. Tým KickBotu každý widget zkontroluje. Když ho schválí, objeví se v Knihovně widgetů s tvým jménem na Kicku jako autorem. Kontrola obvykle trvá méně než 24 hodin. > **Caution:** Widget můžeš zveřejnit jen jednou. Potom editor ukazuje „Tento widget je zveřejněný. Pokud ho chceš změnit, kontaktuj podporu.“ Před zveřejněním widget pořádně otestuj. ## Smaž widget Na stránce Tvůrce widgetů otevři u widgetu nabídku **⋯** a klikni na **Smazat**. Tím smažeš jeho kód i nastavení a nejde to vrátit. ## Členové týmu Členové týmu potřebují oprávnění **Tvůrce widgetů**, aby mohli otevřít editor a vytvářet widgety. URL widgetů uvidí jen s oprávněním **Nastavení widgetů**. Viz [Správa týmu](https://kickbot.com/cs/docs/account/team). ## Časté dotazy **Musím umět programovat?** Ano, aspoň trochu HTML, CSS a JavaScript. Pokud neprogramuješ, nainstaluj si widget z [Knihovny widgetů](https://kickbot.com/cs/docs/widgets/widget-library) a změň jeho nastavení. **Můžu upravit widget KickBotu z knihovny?** Kód widgetu z knihovny změnit nejde. Založ nový widget ze šablony **Viewer Count**, **Simple Follower Goal** nebo **Basic Chat Widget** a dostaneš kopii jejího kódu, kterou můžeš měnit. **Může můj widget načítat fonty, obrázky nebo další skripty?** Ano. Tvoje HTML, CSS a JavaScript běží v OBS v normální webové stránce, takže můžeš odkazovat na webové fonty, obrázky a skripty z jiných webů. Pomocí uživatelských proměnných **Obrázek/GIF**, **Video** nebo **Zvuk** můžou streameři nahrát vlastní soubory. **Můžu vytvářet widgety přes API KickBotu?** Ano. API KickBotu umí tvoje widgety vypsat, vytvořit a upravit. Viz [Reference API pro widgety](https://kickbot.com/docs/api/reference/widgets).