Online Reception: WuBook’s Javascript Library
Our developers created an easy javascript library to help you integrate the online booking service on your pages.
The library is designed to avoid conflicts with third-party libraries.
Loading and using the WuBook Library
Including the library and initializing is trivial. You just need a unique parameter- the lcode param- which is the property identifier. Assuming that your lcode is 1402584731:
<script src="https://wubook.net/js/wblib.jgz"></script>
<script>
WuBook= new _WuBook(1402584731);
// Then, if you want to open the booking engine using Arrival Date= 21/12 and 3 nights:
WuBook.open({'dfrom': 21/12/2021, 'nights': 3});
</script>
Before reading about the features of the WuBook object, let’s understand how the library can be useful to implement UI effects and tools.
Again, we assume that whoever would use these calls knows a little bit of javascript coding.
Ui Tools (calendars and more) and jQuery framework
WuBook’s library also embeds a customized and hidden jquery and jquery-UI library that doesn’t generate any kind of conflict. If you want to use the embedded jQuery framework, you can access it this way:
<script src="https://wubook.net/js/wblib.jgz"></script>
<script>
WuBook= new _WuBook(1402584731);
WuBook.jQuery('div.foo').hide();
WuBook.jQuery('#dateinput').datepicker();
// or
$= WuBook.jQuery;
</script>
If you want, you can also export the jQuery framework on your site. Just initialize the WuBook object with a second (true) argument:
<script src="https://wubook.net/js/wblib.jgz"></script>
<script>
WuBook= new _WuBook(1402584731, true);
$('div.foo').hide();
$('#dateinput').datepicker();
</script>
Now, the embedded version of jquery - otherwise hidden inside the WuBook object- is exported on your site. You access it with the usual, global variable $ (instead of WuBook). Notice that this approach can create conflicts with other libraries and frames, like prototype and mootools.
The WuBook Object
The WuBook javascript object has many interesting features. Here they are:
WuBook.open() is used to open the online reception on a new window (online booking)
WuBook.fount() allows you to export room prices
WuBook.sendmail() allows you to implement a messaging form: customers can send an email to the property
WuBook.cancel() allows to cancel a reservation. This way, you can provide the cancellation service directly on the property site
WuBook.specialOffers() allows to load property’s special offers
WuBook.design_rwidget() allows you to include the WuBook Responsive Widget on your site (fully featured and customizable, check later)
WuBook.design_bwidget() allows you to include the WuBook Widget on your site as a full width bar (fully featured and customizable, check later)
WuBook.design_iframe() allows you to embed the booking system inside the pages of your site, via Iframe
WuBook.design_pwidget() allows you to implement on your site the WuBook Package Widget
WuBook.pkgs() allows you to load property’s holiday packages
WuBook.pkg_availability() checks the availability of one package
WuBook.book_package() allows you to book a Holiday Package
WuBook.design_feeds_widget() allows you to implement the WuBook Feeds Widget
WuBook.feedbacks() allows you to retrieve the feedbacks that customers gave to your the property
WuBook.crossed() allows you to build a calendar with only the available days
From now on, it’s assumed that the WuBook Object has been initialized:
<script src="https://wubook.net/js/wblib.jgz"></script>
<script>
WuBook= new _WuBook(1402584731);
</script>
Once you have the WuBook object you can begin to use your functions.
- WuBook.open(params)
loads and opens the Online Reception. You can check the full list of possible parameters at the section Online Reception HTML Specification.
- A simple example follows
<script>
WuBook.open({'dfrom': 'today', 'nights': '3', 'lang': 'it'});
</script>
You have also the following additional parameter: wbgoogle (1 or 0). If true, the WuBook Ojbect will automatically handle the mapping between the WuBook Online Reception and the Google Analytics account you’re using on your site. The integration with Google services will track Adwords conversions too.
- WuBook.fount(params, cback)
exports the prices for the property. Example:
<script>
WuBook.fount({'dfrom': '21/12/2022', 'dto': '23/12/2022'}, function(data) {console.log(data)});
</script>
As you will see, the result is a simple object having 3 keys: error, warnings and results. The last one is a simple object, having “occupancies” as key and “prices” as values.
- For instance
{
"warnings": "",
"results": {lcode: {"1": 340.0, "2": 306.0, "4": 1360.0}},
"error": ""
}
The previous example states that, for the selected dates, single average price is 340, while double is 306 and 4-pax room costs 1360 (averagely per night).
To understand the possible parameters, check WuBook Fount - Selling rooms on your site.
- WuBook.sendmail(params, callback)
is used to send an email to the property. You just need to collect the following parameters:
cname: the name of the customer (it can be for example First Name + Last Name)
email: the email of the customer
subject: the subject of the email
text: the text of the message
These parameters are mandatory. There is an optional parameter, lang, which is used to correctly translate the confirmation message we will send the customer when the email will be delivered to the property. So, this is a simple example:
<script>
params= {
'cname': 'Batman',
'email': 'batman@gothamcity.foo',
'subject': 'One Question',
'text': 'I would like to visit you, what is the preferred period?',
'lang': 'en'
};
function myCallback(error) {
if (!error) alert('Mail sent!');
else alert('An error occurred: ' + error);
}
WuBook.sendmail(params, myCallback);
</script>
- WuBook.cancel(params, cback)
is used to cancel a reservation. You can use this call to implement a form on the property site, allowing property customers to cancel their reservations on their pages. It accepts 2 mandatory and 1 optional parameters:
rcode: the reservation code
email: the email used to finalize the reservation that the customer wants to cancel
lang (optional): if you specify the language, we will return translated strings
- This is a simple example
<script>
params= {
'rcode': '123456',
'email': 'batman@gothamcity.foo',
};
function myCallback(error) {
if (!error) alert('Your reservation has been cancelled! Check your email to see details');
else alert('An error occurred: ' + error);
}
WuBook.cancel(params, myCallback);
</script>
- WuBook.specialOffers(cback)
is used to retrieve the property’s special offers. A full set of data is returned (JSON encoded). Once retrieved, you can enrich the site contents, displaying them and eventually providing a link for each of them for opening the online reception for the appropriate dates. The provided callback function will accept a unique argument: the Special Offers list.
- A first example
<script>
function myCallback(specialOffersList) {
var n= specialOffersList.length;
alert('I got ' + n + ' Special offers!');
}
WuBook.specialOffers(myCallback)
</script>
How to handle special offers? It’s easy. SpecialOffersList is an object containing the following attributes:
Object
description: Object
de: "german descr"
en: "english descr"
es: ""
fr: ""
gr: ""
it: ""
nl: ""
pt: ""
ru: ""
name: Object
de: "Pasqua Rosa!!"
en: "Pasqua Rosa!!"
es: "Pasqua Rosa!!"
fr: "Pasqua Rosa!!"
gr: "Pasqua Rosa!!"
it: "Pasqua Rosa!!"
nl: "Pasqua Rosa!!"
pt: "Pasqua Rosa!!"
ru: "Pasqua Rosa!!"
periods: Array[1]
0: Array[2]
0: "06/04/2012"
1: "09/04/2012"
type: "5.00 %"
Now that you have a list of Special Offers, formatted as described, you can enrich the site’s content.
- This is a simple example (adding contents to the tag with id “special_offers_id”)
<script>
function WbOpen(link) {
var dfrom= $(link).attr('data-dfrom');
var dto= $(link).attr('data-dto');
WuBook.open({'dfrom': dfrom, 'dto': dto});
}
function myCallback(specialOffersList) {
for (var i= 0; i < specialOffersList.length; i++) {
var off= specialOffersList[i];
var period= off['periods'][0];
var startDate= period[0];
var endDate= period[1];
var htmllink= '<a href="javascript:void(0)" onclick="WbOpen(this)" data-dfrom="' + startDate + '" data-dto="' + endDate + '">Book Now</a>';
$('#special_offers_id').append(htmllink);
}
}
WuBook.specialOffers(myCallback);
</script>
- WuBook.design_rwidget(element_id, params, cback)
is used to build and deploy the responsive widget (booking form) on the website pages. If you want, you can use an Online Code Generator. Otherwise, to use it your way, you need to provide the following parameters:
element_id: is the id of an HTML-DIV element. The widget will be deployed here. The DIV must contain a backlink to the WuBook site. params is an array of parameters, all optional. Here they are:
Note: You don’t need this! The width is not necessary because the widget can adapts itself to the width of external container.
Note: You don’t need this! the heigth is automatically calculated to fit the widget content.
lang: the language, no param means auto-detect (possible languages are en,it,ru,es…. and so on)
failback_lang: just in case lang is not specified and server cannot detect the language: this language will be used.
default_nights: default number of nights added when the dfrom date is selected.
wbgoogle: google analytics enabled (0 or 1). Default is 1.
thn: The Hotels Network analytics enabled (0 or 1). Default is 0.
css: inline css to fully customize the widget (optional). Example: css=”a {font-size: 100px}”
openParams: Not mandatory. It is an object, like {eurota: ‘code’, lang: ‘fr’}. These parameters are passed to the Online Booking. Check WuBook.open() for a description of parameters
bordercolor: external border color. Default is #108DBD.
bgcolor: background color. Default is #FFFFFF.
textcolor: fonts color. Default is #2C2C2C.
buttoncolor: “Book” button color. Default is #108DBD.
iconcolor: external border color. Default is #888888.
dcode: Not mandatory; If it provided equal to 1 displays a discount code field.
dcodeval: A string type not mandatory; if provided a discount code field is inserted and precompiled with this value.
leisure: leisure is not mandatory to open the Online Reception. If its value is 0, field is not included in the widget. If 1 the field is included but the choice is not mandatory, if its value is 2 the fields is mandatory: if it is not specified, at the open of Online Reception will be required.
calendarup: If its value is 1, the date selector is opened on the top of the widget instead of the bottom. Default is 0.
cback: optional: cback represents a callback which will be fired once the widget will be designed.
- So, this is a simple example, assuming all is inside a <script> tag
WuBook= new _WuBook(12345678);
params= {
bordercolor: '#108dbd',
lang: '',
buttoncolor: '#108dbd',
failback_lang: 'en',
wbgoogle: 1,
bgcolor: '#ffffff',
iconcolor: '#888888',
textcolor: '#2c2c2c',
default_nights: 3
};
WuBook.design_rwidget('__wubook__', params, function() {alert('widget is deployed');});
- WuBook.design_bwidget(element_id, params, cback)
is used to build and deploy a responsive and highly configurable bar on the website pages: you can choose yourself which blocks to inlcude! If you want, you can use an Online Code Generator. Otherwise, to use it your way, you need to provide the following parameters:
element_id: is the id of an HTML-DIV element. The widget will be deployed here. The DIV must contain a backlink to the WuBook site. params is an array of parameters, all optional. Here they are:
lang: the language, no param means auto-detect (possible languages are en,it,ru,es…. and so on)
failback_lang: just in case lang is not specified and server cannot detect the language: this language will be used.
default_nights: default number of nights added when the dfrom date is selected.
wbgoogle: google analytics enabled (0 or 1). Default is 1.
thn: The Hotels Network analytics enabled (0 or 1). Default is 0.
css: inline css to fully customize the widget (optional). Example: css=”a {font-size: 100px}”
openParams: Not mandatory. It is an object, like {eurota: ‘code’, lang: ‘fr’}. These parameters are passed to the Online Booking. Check WuBook.open() for a description of parameters
bordercolor: it is a rgb string that define the border color of the blocks, for example “#ffffff”. If not given defafult is #988454.
barbackground: the background color of the bar, its format is a rgba string, for example: ‘rgba(0, 0, 0, 0.49)’. If not given default is #000000.
bgblocks: the background color of the blocks (rgb string). If not given default is #000000.
adchi: 1 to include adults/children selector in booking engine block (not mandatory).
plusperc: the increase percentage by which your best price appears in OTA (default 5%).
buttoncolorbe: “Book” button color in booking engine block. Default is #1c375b.
textcolorcalendarbe: text color calendar for booking engine block. Default is #988454.
avgcolor: text color of feedbacks avg (realted to feedbacks block). Default is #988454.
avgtextcolor: text color of link to feedbacks page in feedbacks block. Default is #ffffff.
textcolorbb: text color for the custom messages box. Default is #ffffff.
textcolorpk: Color of packages title in packages block. Default is #988454
rpkgs: a base64 encoded string of package id separated from commas
dibuttoncolor: button color of discount block: default #008000
ditextcolor: text color of discount: default #ffffff
listtypebb: lyst type color for the custom messages box. Default is #ffffff.
blocks: It is a string that define the blocks to include in the bar. Each block is separated from the other by a comma. Possible value are ‘be’ (stands for booking engine block), ‘fe’ (stands for feedback block), ‘pk’ (stands for pakages block), ‘di’ (stands for discount block), ‘bb’ (stands for custom messages block). You can specify any list of blocks: they are shown in the order in which they appear. For example the value of this key can be ‘be,fe,bb’. Note: if you specify the packages block (‘pk’) and don’t fill the rpkgs key, the block will not be showed; Note: if you specify the discount block (‘di’) and don’t fill the hdcode key, the block will not be showed;
cmsgs: a base64 encoded string of message id separated from commas; 1: stand for “Guarantee better price”. 2: stand for “Customer Support”. 3: stand for “Secure Payment”. 4: stand for “Better Price”. 5: stand for “Free Cancellation”. 6: stand for “Better Price”. 7: stand for “Real Feedbacks”. Note: All sentences are translated in the languages availables in the booking engine
hdcode: the discount code to automatic apply when booking is opened. Note: If not compiled the block is not showed
fixedPosition: default is 0, in this case the positioning of the bar is not fixed. If its value is 1 the bar is fixed positioned in the bottom-left.
cback: optional: cback represents a callback which will be fired once the widget will be designed.
- So, this is a simple example, assuming all is inside a <script> tag
var WuBook= new _WuBook(12345678);
var wbparams= {
fixedPosition: 0,
ditextcolor: '#ffffff',
avgcolor: '#988454',
textcolorbb: '#ffffff',
plusperc: 5,
listtypebb: '#ffffff',
rpkgs: '',
barbackground: 'rgb(0, 0, 0)',
textcolorpk: '#988454',
default_nights: 3,
textcolorcalendarbe: '#988454',
bordercolor: '#988454',
blocks: 'be,fe,bb,di',
failback_lang: 'en',
hdcode: '',
textcolorbuttonbe: '#ffffff',
avgtextcolor: '#ffffff',
lang: '',
buttoncolorbe: '#1c375b',
dibuttoncolor: '#008000',
wbgoogle: 1,
thn: 0,
bgblocks: '#000000',
cmsgs: 'MSwyLDM=',
textcolornightspk: '#ffffff',
adchi: 1
};
WuBook.design_bwidget("_baror_", wbparams);
- WuBook.design_iframe(element_id, params, cback)
is used to build and deploy the Online Reception within website pages. If you want, you can use an Online Code Generator. Otherwise, to use it your way, you need to provide the following parameters:
element_id: is the id of the HTML DIV element. Iframe will be placed here. It contains a backlink to the WuBook site, see the example below. params is an array of optional parameters. Here they are:
width: the width of the iframe (optional, integer or percentage using the % symbol). Default value is 840.
height: the height of the iframe (optional, integer or percentage using the % symbol). Default value is a height of the parent element.
layout: use a specific theme (optional)
lang: the language of the online booking (optional, it can be changed later by the user and, if not specified, WuBook will automatically detect it)
mobile: mobile detection (optional, 0 or 1). If someone will open the page with the online reception in an iframe on the mobile device, a new window will be opened to show only online reception. Default value is 0, disabled.
cback: optional: cback represents a callback which will be fired once the Online Reception will be designed.
- So, this is a simple example
<script>
<div id= "__wubook__""><a href="http://wubook.net/">Booking by Wu</a></div>
params= {
'width': 1000
};
WuBook.design_iframe('__wubook__', params, function() {alert('online reception is deployed');});
</script>
The code above will create an iframe with the Online Reception inside the specified element and will open it. It also cares about 3 parameters: dfrom, dto and nigths. If they are specified in the GET query string, WuBook will detect them, opening the online reception inside the iframe for the desired dates. So, if you design the iframe on the page /foo/bar, you can use /foo/bar?dfrom=today&nights=2.
- WuBook.design_pwidget(element_id, params, cback)
is used to build and deploy the holiday package widget on the website pages. If you want, you can use an online generator located in the wubook panel. Otherwise, to use it your way, you need to provide the following parameters:
element_id: is the id of the HTML DIV element. Iframe will be placed here. It contains a backlink to the WuBook site, see the example below. params is an array of optional parameters. Here they are:
pkgs: it is an array containing the package’s ids. If it is not provided all packages of property will be showed in the widget.
layout: there are two options available, 1 for the orizontal layout (the default if the paramter is not added) and 0 for the vertical.
lang: the language, no param means auto-detect (possible languages are en,it,ru,es…. and so on)
cback: optional: cback represents a callback which will be fired once the widget will be designed.
- So, this is a simple example
<!-- The widget will be placed here -->
<div id="_wbordpkgs_"><a href="http://wubook.net/">Booking by Wu</a></div>
<!-- The script which will deploy the widget -->
<script>
var WuBook= new _WuBook(1213394817);
var pkgs = new Array();
pkgs.push(25);
pkgs.push(323);
var wbparams= {
'pkgs': pkgs,
};
WuBook.design_pwidget("_wbordpkgs_", wbparams);
</script>
- WuBook.pkgs(cback)
is used to retrieve the property’s holiday packages. A full set of data is returned (JSON encoded). With these you can enrich the site contents displaying them, and eventually providing a link for each of them that allows you to open the last step of booking for completion of the purchase. The provided callback function will accept a unique argument: the holiday packages list.
- A first example
<script>
function myCallback(pkgsList) {
var n= pkgsList.length;
alert('I got ' + n + ' Holiday packages!');
}
WuBook.pkgs(myCallback)
</script>
How to handle holiday packages? It’s easy. pkgsList is an array of objects, any object contains the following attributes:
Object
id: "1"
costs: "400.5"
dates: Array
Object
daysweek: "0123456"
dfrom: "05/06/2014"
dto: "20/06/2014
nights: "2"
deposit: "0"
titles: Object
de: "german title"
en: "english title"
es: ""
fr: ""
gr: ""
it: ""
nl: ""
pt: ""
ru: ""
def : "default title"
descriptions: Object
de: "german descr"
en: "english descr"
es: ""
fr: ""
gr: ""
it: ""
nl: ""
pt: ""
ru: ""
def : "default descr"
occupancy: Array[2]
0: "2"
1: "0"
rooms: Array[1]
0: Array[3]
0: "azt"
1: "13"
2: 1
type: "f"
Now that you have a list of holiday packages, formatted as described, you can enrich the site’s content and use it together with other method of WuBook object, WuBook.pkg_availability() and WuBook.book_package(), for creating a complete user interface.
- WuBook.pkg_availability(params, cback)
checks the availability of a package. You must specify a package id and an arrival date:
<script>
function pcallback(data) {
console.log(data);
}
WuBook.pkg_availability({'pid': 1, 'dfrom': '21/12/2021'}, pcallback)
</script>
The pcallback function will be called with a true/false argument, depending on the availability of the package.
- WuBook.book_package(pid, params)
opens the Online Reception on the Package section, allowing you to book the package identified by pid. Params is an optional object that can contain the parameter dfrom. If dfrom is specified and the package is available for this date (see also WuBook.pkg_availability() ), it will be possible to book the package on a single step.
- WuBook.design_feeds_widget(tagid, params, cback)
is used to export the Feedback WuBook Widget. The widget will be inserted on the Tag identified by id=tagid.
The object params can be empty. You can otherwise use it to specify:
a lang,
a layout for widget: 0 stand for vertical, 1 for horizontal,
a css theme: used for online reception opening (when the button “more details” is clicked) for instance:
<script>
function cback(data) {
console.log(data);
}
WuBook.design_feeds_widget('wb_f_widget', {'theme':'atlantic', 'lang': 'it', layout:0}, cback);
</script>
- WuBook.feedbacks(params, callback)
retrieves property’s feedbacks. The callback function will be called once the feedbacks are loaded. Its first argument is a list of feedbacks. Params is a set of optional argument and can accept the following keys: n and offset. N represents the maximum number of feedbacks you want to retrieve, while offset allows you to implement paging. Both parameters are optional.
<script>
function myCallback(feeds) {
alert('Feedbacks Object is now ready');
console.log(feeds);
}
WuBook.feedbacks({'n' : 10, 'offset' : 0}, myCallback);
</script>
To interpret and display results, check the following tables:
Encoding of Traveler Type values:
1: ‘Family with children’
2: ‘Couple’
3: ‘Group of friends’
4: ‘Single traveler’
5: ‘Working traveler’
Encoding of Feedback Contexts values:
1: ‘Comfort’
2: ‘Cleanness’
3: ‘Staff’
4: ‘Meals/Breakfast’
- Here is an example of feedback object
feedbacks: Object
comment: "This is a comment left by a traveler."
country: "IT"
ctx_avg:
Object
ctx_id: 1
how: 5.89445485436752
name: "Comfort"
Object
ctx_id: 3
how: 8.01234448412143
name: "Cleaness"
Object
ctx_id: 4
how: 6.51234344377612
name: "Meals/Breakfast"
date: "05-07-2013 10:33"
feed_avg: 6.80198446211258
fname: "aaa"
lname: "afads"
reply: ""
type: "Family with children"
type_id: 1
global_avgs: Object
averages:
Object
average: 7.55263157894737
context: 1
Object
average: 8.02307692307692
context: 2
Object
average: 7.67894736842105
context: 3
Object
average: 7.59375623768624
context: 4
feeds_number: 21
error: ""
- WuBook.crossed(params, cback)
retrieves property’s availabilities day by day, from today up to 600 days. All rooms are considered.
<script>
function pcallback(data) {
console.log(data);
}
WuBook.crossed({}, pcallback)
</script>
Days with a value of 1 are those to be crossed (no availability):
{
"crossed_days_map": {
"2021-11-19": 0,
"2021-11-10": 0,
"2021-11-11": 0,
"2021-11-12": 1,
"2021-11-13": 1,
...
}
}
We pretty much covered every aspect of it. Good luck!