Než vložíte formulář do Vašeho webu, doporučujeme si jej nejprve vyzkoušet na demo stránce dostupné z recepčního systému.
V recepčním systému si také vygenerujete kód pro vložení do webu. Pokud nemáte přístupy, vygeneruje Vám kód majitel či manažer licence systému.
Integrace formuláře
Data parametry jsou způsob, jakým se dá nastavit IBE formulář přímo v markupu HTML kódu. Jediným povinným data atributem je data-id, který nám říká, k jaké licenci IBE připojujeme. Minimální zápis tedy vypadá zhruba takto: <div id="mevris-booking-engine" data-id="kod"></div>
Ve skutečnosti je ale možné využít i následující parametry. Většinu z nich lze také použít jako URL zápis. Toto se využívá pro případy, kdy chcete směřovat na IBE formulář odkazem, s nějakým nastavením - např. datum, počet osob, předvybraný pokoj apod. Upozornění: data-parametry a url-parametry si nemusí vzájemně semanticky odpovídat (tj. mohou mít různý název/zápis). Také neplatí, že pro každý data parametr existuje URL ekvivalent. Pro dostupné data parametry uvádíme také ekvivalentní URL zápis pomocí query.
Jednotlivá nastavení (žádné není povinné):
data-id
ID licence klienta, toto ID lze nalézt v BH pod Nastavení -> Nastavení online prodeje -> zde je k dispozici náhled kódu pro vložení formuláře do webu, jehož součástí je licenční klíč
- datový typ - STRING
- povinný parametr
- příklad: data-id="66b375b08fc869632935c9e6a9c7f8da"
- URL: &key=66b375b08fc869632935c9e6a9c7f8da
- verze IBE: 1+
data-package
ID balíčku, který se má vyhradit pro balíčkový prodej. Toto nastavení se typicky používá, pokud je formulář součástí stránky s jediným konkrétním balíčkem.
- datový typ - INTEGER
- nepovinný parametr
- příklad: data-package="171"
- URL: &packageID=171
- verze IBE: 1+
data-arrival-date
Datum ve formátu YYYY-MM-DD, které se použije pro přednastavení formuláře na konkrétní datum příjezdu. Ověřujeme platnost data.
- datový typ - STRING ve formátu YYYY-MM-DD
- nepovinný parametr
- default: dnes
- příklad: data-arrival-date="2024-01-30"
- URL: &arrival=2024-01-30
- verze IBE: 1+
data-departure-date
Datum ve formátu YYYY-MM-DD, které se použije pro přednastavení formuláře na konkrétní datum odjezdu. Ověřujeme platnost data.
- datový typ - STRING ve formátu YYYY-MM-DD
- nepovinný parametr
- default: dnes + 1den
- příklad: data-arrival-date="2024-01-30"
- URL: &departure=2024-01-30
- verze IBE: 1+
data-roomtype
ID roomtypu, který se má vyhradit pro prodej. Toto nastavení se typicky používá, pokud je formulář součástí stránky s jediným konkrétním roomtypem/pokojem.
- datový typ - INTEGER
- nepovinný parametr
- příklad: data-package="171"
- URL: &roomtypeID=171
- verze IBE: 1+
data-disable-first-step
Umožňuje přeskočit první krok (výběr data a RT). Zároveň musí být aktivován data parametr data-roomtype. Toto se typicky používá, pokud chcete uživateli předvybrat pokoj i datum po kliknutí na tlačítko Rezervovat, případně pokud zobrazujete IBE v modálním dialogu a výběr data a pokoje si řešíte u vás na webu.
- datový typ - BOOLEAN
- nepovinný parametr
- default: false
- příklad: data-disable-first-step="true"
- URL: &disable_first_step=true
- verze IBE: 1+
data-persons
Počet osob, který se použije pro přednastavení počtu osob. Zohledňuje pouze celkový počet osob bráno jako dospělých. Resp. defaultního typu osob (záleží na nastavení v BH, typicky jde o dospělé). Nastavit kategorie jednotlivě (aka děti a dospělé zvlášť) nyní nelze.
- datový typ - INTEGER
- nepovinný parametr
- default: 2
- příklad: data-persons="3"
- URL: &persons=3
- verze IBE: 1+
data-color
Primární barva formuláře. Kód HEXa barvy bez #, kterým lze měnit primární CTA barvu formluáře (tj. CTA tlačítka, texty apod.)
- datový typ - STRING ve formátu HEX
- nepovinný parametr
- default: 25A37D
- příklad: data-color="#000000"
- URL: &color=000000
- verze IBE: 1+
data-source
Zdrojový kód (příklad 123456789)
- datový typ - INT
- nepovinný parametr
- příklad: data-source="123456789"
- URL: &source=123456789
- verze IBE: 1+
data-variation
ID varianty prodeje v BH. Typicky se používá pro vytvoření více formulářů s variantami prodeje.
- datový typ - INT
- nepovinný parametr
- příklad: data-source="1"
- URL: &variation=1
- verze IBE: 1+
data-z-index
CSS zápis pro z-index kontejneru, ve kterém je nahrán IBE formulář tj. ten s ID mevris-booking-engine. Tento parametr řeší hloubku v rámci webu. Tj. jestli formulář bude překryt jiným objektem anebo naopak. Je nutné si uvědomit, že z-index má svá specifika (například nefunguje, pokud nejsou interagující elementy v jedné úrovni hierarchie webu). Pro více informací je doporučeno svěřit toto nastavení webmasterům.
- datový typ - INT
- nepovinný parametr
- default: 1000001
- příklad: data-z-index="1000"
- verze IBE: 1+
data-frame-border
Tímto lze nastavit, zda-li se má zobrazovat kolem iframu s formulářem rámeček. V nových prohlížečích je toto obsolentní, protože standardně se dnes již s rámečkem nepočítá.
- datový typ - INT
- nepovinný parametr
- default: 0
- příklad: data-frame-border="1"
- verze IBE: 1+
data-lang
Tímto lze nastavit výchozí jazykovou mutaci formuláře. Zadává se jako kód v ISO 639-1 specifikaci. Je nutné si uvědomit, že pokud nebude požadovaný jazyk k dispozici, použije se jako náhradní jazyk angličtina.
- datový typ - STRING ve specifikaci ISO 693-1
- nepovinný parametr
- default: cs
- příklad: data-lang="en"
- URL: &lang=en
- verze IBE: 1+
data-currency
Tímto lze nastavit výchozí měnu formuláře. Zadává se jako kód v ISO 4217 specifikaci. Je nutné si uvědomit, že pokud nebude požadovaná měna k dispozici, předvybere se první vhodná měna.
- datový typ - STRING ve specifikaci ISO 4217
- nepovinný parametr
- default: CZK
- příklad: data-currency="EUR"
- URL: ¤cy=EUR
- verze IBE: 1+
data-pribg
Primární barva pozadí formuláře. Kód HEXa barvy bez #, kterým lze měnit primární barvu podkladu.
- datový typ - STRING ve formátu HEX
- nepovinný parametr
- default: 25A37D
- příklad: data-pribg="#000000"
- URL: &pribg=000000
- verze IBE: 1+
data-package-only
Toto nastavení umožní zobrazit pouze balíčkový prodej. Nabídka Ubytování nebude součástí formuláře.
- datový typ - BOOLEAN
- nepovinný parametr
- default: false
- příklad: data-package-only="true"
- URL: &packageOnly=1
- verze IBE: 1+
data-height
Preferovaná výška formuláře. Formulář si svou výšku nastavuje automaticky s ohledem na aktuální stav tak, aby klient nebyl obtěžován více scrollbary než je nutné. Toto nastavení toto chování vypne a formulář bude striktně dodržovat zadanou výšku v pixelech.
- datový typ - INT (vyjadřující výšku v px)
- nepovinný parametr
- default: auto
- příklad: data-height="1000"
- verze IBE: 1+
data-force-mobile
Toto nastavení vypíná defaultní chování formuláře pro mobilní zařízení, kdy dojde ke směrování k nám na adresu. Toto vypadá v mobilu zpravidla lépe, než úzký formulář v rámci iframu mobilního webu. Je potřeba si uvědomit, že v případě mobilních zařízení je obrovský rozptyl zobrazení a výsledek nemusí být při vypnutí směrování k nám vždy optimální. Proto doporučujeme ponechat výchozí nastavení, kdy se rezervační formulář zobrazuje jako nová stránka (u nás).
- datový typ - BOOLEAN
- nepovinný parametr
- default: true
- příklad: data-force-mobile="false"
- URL: &forceMobile=true
- verze IBE: 1+
data-add-gtag
Toto nastavení je z historických důvodů a zpětné kompatibility pojmenováno jako add-gtag, i když se dnes ve skutečnosti očekává kód pro GTM klienta. Pro zapojení a nastavení analytiky doporučujeme další manuál, případně využít služeb externí firmy.
- datový typ - STRING (API key pro GTM klienta)
- nepovinný parametr
- příklad: data-add-gtag="GTM-0AAA00"
- URL: >m_code=GTM-0AAA00
- verze IBE: 1+
data-facility
Toto nastavení zapíná/vypíná zobrazení výběru zařízení před pokračováním na rezervační formulář. Typicky se používá, pokud máte více než 1 zařízení, ale chcete mít pouze 1 formulář.
- datový typ - BOOLEAN
- nepovinný parametr
- příklad: data-facility="true"
- URL: &facilityFirst=true
- verze IBE: 2
data-vouchers
Toto nastavení zapíná/vypíná zobrazení karty Poukazy v rezervačním formuláři IBE.
- datový typ - BOOLEAN
- nepovinný parametr
- default: true
- příklad: data-vouchers="false"
- URL: &tabIve=false
- verze IBE: 2
data-room-filter
Toto nastavení zapíná/vypíná zobrazení možnosti výběru počtu pokojů v horním menu (vedle kalendáře, výberu počtu osob, kuponu apod).
- datový typ - BOOLEAN
- nepovinný parametr
- default: true
- příklad: data-room-filter="false"
- verze IBE: 2
data-version
Toto nastavení umožňuje přepínat mezi verzemi IBE formuláře. Doporučujeme využívat pouze nejnovější verze.
- datový typ - INTEGER
- nepovinný parametr
- default: 2
- příklad: data-version="1"
- verze IBE: 2
data-recommended-offer
Toto nastavení umožňuje zobrazit nebo skrýt nabídku doporučených kombinací k objednání.
- datový typ - BOOLEAN
- nepovinný parametr
- default: true
- příklad: data-recommended-offer="false"
- URL: &recOffer=false
- verze IBE: 2
data-tab-acc
Toto nastavení umožňuje zobrazit/skrýt záložku a celou sekci Ubytování na IBE.
- datový typ - BOOLEAN
- nepovinný parametr
- default: true
- příklad: data-tab-acc="false"
- URL: &tabAcc=false
- verze IBE: 2
data-tab-pkg
Toto nastavení umožňuje zobrazit/skrýt záložku a celou sekci Balíčky na IBE. Stále však může být proveden upsell balíčku v kroku 2, je-li toto nastaveno.
- datový typ - BOOLEAN
- nepovinný parametr
- default: true
- příklad: data-tab-pkg="false"
- URL: &tabPkg=false
- verze IBE: 2
data-nudge-topbar
Toto nastavení umožňuje zadat výšku odsazení v pixelech pro přilepenou lištu výběru data/osob v případě, že uživatel scrolluje. Typicky se to používá, pokud by váš toolbar na webu překrýval tuto posuvnou lištu. Zvýšením odsazení jí zpravidla zviditelníte. Doporučujeme nastavit výšku toolbaru vašeho webu + alespoň 10px. Je nutné mít nastaven správně parametr data-z-index.- datový typ - INTEGER
- nepovinný parametr
- příklad: data-nudge-topbar="90"
- verze IBE: 2
data-no-package
Schová a znedostupní veškeré balíčky (včetně případného upsellu).
- datový typ - BOOLEAN
- nepovinný parametr
- default: false
- příklad: data-no-package="true"
- URL: &noPackage=true
- verze IBE: 2
data-ive-only
Umožní a zobrazí pouze prodej voucherů.
- datový typ - BOOLEAN
- nepovinný parametr
- příklad: data-ive-only="true"
- URL: &iveOnly=true
- verze IBE: 2
data-margin-bottom
Někdy jsou struktury webů tak složité, že nelze pro všechny klientu univerzálně spočítat správnou výšku formuláře. Proto existuje 100px bezpečnostní zóna na dolním okraji formuláře. Pokud je to pro vás z nějakého důvodu moc anebo málo, je možné ji upravit v rozsahu hodnot 0 až nekončeno. Zadává se v pixelech.
- datový typ - INTEGER
- nepovinný parametr
- příklad: data-margin-bottom="0"
- verze IBE: 2
Tímto parametrem lze určit výchozí kartu na formuláři IBE. Tj. jestli se mají defaultně zobrazit balíčky nebo vouchery. Výchozí nastavení je ubytování.
- datový typ - STRING
- nepovinný parametr
- default: accomodation
- příklad: data-predestination="packages"
- URL: &predestionation=packages
- verze IBE: 2
data-nudge-footer
Určuje odsazení footeru ve spodní části formuláře v případě, kdy je rezervace zarezervována. Udává se v pixelech.
- datový typ - INTEGER
- nepovinný parametr
- příklad: data-nudge-footer="0"
- verze IBE: 2
data-food-label
Umožní zobrazit/skrýt názvy stravy během celého rezervačního procesu.
- datový typ - BOOLEAN
- nepovinný parametr
- defaut: true
- příklad: data-food-label="false"
- verze IBE: 2
data-tax-label
Umožní zobrazit/skrýt informaci o poplatcích během celého rezervačního procesu (typicky pobytová městský taxa).
- datový typ - BOOLEAN
- nepovinný parametr
- defaut: true
- příklad: data-tax-label="false"
- verze IBE: 2
data-preload
Tento parametr umožňoval načíst rezervaci z objektu JSON
- datový typ - JSON
- nyní nepodporovaný parametr
- verze IBE: 1
data-variation-packages
Obdoba data-variation pro balíčky
- datový typ - INTEGER
- nyní nepodporovaný parametr
- verze IBE: 1
data-secbg
Umožňovalo nastavit sekundární barvu IBE formuláře pro jeho určité prvky. Po redesignu 2. verze obsolentní.
- datový typ - STRING
- nyní nepodporovaný parametr
- verze IBE: 1
Příklad nastavení DIVu
<div id="mevris-booking-engine" data-color="f15c5d" data-id="66b375b08fc869632935c9e6a9c7f8da" data-arrival-date="2016-08-16" data-departure-date="2016-08-20" data-lang="en" data-persons="3" ></div>
UPOZORNĚNÍ:
Pokud je to technicky možné, nevkládajete iniciační <div id="mevris-booking-engine"> do webu pomocí iframu (typicky pomocí iframe widgetu elementoru, wix. apod).
Doporučujeme použít custom HTML widget či přímé vložení našeho iniciačního kódu do struktury webu, máte-li k němu přístup. Rezervační formulář se sám dohrává pomocí iframu do iniciačního divu. Iframe komunikuje s tímto divem a automaticky si nastavuje svou výšku případně scroll eventy. Pokud vložíte iniciační kód do iframu s odkazem na příslušnou stránku rezervačního formuláře na vašem webu, přestanou tyto funkce fungovat.
Konverzní a měřící kódy
Pro měření konverzí vložte příslušné Event Snippety daných akcí:
1. zobrazení rezervačního formuláře
TIP: Pro měření konverzních kódů doporučujeme zvážit možnost pokročilého měření prostřednictvím Google Tag Manageru. Více informací níže.
Výčet zástupných proměnných naleznete zde:
- {price} = celková cena rezervace
- {currency} = měna rezervace
- {persons} = celkový počet osob
- {arrival} = datum příjezdu ve formátu Y-m-d
- {departure} = datum odjezdu ve formátu Y-m-d
- {lang} = dvoupísmenový ISO kod použitého jazyka pro rezervaci
Pokročilé měření konverzí
Měření je realizováno pomocí na Google Tag Manageru. Z naší strany jsou následně odesílány předdefinované pushe do vrstvy dataLayer, které zasíláme automaticky (v případě připojeného GTM kódu) a které můžete odchytávat např. pro Google Analytics.
1. Aktivace - Při inicializaci svého rezervačního formuláře vložte následující data-atribut do HTML struktury vkládaného snippetu.
data-add-gtag="Your-GTM-kod"
2. Měření - Po samotné aktivaci začne systém automaticky odesílat všechny níže uvedené události do vašeho GTM se základním setem dat.
- Při načtení formuláře (event name v dataLayer: 'start')
- Při zadání termínu (event name v dataLayer: 'selectDate')
- Při vybrání produktů (event name v dataLayer: 'formSentStep1')
- Při upsale pobytového balíčku (event name v dataLayer: 'packageUpsale')
- Při selhání online platby (event name v dataLayer: 'paymentFail')
- Při dokončení rezervace (event name v dataLayer: 'finishBooking')
Pokud si přejete pro jednotlivé události upravit set dat, máte možnost do formulářů vložit kompletní výčet dat ve formátu JSON. Vždy máte možnost v takovémto objektu využít některé zástupné symboly jako {price},{arrival},{departure},{person}, {currency}, {language} atd.