Po dokončení tohoto návodu budete mít rezervační widget živý na svém vlastním webu — host vybírá data, vyplní formulář, vy dostáváte rezervaci. Žádné přesměrování na portál.
Co budete potřebovat
- Nemovitost v sekci Vaše nastavení → Místa (nebo službu v Služby)
- Editorský přístup k vašemu webu (nebo vývojáře, který ho má)
- ~5 minut
- Funkční widget viditelný na vašem webu
- Hosté si mohou vybrat data a poslat rezervaci
- Volbu mezi dvěma typy vložení (skript nebo iframe), s tím správným pro váš případ
Krok 1: Otevřete detail widgetu
První widget se vytvoří automaticky během průvodce nastavením. Otevření:
V postranní nabídce → klikněte na nemovitost v Místech → Widgety → klikněte na widget v seznamu.
Uvidíte sekce Název a jazyk, Typ a styl, Náhled, Vložený kód a Rezervační dialog.
Sekce Vložený kód se objeví, až když je widget aspoň jednou uložený. Pokud ji nevidíte, klikněte na Uložit widget nahoře.
Krok 2: Zvolte typ vložení
Cabintale nabízí dvě varianty. Funkčně jsou rovnocenné — vyberte tu, která vám sedne na váš web.
Založený na skriptu (doporučeno pro většinu webů)
<cabintale-root data-place="[token-místa]" data-token="[token-widgetu]"></cabintale-root>
<script src="https://admin.cabintale.com/widget-embed.js" async></script>Co dělá:
- Používá vlastní HTML element (
<cabintale-root>) plus malý JS loader. - Automaticky se zvětší podle kalendáře — žádná pevná výška.
- Rezervační dialog se otevírá jako celoobrazovkové překrytí na rodičovské stránce (skvěle vypadá na mobilu).
Použití: WordPress, čisté HTML weby, Squarespace, Webflow, vlastní CMS — kdekoli, kam můžete vložit dva řádky HTML.
Iframe (jednodušší, konzervativnější)
<iframe
src="https://admin.cabintale.com/widget/[token-widgetu]"
width="100%"
height="450"
frameborder="0"
style="border: none;"
scrolling="no">
</iframe>Co dělá:
- Vykreslí celý widget uvnitř iframe s pevnou velikostí.
- Nezávisí na tom, jestli rodičovský web povoluje vlastní skripty.
- Rezervační dialog se otevírá uvnitř iframe (takže ho omezuje výška iframe).
Použití: stavitele webů, kteří blokují externí skripty, intranety s přísným CSP nebo kdekoli, kde „prostě iframe" je nejjednodušší cesta.
Výchozí výšky iframe jsou pevné (450 px pro místa, 550 px pro služby). Atribut height můžete upravit, pokud to váš design potřebuje.
Krok 3: Zkopírujte kód
Přepněte se na zvolenou variantu, klikněte na Kopírovat kód skriptu (nebo Kopírovat kód iframe) — tlačítko krátce potvrdí, že je zkopírováno.
Krok 4: Vložte na web
Kam vložit:
| Platforma | Kde |
|---|---|
| WordPress | Editovat stránku → přidat blok Vlastní HTML → vložit |
| Squarespace | Přidat Code blok → vložit |
| Wix | Embed → HTML iframe (použijte iframe variantu) |
| Webflow | Přidat komponentu Embed → vložit |
| Čisté HTML | Kamkoli uvnitř <body> |
Stránku uložte a publikujte. Otevřete ji — widget by se měl vykreslit tam, kde jste vložili kód.
Krok 5: Otestujte rezervaci
Klikněte na widget jako host. Vyberte datum, vyplňte formulář, odešlete. Zkontrolujte, že:
- Rezervace se objeví v Rezervacích v adminu.
- Dostanete e-mail majiteli (pokud jsou e-mailová oznámení zapnutá).
Pokud máte nemovitost v režimu Rezervace na žádost, rezervace zůstane čekající, dokud ji nepotvrdíte (viz Okamžitá vs. žádaná rezervace).
Co host vidí
- Kalendář s 1, 2 nebo 3 viditelnými měsíci (nastavitelné v look & feel).
- Volné dny jsou klikatelné; rezervované nebo nulové ceny jsou zablokované.
- Po výběru dat se otevře rezervační dialog s nastavitelným formulářem (viz Vlastní rezervační formulář).
- Po odeslání host vidí potvrzovací zprávu — jiné znění pro režim okamžité vs. žádané.
URL widgetu je veřejná, ale neuhodnutelná (UUID token). Funguje i samostatně — vložte ji do prohlížeče a dostanete stejný widget. Užitečné, když chcete poslat odkaz na rezervaci e-mailem.
Řešení problémů
| Příznak | Příčina | Řešení |
|---|---|---|
| Widget se vůbec nevykresluje | Nemovitost nebo widget je Neaktivní | Otevřete nemovitost a widget; oba musí být Aktivní |
| Sekce Vložený kód je prázdná | Widget zatím není uložený | Klikněte na Uložit widget nahoře v detailu |
| Iframe je moc krátký — rezervační dialog se ořízne | Výchozí 450/550 px nestačí na délku formuláře | Zvyšte atribut height, nebo přepněte na skriptové vložení (mění výšku samo) |
| Tlačítko Kopírovat nereaguje | Některé prohlížeče blokují přístup ke schránce na nezabezpečených stránkách | Použijte HTTPS, nebo text kódu označte ručně a zkopírujte přes Ctrl+C / Cmd+C |
| Widget ukazuje špatný jazyk | Jazyk widgetu je nastavený jinak | Otevřete detail widgetu a změňte Jazyk widgetu (viz Jazyky a měny) |
| Skriptové vložení hlásí v konzoli prohlížeče chybu CSP | Váš web má přísnou Content Security Policy | Povolte https://admin.cabintale.com pro script-src a connect-src, nebo přepněte na iframe |
Související návody
- Více variant widgetu — Více variant widgetu
- Vzhled a styl (motiv, barvy, rozvržení) — Vzhled a styl widgetu
- Vlastní rezervační formulář — Vlastní rezervační formulář
- Kalendář časových slotů (pro služby) — Kalendář časových slotů (Widget služby)