Ako umiestniť Booking engine lištu na webovú stránku

Booking Panel je fixná lišta v spodnej časti stránky, ktorá návštevníkom umožňuje rýchlo vyhľadať dostupnosť izieb a kúpiť darčekové poukazy. Obsahuje výber dátumov príchodu a odchodu, výber počtu osôb a detí, a tlačidlá pre rezerváciu aj darčekové poukazy. Inštalácia vyžaduje vloženie jedného riadku kódu na váš web.

Vzorový script: https://chamoisapartments.com/ 
<script src="https://chamoisapartments.com/vs/load-booking-pannel.js"
data-position="fixed"
data-position-side="bottom"
data-z-index="999999"
data-border-radius="30"
data-border-radius-button="30"
data-checkin-offset="1"
data-checkout-offset="4"
data-booking-url="https://chamoisapartments.com/booking/"
data-gift-url="https://chamoisapartments.com/darcekove-poukazy/"
data-base-url="https://chamoisapartments.com/"
data-after-scroll="100"
data-language="sk"
data-color-primary=" #51260c"
data-color-secondary="rgb(191, 168, 155)"
data-color-tertiary=" #dfc6b7"
data-color-background=" #fcf2ec"
data-font="'Montserrat', sans-serif"
data-box-shadow="0 0 0px 0 rgba(0, 0, 0, 0.00)" async=""></script>

Základná inštalácia

Krok 1: Pripravte si údaje

Pre inštaláciu budete potrebovať:

• Base URL - adresa vášho Ellipse systému (napr. https://grandhotel.ellipsecloud.com)
• Booking URL - adresa vášho rezervačného systému / booking engine
• Gift URL - adresa stránky s darčekovými poukazmi (voliteľné)

Krok 2: Skopírujte kód scriptu

Základný kód pre vloženie na web:

<script src="https://VASA-DOMENA.ellipsecloud.com/vs/load-booking-pannel.js"
  data-base-url="https://VASA-DOMENA.ellipsecloud.com"
  data-booking-url="https://VASA-DOMENA.ellipsecloud.com/booking/"
  data-gift-url="https://VASA-DOMENA.ellipsecloud.com/gift/">
</script>

Nahraďte VASA-DOMENA názvom vášho hotela v systéme Ellipse. Príklad pre hotel Grand:

<script src="https://grand.ellipsecloud.com/vs/load-booking-pannel.js"
  data-base-url="https://grand.ellipsecloud.com"
  data-booking-url="https://grand.ellipsecloud.com/booking/"
  data-gift-url="https://grand.ellipsecloud.com/gift/">
</script>

Krok 3: Vložte kód na váš web

Kód vložte do HTML vašej stránky pred uzatvárací tag </body>:

• WordPress - v administrácii prejdite do Vzhľad → Editor motívov → otvorte súbor footer.php a vložte kód pred </body>
• WordPress s pluginom - nainštalujte plugin "Insert Headers and Footers" (WPCode), v nastaveniach pluginu vložte kód do sekcie "Footer"
• Vlastný web (statický HTML) - otvorte hlavný HTML súbor vašej stránky a vložte kód pred </body>
• Google Tag Manager - vytvorte nový Tag typu "Custom HTML", vložte kód a nastavte spúšťač na "All Pages"
• Šablónový systém (Joomla, Drupal, Wix...) - hľadajte v nastaveniach sekciu na vkladanie vlastného kódu do pätičky stránky

Krok 4: Overte funkčnosť

Po uložení zmien otvorte váš web v prehliadači. V spodnej časti stránky by sa mala objaviť booking lišta s výberom dátumov, tlačidlom "Overiť dostupnosť" a tlačidlom "Kúpiť darček".

Povinné nastavenia

Tieto atribúty musíte vždy vyplniť, aby panel fungoval správne:

• data-base-url - základná URL adresa vášho Ellipse systému (napr. https://grand.ellipsecloud.com). Používa sa na načítanie CSS a ďalších zdrojov
• data-booking-url - URL adresa rezervačného systému, kam bude používateľ presmerovaný po výbere dátumov a osôb

Voliteľné nastavenia

Všetky nasledujúce nastavenia sú voliteľné. Ak ich nezadáte, použijú sa predvolené hodnoty.

Vzhľad a pozícia

• data-position - typ pozície panela: fixed (predvolené) alebo sticky. Fixed znamená, že panel je vždy viditeľný v spodnej časti obrazovky. Sticky znamená, že panel sa posúva s obsahom stránky
• data-position-side - umiestnenie: bottom (predvolené) alebo top
• data-z-index - z-index panela (predvolené: 999999). Zvýšte, ak panel prekrývajú iné prvky stránky
• data-border-radius - zaoblenie rohov tlačidiel a prvkov v pixeloch (predvolené: 8)

Farby

• data-color-primary - hlavná farba textu a tlačidiel (predvolené: #1a0c52)
• data-color-secondary - sekundárna farba, napr. pre hover efekty (predvolené: #ffcc00)
• data-color-tertiary - farba pozadí pre jemné zvýraznenia (predvolené: #dddae8)
• data-color-background - farba pozadia panela (predvolené: #ffffff)
• data-font - font panela (predvolené: systémový font)

Dátumy

• data-checkin-offset - o koľko dní od dnes bude predvolený dátum príchodu (predvolené: 0, t.j. dnes)
• data-checkout-offset - o koľko dní po príchode bude predvolený dátum odchodu (predvolené: 1, t.j. zajtra)

Jazyk

• data-language - jazyk panela. Podporované hodnoty: sk (predvolené), cs, en, de, pl, hu, es, fr

Darčekové poukazy

• data-gift-url - URL adresa stránky s darčekovými poukazmi (ak nezadáte, tlačidlo "Kúpiť darček" nebude fungovať)
• data-gift-url-sk, data-gift-url-en, data-gift-url-de, ... - jazykovo špecifické URL pre poukazy. Ak existuje URL pre aktuálny jazyk, použije sa namiesto všeobecnej data-gift-url

Scroll správanie

• data-after-scroll - panel sa zobrazí až po scrollnutí o zadaný počet pixelov (predvolené: 0, t.j. ihneď). Napríklad hodnota 300 znamená, že panel sa zobrazí až keď používateľ scrollne 300px nadol
• data-hide-from-bottom - panel sa skryje keď sa používateľ priblíži ku koncu stránky o zadaný počet pixelov (predvolené: 0, t.j. nikdy sa neskryje). Užitočné ak nechcete, aby panel prekrýval pätičku webu

Príklady použitia

Základný panel v slovenčine

<script src="https://grand.ellipsecloud.com/vs/load-booking-pannel.js"
  data-base-url="https://grand.ellipsecloud.com"
  data-booking-url="https://grand.ellipsecloud.com/booking/"
  data-gift-url="https://grand.ellipsecloud.com/gift/">
</script>

Panel v angličtine s vlastnými farbami

<script src="https://grand.ellipsecloud.com/vs/load-booking-pannel.js"
  data-base-url="https://grand.ellipsecloud.com"
  data-booking-url="https://grand.ellipsecloud.com/booking/"
  data-gift-url="https://grand.ellipsecloud.com/gift/"
  data-language="en"
  data-color-primary="#2c3e50"
  data-color-secondary="#e74c3c"
  data-color-tertiary="#ecf0f1">
</script>

Panel so zobrazením po scrollnutí a skrytím pred pätičkou

<script src="https://grand.ellipsecloud.com/vs/load-booking-pannel.js"
  data-base-url="https://grand.ellipsecloud.com"
  data-booking-url="https://grand.ellipsecloud.com/booking/"
  data-gift-url="https://grand.ellipsecloud.com/gift/"
  data-after-scroll="400"
  data-hide-from-bottom="300">
</script>

Panel s predvoleným dátumom príchodu o 7 dní a pobytom na 3 noci

<script src="https://grand.ellipsecloud.com/vs/load-booking-pannel.js"
  data-base-url="https://grand.ellipsecloud.com"
  data-booking-url="https://grand.ellipsecloud.com/booking/"
  data-gift-url="https://grand.ellipsecloud.com/gift/"
  data-checkin-offset="7"
  data-checkout-offset="3">
</script>

Viacjazyčné darčekové poukazy

<script src="https://grand.ellipsecloud.com/vs/load-booking-pannel.js"
  data-base-url="https://grand.ellipsecloud.com"
  data-booking-url="https://grand.ellipsecloud.com/booking/"
  data-gift-url="https://grand.ellipsecloud.com/gift/"
  data-gift-url-sk="https://grand.ellipsecloud.com/gift/?lang=sk"
  data-gift-url-en="https://grand.ellipsecloud.com/gift/?lang=en"
  data-gift-url-de="https://grand.ellipsecloud.com/gift/?lang=de"
  data-language="en">
</script>

Ako panel funguje

• Panel sa zobrazí v spodnej časti stránky ako fixná lišta (alebo podľa nastavenia po scrollnutí)
• Kliknutím na dátum príchodu alebo odchodu sa otvorí kalendár pre výber dátumov
• Po výbere oboch dátumov sa automaticky otvorí okno pre výber počtu dospelých a detí (vrátane veku detí)
• Po potvrdení sa otvorí booking engine vo vyskakovacom okne (popup) s predvyplnenými údajmi
• Tlačidlo "Kúpiť darček" otvorí stránku darčekových poukazov vo vyskakovacom okne
• Panel má tlačidlo na zatvorenie (x) - po zatvorení sa panel skryje na 10 minút, ale zobrazí sa malá ikonka kalendára na pravej strane pre znovuotvorenie
• Na mobilných zariadeniach sa panel automaticky prispôsobí menšej obrazovke
• Panel zobrazuje text "Garancia najnižšej ceny" (na mobile skrátene "Najlepšia cena"), na najmenších obrazovkách sa text úplne skryje

Podporované jazyky

Panel je plne lokalizovaný do nasledujúcich jazykov:

• sk - Slovenčina (predvolené)
• cs - Čeština
• en - Angličtina
• de - Nemčina
• pl - Poľština
• hu - Maďarčina
• es - Španielčina
• fr - Francúzština

Lokalizácia zahŕňa všetky texty vrátane názvov mesiacov, dní v týždni, popisov tlačidiel a možností veku detí.

Riešenie problémov

Panel sa nezobrazuje

• Skontrolujte, či je atribút data-base-url správne vyplnený
• Otvorte URL scriptu priamo v prehliadači - mal by sa zobraziť JavaScript kód
• Otvorte konzolu prehliadača (F12 → Console) a skontrolujte, či tam nie sú chyby
• Ak je nastavený data-after-scroll, skúste scrollnúť nižšie na stránke
• Ak ste panel zavreli, je skrytý na 10 minút. Hľadajte malú ikonku kalendára na pravej strane stránky pre znovuotvorenie

Popup sa neotvára (rezervácia/poukazy)

• Panel potrebuje jQuery pre zobrazenie popup okna. Ak váš web nemá jQuery, script ho automaticky načíta
• Ak je jQuery na stránke blokované alebo sa nepodarí načítať, rezervácia sa otvorí v novom okne prehliadača
• Skontrolujte, či data-booking-url a data-gift-url smerujú na správne adresy

Panel prekrýva obsah na stránke

• Panel automaticky pridáva padding-bottom na body stránky, aby neprekrýval obsah
• Ak to nefunguje správne, skúste nastaviť data-position="sticky" namiesto fixed
• Prípadne použite data-hide-from-bottom pre skrytie panela pred pätičkou

Panel koliduje s inými prvkami

• Zvýšte data-z-index ak panel prekrývajú iné prvky (napr. cookie lišta, chat widget)
• Znížte data-z-index ak panel prekrýva prvky, ktoré majú byť nad ním

Farby nezodpovedajú dizajnu webu

• Použite atribúty data-color-primary, data-color-secondary, data-color-tertiary a data-color-background pre prispôsobenie farieb
• Farby zadávajte v HEX formáte vrátane mriežky (napr. #2c3e50)

Prehľad všetkých nastavení

Podpora

V prípade otázok alebo problémov s inštaláciou booking panela nás kontaktujte:

• E-mail: [email protected]
• Telefón: +421 52 7871 911
• Web: www.horecagroup.sk