This article describes how easy it is to add the mobile website to your own website. With these scripts implemented, guests will automatically be redirected to your mobile website when using a smartphone or tablet .
Index:
- Required scripts
- Advanced option: Disabling browsers
- Booking engine for restaurants (Seatme)
- Using the mobiel booker (Responsive Websites)
- Advanced options: Disabling browsers
Required scripts
There are two versions for placing the mobile website in to your website. We advise you to do this by a specialized developer instead of yourself. The required scripts you need are:
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="http://mwlp.hoteliers.com/lib/js/hoteliersmobile.js"></script>
Basic Setup
A basic set up (most used by hotels) looks like this:
<script type="text/javascript">
hoteliers.mobile({
url : 'http://mwlp.hoteliers.com/nl/hotelname/0008/'
});
</script>
Place the script in the header of your website. From now on visitors with a mobile device will redirect to the mobile version of your website.
Note In the script, ensure to adjust the ID number 0008 to the Hotel ID number you receive from our Support Team and adjust ‘hotelname’ to the name of the hotel
Label setup
A label setup looks like this:
<script type="text/javascript">
hoteliers.mobile({
url : 'http://mwlp.hoteliers.com/nl/hotelname/1234/',
type : 'label',
label : {
position : 'top', // optional: position of label (default: left)
delay : '5000' // optional: delay in milliseconds (default: 3000 = 3 sec.)
}
});
</script>
Label
|
position |
string (top, left, right) |
default : left |
|
delay |
int |
default: 3000 |
Advanced option: Disabling browsers
Sometimes, you only want to show the mobile website for smart phones and not for tablet devices. You can easily choose which browser you want to disable for the mobile interface. If you want to disable the iPad devices, your script will look like this:
Disabling one browser
<script type="text/javascript">
hoteliers.mobile({
url : 'http://mwlp.hoteliers.com/nl/hotelname/1234/',
browsers : { // optional: enable and disable browsers
ipad : false // disables iPad
}
});
</script>
Disabling more browsers
Or if you want to disable more browsers:
<script type="text/javascript">
hoteliers.mobile({
url : 'http://mwlp.hoteliers.com/nl/hotelname/1234/',
browsers : { // optional: enable and disable browsers
ipad : false, // disables iPad
palm_os : false // disables Palm OS
}
});
</script>
Note If you want to disable more than one browser, put a comma after the first 'false' for the browser you want to disable. Otherwise it won’t work.
Browser tags
|
android |
boolean (true, false) |
default : true |
|
avantgo |
boolean (true, false) |
default : true |
|
blackberry |
boolean (true, false) |
default : true |
|
iemobile |
boolean (true, false) |
default : true |
|
iphone |
boolean (true, false) |
default : true |
|
ipod |
boolean (true, false) |
default : true |
|
ipad |
boolean (true, false) |
default : true |
|
opera_mobi |
boolean (true, false) |
default : true |
|
opera_mini |
boolean (true, false) |
default : true |
|
palm_os |
boolean (true, false) |
default : true |
|
psp |
boolean (true, false) |
default : true |
|
symbian |
boolean (true, false) |
default : true |
Using the mobiel booker (Responsive Websites)
When you have a Responsive Website (which adjust automaticly to the screen size of the device) you can use the mobile booking link from the mobile website.
When pushed on the booking button, a function in the hoteliers.js (script of the desktop booking engine) will be triggered. You need to create a check in the function to recognize a mobile device, by looking at the user-agent strings or screen width. If this is the casae, the device should be redirected to the MWLP Booker ( http://mwlp.hoteliers.com/en/HOTEL/ID/book/
Next to this, the JavaScript code (stated beneath) that redirects to the regular Mobile Website needs to be deleted.
<!-- NL -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://mwlp.hoteliers.com/lib/js/hoteliersmobile.js"></script>
<script type="text/javascript">
hoteliers.mobile({
url : 'http://mwlp.hoteliers.com/en/HOTEL/ID/book/',
browsers : { // optional: enable and disable browsers
ipad : false // disables iPad
}
});
</script>Booking engine for restaurants (Seat Me)
It is possible to integrate a booking engine for restaurants in to a page of the mobile website. We recommend to use the engine of Seat Me. You can change the background and height if needed. Put the following link on one of the pages you created in the mobile website:
<iframe src="http://m.seatme.nl/Pages/Detail/Detail.aspx?restaurantID=1871" width="100%" height="530"></iframe>
Comments