Jak vložit rezervační widget na web: návod pro WordPress, Webnode i Wix

Rezervační formulář Tabloy (widget) dostanete k hostům několika způsoby: přímo do stránky na vašem webu, jako tlačítko s odkazem, do profilu na Googlu a sociálních sítích nebo jako QR kód na stůl. Ukážeme, co který způsob umí, jak ho krok za krokem nastavit a na co si dát pozor. Programovat nemusíte, kód jen zkopírujete a vložíte.

Pokud teprve zvažujete, jestli online rezervace na web vůbec chcete, začněte článkem Jak přidat online rezervace stolů na web restaurace.

Jaké způsoby vložení podporujeme

Všechny způsoby vedou na stejný formulář a rezervace se sejdou na jednom místě v administraci. Klidně je kombinujte.

Než začnete: připravte si widget

Widgety najdete v administraci v menu Widgety. Pokud tam ještě žádný nemáte, vytvoříte ho tlačítkem „Nový widget“. U každého widgetu nastavíte:

• typ: „Formulář“, ve kterém host vybere den, čas a počet osob, nebo „Mapa stolů“, kde si vybere i konkrétní stůl na plánku podniku,
• vzhled: barvy, písmo, logo a uvítací text, aby formulář ladil s vaším webem,
• jazyk: čeština, angličtina, nebo automaticky podle prohlížeče hosta.

Když později změníte barvy nebo texty, projeví se to všude, kde widget máte. Kód nemusíte vkládat znovu.

Způsob 1: Formulář přímo na webu

Formulář se do stránky vkládá jako takzvaný iframe, tedy okno, ve kterém se zobrazuje rezervační formulář z Tabloy. Host zůstává na vašem webu a vy nic neinstalujete.

1. V administraci otevřete Widgety a u widgetu klikněte na Vložit na web.
2. U pole „Kód pro vložení“ klikněte na Kopírovat.
3. Kód vložte na stránku webu, kde má formulář být. Jak na to v jednotlivých editorech, popisujeme níže.
4. Stránku uložte a zveřejněte. Pak si na ní zkušebně zarezervujte stůl a ověřte, že vám přišla notifikace a hostovi potvrzení.

Zkopírovaný kód vypadá zhruba takto, jen místo VAS-KOD v něm bude kód vašeho widgetu:

<iframe src="https://tabloy.cz/w/VAS-KOD" width="100%" height="700" frameborder="0" style="border:none;border-radius:8px;"></iframe>

• src je adresa vašeho formuláře, tu neměňte,
• width="100%" roztáhne formulář na šířku sloupce, do kterého ho vložíte,
• height je výška formuláře v pixelech.

Tip k výšce: při výchozích 700 pixelech si host spodní část formuláře posune uvnitř okna. Celý formulář je na počítači vysoký zhruba 1 050 pixelů, takže pokud ho chcete mít bez posuvníku, přepište v kódu height="700" na height="1050". Na mobilu je formulář delší, protože se kalendář a časy řadí pod sebe, a uvnitř okna se posouvá vždy.

Kód přidá pod formulář i drobný odkaz „Rezervační systém Tabloy“, kterým nám pomůžete, aby nás našly další podniky. S tarifem Pro nebo Business ho můžete před kopírováním kódu odškrtnout.

WordPress

1. Otevřete stránku, kam chcete formulář vložit, a klikněte na + (Přidat blok).
2. Vyhledejte blok Vlastní HTML a přidejte ho.
3. Klikněte na Upravit kód, vložte kód a potvrďte tlačítkem Aktualizovat. Ve starších verzích WordPressu je pole pro kód rovnou v bloku.
4. Stránku uložte tlačítkem Publikovat, případně Aktualizovat.

Máte web postavený v Elementoru? Přetáhněte na stránku prvek HTML a kód vložte do jeho pole pro HTML kód.

Webnode

V editoru najeďte myší na sekci, kam chcete formulář vložit, přidejte obsah typu HTML, vložte kód a web zveřejněte. Webnode vložený kód v editoru nezobrazuje, formulář uvidíte až na zveřejněném webu. U novějších webů je vkládání HTML součástí placených balíčků Webnode. Pokud máte Webnode zdarma, použijte tlačítko s odkazem (způsob 2).

Wix

Přes tlačítko + přidejte prvek pro vložení HTML kódu (najdete ho v části pro vkládání kódu), zvolte možnost Kód a vložte kód. Rámeček prvku pak roztáhněte na šířku obsahu a na výšku, kterou máte v kódu. Místo kódu můžete u prvku zvolit i adresu webu a vložit do ní přímý odkaz na formulář.

Jiný editor nebo web od agentury

Téměř každý editor webů má prvek pro vložení HTML kódu, obvykle se jmenuje „HTML“, „Vložit kód“ nebo „Embed“. Pokud vám web spravuje agentura nebo programátor, pošlete mu kód z administrace, vložení zabere pár minut.

Způsob 2: Tlačítko „Rezervovat stůl“ s odkazem

Nejjednodušší cesta, která funguje v každém editoru webů. Na kartě Vložit na web zkopírujte Přímý odkaz a nastavte ho jako odkaz tlačítka nebo položky menu. Po kliknutí se formulář otevře na celé obrazovce, což se hodí hlavně na mobilu.

Pokud tlačítko vkládáte jako kód, stačí třeba tohle:

<a href="https://tabloy.cz/w/VAS-KOD" target="_blank" rel="noopener">Rezervovat stůl</a>

Tlačítko dejte do hlavičky nebo menu, aby bylo vidět na každé stránce. Formulář vložený na stránce a tlačítko v menu se nevylučují, naopak se doplňují.

Způsob 3: Google, Facebook, Instagram a TripAdvisor

Hodně hostů váš web vůbec neotevře, najdou vás v Mapách Google nebo na Instagramu. Pro ně jsou připravené odkazy na kartě Sdílet odkaz (tlačítko Sdílet u widgetu). Každý odkaz je označený zdrojem, takže v Přehledu v administraci uvidíte, odkud vám rezervace chodí.

• Google: na business.google.com otevřete svůj profil, zvolte Upravit profil, kartu Více a v sekci Rezervace vložte odkaz. Tlačítko „Rezervovat“ se v Mapách Google objeví obvykle během několika hodin.
• Facebook: na stránce podniku klikněte na Přidat tlačítko, zvolte Rezervovat a Použít odkaz.
• Instagram: v aplikaci otevřete Upravit profil → Odkazy → Přidat externí odkaz. Stejný odkaz použijte i v nálepce „Odkaz“ v příbězích.
• TripAdvisor: v sekci pro majitele (TripAdvisor Owners) otevřete správu výpisu a odkaz vložte k rezervacím.

Podrobný postup najdete i v administraci pod každým odkazem („Návod, jak odkaz použít“).

Způsob 4: QR kód na stůl a jídelní lístek

Na kartě Sdílet odkaz si stáhněte QR kód jako obrázek PNG a vytiskněte ho na stůl, jídelní lístek, účtenku nebo do výlohy. Host ho naskenuje telefonem a rovnou si zarezervuje další návštěvu. Hotové stojánky na stůl ve formátu A6 a obrázky pro Instagram najdete v administraci v sekci QR materiály, stačí je vytisknout.

Na co si dát pozor

• Výsledek kontrolujte na zveřejněné stránce. Náhledy v editorech webů vložený kód často nezobrazí nebo ho zobrazí jinak.
• Kód vkládejte do HTML prvku, ne do textu. Pokud na stránce místo formuláře vidíte text začínající <iframe, je kód v obyčejném textovém bloku.
• Widget musí být aktivní. Deaktivovaný widget hostům místo formuláře ukáže hlášku, že není aktivní.
• Jeden widget můžete mít na více místech. Stejný kód klidně vložte na úvodní stránku i na stránku Kontakt.
• Značka Tabloy ve formuláři. Na tarifu Free je ve formuláři odznak „Rezervace přes Tabloy“. V placených tarifech zmizí a od tarifu Pro je formulář úplně bez značky Tabloy. Podrobnosti najdete v ceníku.