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: &currency=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: &gtm_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
data-predestination

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

2. provedení rezervace
 
Event Snippet vygenerujete v Google Analytics (či jiném systému).
Jestliže potřebujete měřit konkrétní hodnotu konverzí a eventuálně další údaje, nastavte v systému, že po dokončení rezervace dojde k přesměrování  na stránku, kde toto měření konverzí probíhá (mimo proces online rezervace). Better Hotel Vám do URL pro přesměrování navíc může vložit konkrétní hodnoty z rezervace pomocí zástupných proměnných.
 
Příklad
 
Pokud by tedy např. bylo Vaše URL pro přesměrování https://vasedomena.cz/success, kdy na této adrese budete chtít sledovat třeba peněžní hodnotu vytvořené rezervace, stačí upravit url adresu takto: https://vasedomena.cz/success?res_price={price}&res_currency={currency} a vložit ji jako adresu pro přesměrování po dokončení rezervace do našeho systému. Better Hotel poté zástupné znaky v závorkách nahradí konkrétními daty z rezervace. Pakliže by tedy rezervace byla v hodnotě 100 EUR, Better Hotel upraví URL na https://vasedomena.cz/success?res_price=100&res_currency=EUR a přesměruje na ni.

 

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.