Umiestnenie Booking widgetu na webovú stránku

    Jednoduché umiestnenie Booking lišty na externý web ubytovateľa, ktorý bez dodatočného programovania umožní jednoduchú optimalizovanú rezerváciu na akomkoľvek webe hotela s možnosťami custom parameterov pre editáciu. 

    Ako lišta vyzerá live si môžete pozrieť napr. tu: https://chamoisapartments.com/ 

    Vzorový script 

    <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>

    Povinné parametre

    Pre správne fungovanie panelu musíte nastaviť tieto dva parametre:

    • data-booking-url - URL adresa vášho rezervačného systému (napr. https://chamoisapartments.com/booking/)
    • data-base-url - Základná URL adresa pre načítanie CSS súborov - base url pre doménu, na ktorom je pustený Ellipse

    Voliteľné parametre - Prispôsobenie vzhľadu

    Panel si môžete prispôsobiť podľa vašej firemnej identity pomocou nasledujúcich parametrov:

    • data-color-primary - Primárna farba (tlačidlá, texty) - predvolená: #1a0c52
    • data-color-secondary - Sekundárna farba (hover efekty) - predvolená: #ffcc00
    • data-color-tertiary - Terciárna farba (pozadia, rámčeky) - predvolená: #dddae8
    • data-color-background - Farba pozadia panelu - predvolená: #ffffff
    • data-border-radius - Zaoblenie rohov v pixeloch - predvolené: 8
    • data-font - Vlastný font (ak nechcete použiť systémový)

    Voliteľné parametre - Pozícia a správanie

    Môžete ovládať, kedy a ako sa panel zobrazuje:

    • data-position - Typ pozície (fixed alebo sticky) - predvolené: fixed
    • data-z-index - Z-index pre vrstvenie - predvolené: 999999
    • data-after-scroll - Zobraziť panel až po scrollnutí X pixelov - predvolené: 0
    • data-hide-from-bottom - Skryť panel X pixelov pred koncom stránky - predvolené: 0

    Voliteľné parametre - Funkčnosť

    • data-language - Jazyk rozhrania: sk, en, pl, hu, es, fr, cs - predvolené: sk
    • data-checkin-offset - Predvolený príchod o X dní od dnes - predvolené: 0
    • data-checkout-offset - Predvolený odchod o X dní od príchodu - predvolené: 1
    • data-gift-url - URL pre darčekové poukazy (ak nie je zadaná, tlačidlo sa skryje na mobiloch)

     

    Parameter Hodnota Čo to znamená
    data-position fixed Panel zostane fixný pri scrollovaní
    data-position-side bottom Panel bude v spodnej časti stránky
    data-z-index 999999 Panel bude nad všetkými ostatnými elementmi
    data-border-radius 30 Veľké zaoblenie (30px) pre moderný look
    data-checkin-offset 1 Predvolený check-in je ZAJTRA
    data-checkout-offset 4 Predvolený pobyt je 4 dni (zajtra + 4 dni)
    data-booking-url chamoisapartments.com/booking/ Rezervačný systém Chamois Apartments
    data-gift-url chamoisapartments.com/darcekove-poukazy/ Stránka s darčekovými poukazmi
    data-base-url chamoisapartments.com/ Základná URL pre načítanie CSS
    data-after-scroll 100 Panel sa zobrazí až po scrollnutí 100px
    data-language sk Slovenské rozhranie
    data-color-primary #51260c Tmavo hnedá (primárna farba brandu)
    data-color-secondary rgb(191, 168, 155) Béžová/hnedá (hover efekty)
    data-color-tertiary #dfc6b7 Svetlá béžová (jemné pozadia)
    data-color-background #fcf2ec Krémové pozadie panelu
    data-font 'Montserrat', sans-serif Moderný Google Font Montserrat
    async - Skript sa načíta asynchrónne (rýchlejšie)

    Výsledok