Jak vložit rezervační widget na WordPress, Webflow nebo Wix

Vložení rezervačního widgetu na web zní jako práce pro programátora. Ve skutečnosti jde o dva řádky kódu, které zvládne kdokoli, kdo umí ve svém webu upravit stránku. Projdeme si to pro tři nejčastější systémy - a na konci i variantu, kdy vlastní web nemáte.

Kód, který budete potřebovat

Vlastní úryvek s vaším identifikátorem najdete po přihlášení v administraci na stránce Nastavení widgetu. Obecně vypadá takhle:

<script src="https://cdn.eazo.eu/widget/embed.js" defer></script>
<eazo-widget data-tenant="váš-identifikátor"></eazo-widget>

První řádek načte samotný widget, druhý určuje, kam se na stránce vykreslí. Klidně je vložte hned za sebe - widget se objeví přesně v tom místě, kam dáte značku <eazo-widget>.

Načítá se asynchronně, takže se nejdřív zobrazí váš web a teprve pak se na pozadí připraví rezervace. Rychlost stránky tím nijak netrpí.

WordPress

V editoru Gutenberg:

1. Otevřete stránku, kam widget patří (typicky Rezervace nebo Kontakt).
2. Přidejte blok Vlastní HTML.
3. Vložte oba řádky z administrace.
4. Uložte a podívejte se na stránku v náhledu - v editoru se widget nevykresluje, až na živé stránce.

Pokud používáte klasický editor, přepněte se na záložku Text (ne Vizuálně) a kód vložte tam. U Elementoru použijte prvek HTML, u Divi modul Code.

Plugin instalovat nemusíte a ani žádný nehledejte - widget je běžný HTML kód.

Webflow

1. V Designeru přetáhněte na stránku prvek Embed (v sekci Components).
2. Do okna vložte oba řádky.
3. Potvrďte a publikujte web - v Designeru uvidíte jen šedý zástupný obdélník, skutečný widget se objeví až na publikované stránce.

Prvek Embed má ve Webflow limit na velikost kódu, ale dva řádky se do něj vejdou s velkou rezervou.

Wix

1. V editoru zvolte Přidat → Vložit → Vložit HTML kód.
2. V dialogu vyberte možnost Kód (ne Adresa webu) a vložte oba řádky.
3. Rámeček na stránce roztáhněte tak, aby se do něj widget vešel - Wix vkládá HTML do prvku s pevnou velikostí, takže mu dejte spíš víc místa než míň.

Stejný postup platí pro Squarespace (blok Code) i pro Shoptet (HTML blok v editoru stránky).

Vlastní web nebo jiný systém

Kdekoli, kde můžete sáhnout do HTML šablony, vložte oba řádky na místo, kde má widget být - typicky před uzavírací značku </body> nebo přímo do obsahu stránky. Žádnou další knihovnu widget nepotřebuje a neovlivní styly zbytku webu: běží v izolovaném prostoru (Shadow DOM), takže se vaše CSS a widget navzájem nevidí.

Widget jen pro jednu službu

Máte samostatnou landing page pro jeden konkrétní zákrok? Klient nemusí službu znovu hledat v seznamu - dá se předvybrat:

<eazo-widget
  data-tenant="váš-identifikátor"
  data-service="identifikátor-služby"></eazo-widget>

Hotový kód pro každou službu najdete v administraci přímo na stránce dané služby. Pokud navíc nechcete, aby klient přešel na jinou službu, přidejte atribut data-lock-service - zmizí odkaz „Změnit“ i tlačítko zpět. Podrobnosti jsou v dokumentaci.

Nemáte web vůbec

Nevadí. Ke každému účtu patří veřejná rezervační stránka, kterou najdete v administraci pod Veřejný odkaz na rezervace. Je to plnohodnotná stránka s vaším nastavením widgetu - stačí ji nasdílet:

• v popisu profilu na Instagramu nebo Facebooku,
• v podpisu e-mailu,
• jako QR kód na vizitce nebo na dveřích provozovny,
• v odpovědi na dotaz „kdy máte volno?“.

Vlastní web si můžete pořídit později. Rezervace kvůli němu odkládat nemusíte.

Když se widget nezobrazí

Tři nejčastější příčiny:

1. Kód se vložil jako text. Zkontrolujte, že jste použili HTML blok, ne běžné textové pole - jinak se na stránce ukáže samotný kód.
2. Stránka není publikovaná. Ve Webflow i Wixu se vložené HTML v editoru nevykresluje. Podívejte se na živou stránku.
3. Chybí identifikátor. Atribut data-tenant musí obsahovat váš klíč z administrace, ne zástupný text z příkladu.

Pokud si nevíte rady, napište nám přes kontaktní formulář a pošlete odkaz na stránku - podíváme se na to.