Upper Booking Engine

 Upper Booking Engine
Instrukcja integracji panelu rezerwacyjnego
ze stroną internetową
Wersja: 2.0
Data: 13‐01‐2016
Autor: Tomasz Walkowiak
www.profitroom.net Spis treści
1. Wprowadzenie
2. Wdrożenie skryptu wyświetlającego formularz rezerwacyjny
3. Integracja gotowego formularza rezerwacyjnego
a. wersje językowe
b. dostępne układy
c. części składowe
4. Integracja systemu rezerwacyjnego z własnym formularzem
rezerwacyjnym
a. skrypt
b. wersje językowe
c. funkcje
d. podstawowe parametry
5. Pomoc techniczna
www.profitroom.net Wprowadzenie
Instrukcja poniższa jest przeznaczona dla firmy obsługującej Państwa stronę internetową lub dla
działu IT hotelu.
Umieszczenie na stronie internetowej hotelu formularza rezerwacyjnego otwierającego panel UPPER
jest bardzo proste i sprowadza się zazwyczaj do umieszczenia w kodzie HTML strony ​
jednej linijki
kodu​
.
Definicje:
Formularz rezerwacyjny​
to formularz, który wyświetla się na stronie internetowej hotelu
umożliwiający wybór podstawowych informacji o okresie rezerwacji i otwarcie panelu UPPER BE, który
umożliwia zweryfikowanie dostępności i zakończenie procesu rezerwacyjnego.
Panel UPPER​
to panel, który otwiera się "ponad" stroną internetową hotelu przy wykorzystaniu
formularza rezerwacyjnego. Umożliwia on przeglądanie oferty hotelu, dostępności oraz wybór i
sfinalizowanie rezerwacji miejsca w hotelu.
<nazwahotelu>​
‐ unikalna nazwa identyfikująca danego klienta
www.profitroom.net Wdrożenie skryptu wyświetlającego formularz rezerwacyjny
W ogólności, aby umieścić na stronie gotowy formularz rezerwacyjny należy wkleić poniższy kod przed
znacznikiem zamykającym </body>:
<script src="http://wis.upperbooking.com/<nazwahotelu>/booking" async></script> UWAGA​
‐ Powyższy skrypt wyświetli formularz rezerwacyjny w angielskiej wersji językowej.
Umieszczenie powyższego kodu spowoduje wyświetlenie na stronie formularza rezerwacyjnego w
ustalonym miejscu strony www zgodnie z przedstawioną klientowi wersją demonstracyjną.
Wersje językowe
W celu ustawienia odpowiedniej wersji językowej formularza rezerwacyjnego należy uzupełnić
powyższy kod o parametr sterujący wersją językową ‐ locale:
<script src="http://wis.upperbooking.com/<nazwahotelu>/booking?​
locale=pl​
" async></script> Dostępne podstawowe wartości dla parametru locale:
● pl ‐ język polski
● en ‐ język angielski
● de ‐ język niemiecki
● ru ‐ język rosyjski
● it ‐ język włoski
● cz ‐ język czeski
Na Państwa życzenie możemy przygotować inne wersje językowe.
www.profitroom.net Dostępne układy formularza rezerwacyjnego
Formularz rezerwacyjny udostępniony jest w dwóch układach:
poziomy
pionowy
Układ formularza rezerwacyjnego jest responsywny i dostosowuje się automatycznie do rozmiarów
strony www.
www.profitroom.net Części składowe formularza rezerwacyjnego
W zależności od potrzeb dostępne są dodatkowe elementy panelu rezerwacyjnego:
ELEMENT
WYGLĄD
tytuł
tytuł + ikona
gwarancja najniższej ceny
gwarancja najniższej ceny + ikona
separator
pola przyjazd i wyjazd
przycisk kierujący do rezerwacji
przycisk prowadzący do widoku ofert
przycisk prowadzący do widoku voucherów
najniższa cena dla oferty podstawowej
pole na kod promocyjny
lista hoteli (przeznaczone dla formularzy
obsługujących więcej niż jeden obiekt hotelowy)
www.profitroom.net Integracja systemu rezerwacyjnego z własnym formularzem rezerwacyjnym
Profitroom zazwyczaj przygotowuje gotowy formularz rezerwacyjny jednakże mogą Państwo
zintegrować system rezerwacyjny z własnym formularzem.
Skrypt
W celu załadowania biblioteki niezbędnej do obsługi wywołania systemu rezerwacyjnego należy wkleić
poniższy kod przed znacznikiem </body>:
<script type="text/javascript" src="http://open.upperbooking.com/<nazwahotelu>/Booking.js"></script> UWAGA ​
‐ Powyższy skrypt uruchomi system rezerwacyjny w angielskiej wersji językowej.
Skrypt dla stron portalowych
W przypadku stron portalowych, które są skojarzone z wieloma systemami rezerwacyjnymi wystarczy
załadować jedną kopię skryptu przy pomocy neutralnego kodu:
<script type="text/javascript" src="http://open.upperbooking.com/js/Booking.js"></script> W takim przypadku możliwe będzie jedynie wywoływanie metod wymagających przekazywania kodu
obiektu (OpenSite() itp.).
Wersje językowe
W celu ustawienia odpowiedniej wersji językowej formularza rezerwacyjnego należy uzupełnić
powyższy kod o parametr sterujący wersją językową ‐ locale:
<script type="text/javascript" src="http://open.upperbooking.com/<nazwahotelu>/Booking.js?​
locale=pl​
"></script> Dostępne podstawowe wartości dla parametru locale:
● pl ‐ język polski
● en ‐ język angielski
● de ‐ język niemiecki
● ru ‐ język rosyjski
● it ‐ język włoski
● cz ‐ język czeski
Na Państwa życzenie możemy przygotować inne wersje językowe.
www.profitroom.net Standardowe funkcje otwierające system rezerwacyjny Upper BE
Otwarcie systemu rezerwacyjnego jest możliwe przy pomocy kodu Javascript umieszczanego kodzie
znacznika, np. przycisk, link, element blokowy, itd. W tym celu należy dla danego elementu
zastosować zdarzenie ​
onclick​
.
Dostępne funkcje:
● Booking.Open()​
‐ standardowe wywołanie okna z systemem rezerwacyjnym
● Booking.OpenSite()​
‐ standardowe wywołanie okna systemu rezerwacyjnego, przeznaczone dla
stron z wieloma obiektami hotelowymi ‐ funkcja wymaga parametru <nazwahotelu>
● Booking.OpenBrowse()​
‐ wywołanie systemu rezerwacyjnego na widoku Przeglądaj oferty
● Booking.OpenBrowseSite()​
‐ wywołanie systemu rezerwacyjnego na widoku Przeglądaj oferty,
przeznaczone dla stron z wieloma obiektami hotelowymi ‐ funkcja wymaga parametru
<nazwahotelu>
● Booking.OpenSidebar()​
‐ wywołanie systemu rezerwacyjnego w pasku bocznym strony www
● Booking.OpenVoucher()​
‐ wywołanie systemu rezerwacyjnego na widoku wybranego vouchera
‐ wymaga parametru określającego konkretny voucher
● Booking.OpenVouchers()​
‐ wywołanie systemu rezerwacyjnego na widoku listy dostępnych
voucherów
● Booking.OpenVouchersSite()​
‐ wywołanie systemu rezerwacyjnego na widoku listy dostępnych
voucherów, przeznaczone dla stron z wieloma obiektami hotelowymi ‐ funkcja wymaga
parametru <nazwahotelu>
przykłady wywołania:
<a href=”#rezerwuj” ​
onclick=”Booking.Open(); return false;”​
>Rezerwuj Online</a>
<a href=”#rezerwuj” ​
onclick=”Booking.OpenSite(‘<nazwahotelu>’); return false;”​
>Rezerwuj
Online</a>
<a href=”#rezerwuj” ​
onclick=”Booking.OpenVoucher({OfferID:12345}); return false;”​
>Kup
prezent</a>
UWAGA​
‐ dodatkowy kod ​
return false;​
zapobiega przejściu linka do adresu wskazanego w atrybucie
href​
.
www.profitroom.net Podstawowe parametry
W ramach powyższych funkcji można przekazać dodatkowe parametry. Ogólny schemat przekazywania
parametrów:
Booking.Open({parametr: wartosc, parametr: wartosc, ...})
Booking.OpenSite('<nazwahotelu>', {parametr: wartosc, parametr: wartosc, ...})
PARAMETR
OPIS
PRZYKŁAD
OfferID
wywołanie wybranej oferty lub
vouchera
{OfferID:1234}
RoomID
wywołanie wybranego pokoju
{RoomID:5478}
checkin
ustawia datę przyjazdu
{checkin:’2016‐01‐04’}
checkout
ustawia datę wyjazdu
{checkout:’2016‐01‐08’}
nights
przekazuję liczbę noclegów
{checkin:’2016‐01‐04’,nights:’5
’}
Currency
uruchamia system w wybranej
walucie, w przypadku braku
tego parametru system
uruchamia się z domyślną
walutą ustawioną w panelu
administracyjnym Upper BE
{Currency:’EUR’}
{Currency:’GBP’}
promocode
przekazuje wartość kodu
promocyjnego
{promocode: ‘kod’}
www.profitroom.net Pomoc Techniczka Profitroom e‐mail: ​
[email protected]
tel: +48 61 840 23 80
www.profitroom.net ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
ENGLISH
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
www.profitroom.net Upper Booking Engine
Instructional guide to integration of Upper Booking Engine with Hotel`s website
Version: 2.0
Date: 13‐01‐2016
Author: Tomasz Walkowiak
www.profitroom.net List of contents:
6. Introduction
7. Implementation of the script displaying the Booking Form
8. Integration of the preset Booking Form
a. language versions
b. avaialble layouts
c. component parts
9. Integration of the Booking Engine with you own Booking Form
a. script
b. language versions
c. functions
d. basic parameters
10. Customer Support
www.profitroom.net Introduction
Below`s instructional materials are intended for the use of the Party managing Client`s website or for the relevant IT Department. Implementing the Booking Form on the Client`s website is very simple and usually comes down to
placing ​
one line of the code​
into the general website`s HTML code.
Definitions:
Booking Form ‐​
the form displayed on the hotel`s website enabling users to choose basic information
on the date of reservation and to open UPPER BE panel, which enables availability verification and
completing the reservation process.
UPPER PANEL​
‐ the panel, which opens “above”​
the website`s interface when the user clicks through
​
the Booking Form. It enables browsing through hotel`s offer, availability calendar, selection and
completing the room reservation.
<hotelname>​
‐ unique name / ID of the given client
Implementation of the script displaying the Booking Form
In general, in order to place the preset Booking Form on the hotel`s website, undermentioned line of
the code needs to be typed manually or pasted before the closing tag </body>:
<script src="http://wis.upperbooking.com/<hotelname>/booking" async></script> NOTICE​
‐ Abovementioned script will display the Booking Form in the English language version.
Placing the abovementioned code will cause displaying of the Booking Form in the prearranged place
on the website in accordance with the demo version presented to the Client.
Language versions
In order to set the relevant language version of the Booking Form, the abovementioned code needs to
be supplemented with the parameter in control of the language version ‐ locale:
<script src="http://wis.upperbooking.com/<hotelname>/booking?​
locale=en​
" async></script> Basic
●
●
●
●
●
●
values available for the parameter locale:
en ‐ english language
de ‐ german language
ru ‐ russian language
it ‐ italian language
cz ‐ czech language
pl ‐ polish language
www.profitroom.net On Clients’ request Profitroom can provide more language versions.
Available layouts of the Booking Form
The Booking Form is available in two layouts:
horizontal:
vertical:
Layout of the Booking Form is responsive and automatically adapts itself to website format, regardless
of the device in use.
www.profitroom.net Component parts of the Booking Form
Depending on the Clients’ needs additional elements of the Booking Panel are available:
ELEMENT
APPEARANCE
title
tile + icon
lowest price guaranteed
lowest price guaranteed + icon
delimiter
arrival and departute boxes
booking button
offers booking button
vouchers button
lowest price for the basic offer
promo code box
hotels list (dedicated to Booking forms for more
than one hotel/rent property)
www.profitroom.net Integration of the Booking Engine with your own Booking Form
Profitroom usually presets the Booking Form, however you can integrate the Booking Engine with your
own Booking Form.
Script
In order to load the library necessary to triggering the Booking System, the undermentioned code
needs to be typed or pasted before the </body>: tag.
<script type="text/javascript" src="http://open.upperbooking.com/<hotelname>/Booking.js"></script> NOTICE​
‐ Abovementioned script will display the Booking Form in the English language version.
Script for the online booking portals:
In the case of online booking portals, which are connected with many booking systems, only one copy
of the script needs to be embedded using the neutral code below:
<script type="text/javascript" src="http://open.upperbooking.com/js/Booking.js"></script> In such case it will only be possible to trigger methods that require transferring the hotel`s code
(OpenSite() etc.).
Language versions
In order to set the relevant language version of the Booking Form, the abovementioned code needs to
be supplemented with the parameter in control of the language version ‐ locale:
<script type="text/javascript" src="http://open.upperbooking.com/<hotelname>/Booking.js?​
locale=en​
"></script> Basic values available for the parameter locale:
● en ‐ english language
● de ‐ german language
● ru ‐ russian language
● it ‐ italian language
● cz ‐ czech language
● pl ‐ polish language
On Clients’ request Profitroom can provide more language versions.
www.profitroom.net Standard functions opening the Upper Booking Engine:
Opening of the Upper Booking Engine is possible using Javascript code placed in the tag`s code, e.g. button, link, blocking element, etc. To that end, for a given element, the ​
onclick e
​vent has to be applied. Available functions :
● Booking.Open()​
‐ standard triggering of the booking engine window
● Booking.OpenSite()​
‐standard triggering of the booking engine window, dedicated to websites
with many hotels ‐ function requires the ​
<hotelname> ​
parameter
● Booking.OpenBrowse()​
‐ triggering of the booking engine on the​
Browse offers​
view
● Booking.OpenBrowseSite()​
‐triggering of the booking engine on the​
Browse offers​
view,
dedicated to websites with many hotels ‐ function requires the ​
<hotelname> ​
parameter
● Booking.OpenSidebar()​
‐ triggering of the booking engine on the website`s sidebar
● Booking.OpenVoucher()​
‐ triggering of the booking engine on the view of selected voucher ‐
requires the parameter describing particular voucher
● Booking.OpenVouchers()​
‐ triggering of the booking engine on the view of available vouchers
list
● Booking.OpenVouchersSite()​
‐ triggering of the booking engine on the view of available
vouchers list, ‐ dedicated to websites with many hotels ‐ function requires the ​
<hotelname>
parameter
examples of triggering:
<a href=”#book” ​
onclick=”Booking.Open(); return false;”​
>Book Online</a>
<a href=”#book” ​
onclick=”Booking.OpenSite(‘<hotelname>’); return false;”​
>Book Online</a>
<a href=”#book” ​
onclick=”Booking.OpenVoucher({OfferID:12345}); return false;”​
>Buy voucher</a>
NOTICE​
‐ additional code ​
return false;​
prevents the link from migrating to the address indicated in the
href ​
attirbute.
www.profitroom.net Basic parameters
Within the abovementioned functions it is possible to communicate additional parameters.
General scheme of parameters ​
transmitting/communicating:
Booking.Open({parameter: value, parameter: value, ...})
Booking.OpenSite('<hotelname>', {parameter: value, parameter: value, ...})
PARAMETER
DESCRIPTION
EXAMPLE
OfferID
triggering of the given offer or
voucher
{OfferID:1234}
RoomID
triggering of the given room
{RoomID:5478}
checkin
setting the date of checkin
{checkin:’2016‐01‐04’}
checkout
setting the date of checkout
{checkout:’2016‐01‐08’}
nights
communicates the number of
nights (length of stay)
{checkin:’2016‐01‐04’,nights:’5
’}
Currency
launches the system in a given
currency, in case there is no
currency parameter set, the
system starts with the default
currency preset in the Upper
BE admin panel
{Currency:’EUR’}
{Currency:’GBP’}
promocode
communicates the promo code
value
{promocode: ‘kod’}
www.profitroom.net Profitroom`s Customer Service e‐mail: ​
[email protected]
tel: +48 61 840 23 80
www.profitroom.net