Widget Webookeru je chytrý kousek kódu, který zobrazí Webooker přímo uvnitř vašeho webu – vaši klienti tak vidí kurzy, ceny, lektory, fotogalerie atd. přímo na vašich stránkách a do Webookeru se přenesou až ve chvíli, kdy kliknou na tlačítko „Přihlásit se“.

Jak propojit Widgety z Webookeru s vaším webem

Webooker už vaše data o kurzech má – popisy, ceny, lektory, termíny.
Pomocí widgetů je jen „vytáhnete“ na svůj web.

Výsledek:

• upravíte kurz ve Webookeru → okamžitě se změní i na webu

• žádné kopírování, žádné chyby, žádné zastaralé údaje

Jak to celé funguje (princip)

Webooker vygeneruje malý HTML kód (widget).
Ten vložíte na svůj web – a Webooker do něj automaticky pošle aktuální data.

Webooker → Widget → Váš web → Klienti

Krok za krokem

1. Nastavte cílovou webovou stránku ve Webookeru

Ve Webookeru jděte:

Systém → Nastavení → Widgety

Zde nastavíte:

Adresu webu, kam se widgety budou vkládat
např.: www.mojaskola.cz


Tohle je důležité kvůli bezpečnosti – Webooker ví, odkud se může načítat. Pokud budete mít webových stránek více, zadáte každou další na nový řádek

2. Vložte na web základní Webooker widget

Na váš web (do hlavičky nebo patičky) vložte základní widget. 
Najdete ho zde:

Systém → Nastavení → Widgety → Základní widget

Bez tohoto kroku žádný další widget nebude fungovat.

3. Vyberte konkrétní widget (kurzy, semestr, rozvrh…)

Ve stejné sekci najdete ukázkové widgety, a jejich paremetry např.:

• seznam kurzů

• popis kurzu

• fotogalerie

• lektora

• místo

• počet lekcí

• registrační tlačítko

• atd.

U každého:

• je hotový HTML kód

• můžete ho rovnou zkopírovat, případně upravit dle zobrazených parametrů.

Nastavení ID kurzu nebo ID semestru

V některých Widgetech se musí nastavit ID semestru nebo ID kurzu aby Webooker věděl, jaká data má zobrazit.

Kde ve Webookeru ID najdete:

• otevřete detail kurzu nebo detail semestru

• ID je v záložce nastavení

4. Vložte widget do svého webu

Teď už jen:

• otevřete stránku na webu (např. nabídka Kurzů)

• do HTML vložíte widget kód (např. pro nabídku kurzů)

náhled jak vypadá zobrazení kurzů pomocí karet. V ukázkových Widgetech v nastavení systému je jak možnost mít seznam, tak i takovéto dlaždice. Grafiku si můžete na vašem webu upravit dle potřeby.

⚙️ Jak fungují parametry widgetů

U každého widgetu je v nastavení tabulka parametrů.
Ty určují, co se má ve widgetu zobrazit a jak se má chovat (např. cena, tlačítko Přihlásit, popis apod.).

? Povinný parametr

Pokud je parametr označen jako povinný, musí být ve widgetu uveden, jinak nebude fungovat.

? Výchozí hodnota = true

Pokud je u parametru uvedeno true, znamená to, že je automaticky zapnutý – ve widgetu už je.

Nic není potřeba řešit.

? Jak něco skrýt

Pokud nechcete, aby se nějaká část zobrazovala, stačí ji ve widgetu přepsat na:

data-nazev-parametru="false"

Např.:

data-show-price="false"

Tím říkáte: „toto nechci zobrazovat“.

⚙️ Jak propojit detail kurzu se seznamem všech kurzů

Krok 1: Seznam kurzů na hlavní stránce

Na stránce se seznamem kurzů použijete widget `courses` s parametrem `data-detail-url`, který odkazuje na vaši stránku s detailem:

<div class="webooker-widget"

     data-widget="courses"

     data-semester-id="123"

     data-detail-url="/detail-kurzu">

</div>

Krok 2: Kliknutí na kurz

Když návštěvník klikne na kurz v seznamu, widget ho automaticky přesměruje na stránku detailu a přidá do adresy ID kurzu.

/detail-kurzu?wb_courseId=456

 Krok 3: Stránka s detailem kurzu

Na stránce detailu umístíte widgety (popis, obrázky, lektoři, cena atd.) **bez nutnosti zadávat ID kurzu** – widgety si ho samy přečtou z adresy:

<div class="webooker-widget" data-widget="course-detail-description"></div>

<div class="webooker-widget" data-widget="course-detail-images"></div>

<div class="webooker-widget" data-widget="course-detail-pricing"></div>

Shrnutí: 

Stačí vytvořit jednu stránku pro detail všech kurzů. Widget seznamu kurzů se postará o správné přesměrování s ID kurzu v adrese, a widgety na stránce detailu si ID automaticky načtou.

⚠ Nejčastější chyby