Revision as of 15:53, 30 July 2020

Booking Widgets

This page is about the menu {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > BOOKING WIDGETS

Generate a widget using the widget designer

Choose the widget you want to generate.
Customise the settings you want to adjust.
Click on "Refresh" to see a preview.
Click on "Get Code" and copy the provided code snippet.
Go go the page on your web site where you want to add the widget and paste it into the HTML. If you do not know how to do this check the help for the CMS or sitebuilder you are using how to add HTML to your site or ask your web designer to do this for you.

The datepicker in the widgets will display up to one year in advance.

{{#fas:exclamation-triangle}} If you want to display multiple widgets on one page make sure you to remove the first part of the code for the second widget. Paste the code for the second widget in from this line:

{{#fas:exclamation-triangle}} The widgets require your page to have UTF-8 language encoding.

If you do not have JQuery

If you do not have jQuery and jQueryUI installed on your web page add the following to the <head> section of your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

If the datepicker is not working or you do not have JQueryUI

The widget will attempt to self load jqueryUI, if this is not working properly or causing conflicts you can add it to your page after the jquery script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

If you want to optimize the loading sizes, it should be enough just to load the JQueryUI datepicker modules.

The widget can be forced to not attempt to load it's own JQueryUI by setting the following parameter.

loadJQueryUI: false,

Wordpress

If you use the Wordpress Plugin please use these instructions.

Opening a page on your site containing the booking page in an iFrame

So the date and occupancy parameters are passed to the iFrame, enter your page in the "Redirect URL" parameter

Advanced functions for developers and web designers

Parameters

{{#fas:lightbulb}} Required Skills: HTML, CSS

You can manually set parameters and apply your own CSS. If you want to apply your own CSS use developer tools to identify the classes in the widget.

Parameters are:

Parameter	Values	Description
alignment	left right center	alignment of the widget content
backgroundColor	hex code/any valid CSS	widget background color
borderColor	hex code/any valid CSS	widget border color
boxShadow	true false	shadow around the widget
buttonBackgroundColor	hex code/any valid CSS	button background color
buttonColor	hex code/any valid CSS	button text color
buttonTitle	text	button text
color	hex code/any valid CSS	text color
customParameter	text	adds the specified information to the URL of the booking page. Example: customParameter:'hideroom=12345', will hide the room with the ID 12345 from the booking page.
dateFormat	refer to http://api.jqueryui.com/datepicker	formate of displayed dates
dateSelection	0 = check-in only 1= check in and check out 2 = check in and number of nights 3 = check in and check out and number of nights	type of date selection
dayNamesMin	["SO", "MO", "DI", "MI", "DO", "FR", "SA"]	headings for the days of week
defaultNightsAdvance	number 0 = today	how many days in advance are shown
defaultNumNight	number 0 = today	preselection for the number ob booked nights
fontSize	px percentage	text size
formAction	text	text for the action parameter of the form
formTarget	valid HTML	text for the target parameter of the form
defaultNumChild	number	default number of children
defaultNumAdult		default number of adults
group	text	opens the booking page for the specified group
maxNumNight	integer	maximum number of nights
minNumNight	integer	minimum number of nights
noGroup	text	opens the booking page with the specified group removed
ownerid	id number of owner.	The page will open showing all properties and rooms for this owner
peopleSelection	0 = none 1 = guests 2= adults and children	selection number of guests
propid	id number of property.	The page will open showing this property
referer	text	this text will be recorded with any bookings originating from this widget allowing tracking of booking sources
roomid	id number of room	The page will open showing this room
showLabels	true false	display of labels
weekFirstDay	0 = Sunday 1 = Monday 2 = Tuesday 3 = Wednesday 4 = Thursday 5 = Friday 6 = Saturday	first day of the week
widgetLang	language parameter as shown here: [[Developers]	languages
widgetTitle	text	title of the widget
widgetType	BookingBox BookingBoxMini BookingStrip AvailabilityCalendar	type of widget
width	px percentage	width of the widget

Availability Calendar only

Parameter	Values	Description
availableBackgroundColor	hex code/any valid CSS	background color of available dates
availableColor	hex code/any valid CSS	text color of available dates
numMonth	number	number of calendars
pastBackbroundColor	hex code/any valid CSS	background color of past dates
pastColor	hex code/any valid CSS	text color of past dates
requestBackgroundColor	hex code/any valid CSS	background color of request dates
requestColor	hex code/any valid CSS	text color of request dates
unavailableBackgroundColor	hex code/any valid CSS	background color of unavailable dates
unavailableColor	hex code/any valid CSS	text color of unavailable dates

Multiple property search only

Parameter	Values	Description
searchShow	hide, show	Seach criteria open with link or are always visible
searchLinkText	text	Text of the link which opens the search criteria

Exchange text on labels

{{#fas:lightbulb}} Required Skills: HTML

You can exchange the text on the labels of widgets generated to with the widget designer.

1. Generate the widget and click on "Get Code".

2. Download the Javascript from the widget code (https://media.xmlcal.com/widget/1.00/js/bookWidget.min.js). Seach for the label you want to change. Change the text and save the Javascript file.

3. Upload the changed Javascript file to your web space.

4. Change the link to the Javascript in your widget code to use the Javascript from your own web space.

5. Paste the amended widget code into the HTML of your web site.

Hide dates which are not in the month from availability calendar widget

{{#fas:lightbulb}} Required Skills: HTML, CSS

Add the following CSS to your websites style sheet

.ui-datepicker{display: none;}

Embedded Iframe or link to your booking page

Code to embed your booking page as an Iframe into your web site can be generated under {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > IFRAME GENERATOR
A link to your booking page can be generated under {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > LINKS
An URL linking to your booking page can be generated under {{#fas:cog}} (SETTINGS) BOOKING PAGE >BOOKING WIDGETS > QUICK URL
A button can be generated under {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > BOOKING BUTTON
Code for an enquiry form generated under {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > ENQUIRY FORM

Troubleshooting

Booking page does not open the dates and or number of guests selected in the widget

You are defining these parameters in the URL in the embedded Iframe. Remove these parameters from the Iframe URL: &numnight=2&numadult=2&advancedays=2

Problem installing widgets on Wix

Other than almost all other web sites Wix does not support JQuery. You will need to check with Wix if they allow you to add JQuery to your page. If Wix will not allow you to add JQuery you can use a button, links or our legacy widgets. The legacy widgets are available via SETTINGS-BOOKING PAGE-WIDGETS-BOOKING BUTTON.

Console Error "bookWidget is not a function"

It seem the page does not accept the word Jquery. Exchange this:

jQuery(document).ready(function() {

jQuery('#bookWidget-44005-75744-0-1589444240').bookWidget({

propid:75744,

formAction:'https://beds24.com/booking.php',

widgetLang:'en',

widgetType:'BookingStrip' });

with this:

$(document).ready(function() {

$('#bookWidget-44005-75744-0-1589444240').bookWidget({

propid:75744,

formAction:'https://beds24.com/booking.php',

widgetLang:'en',

widgetType:'BookingStrip' });

This category currently contains no pages or media.

@@ Line 1: / Line 1: @@
 [[Category:Settings]]
-[[Category:Booking_Page_and_Widgets]]
 [[Category:Booking_Page]]
+[[Category:Booking_Engine]]
 [[Category:Troubleshooting]]
+<div class="heading">Booking Widgets</div>
-  ''This page is about the menu SETTINGS -> BOOKING PAGE->BOOKING WIDGETS''
+  This page is about the menu {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > BOOKING WIDGETS
 __TOC__
-== Generate a widget using the widget designer ==
+= Generate a widget using the widget designer =
 *Choose the widget you want to generate.
 *Customise the settings you want to adjust.
@@ Line 14: / Line 14: @@
 *Go go the page on your web site where you want to add the widget and paste it into the HTML. If you do not know how to do this check the help for the CMS or sitebuilder you are using how to add HTML to your site or ask your web designer to do this for you.
-  Note: If you want to display multiple widgets on one page make sure you to remove the first part of the code for the second widget.  Paste the code for the second widget in from this line:
+The datepicker in the widgets will display up to one year in advance.
-  <nowiki><!-- Place this div on your page where you want the widget to show --></nowiki>
+<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span>   If you want to display multiple widgets on one page make sure you to remove the first part of the code for the second widget.  Paste the code for the second widget in from this line:
+<code><nowiki><!-- Place this div on your page where you want the widget to show --></nowiki></code>
-  Note: The widgets require your page to have UTF-8 language encoding.
+<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span>   The widgets require your page to have UTF-8 language encoding.
-=== If you do not have JQuery  ===
+== If you do not have JQuery  ==
 If you do not have jQuery and jQueryUI installed on your web page add the following to the <head> section of your page.
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<code> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code>
+== If the datepicker is not working or you do not have JQueryUI  ==
-=== If you do not have JQueryUI  ===
+The widget will attempt to self load jqueryUI, if this is not working properly or causing conflicts you can add it to your page after the jquery script.
-The widget will attempt to self load jqueryUI, if this is not working properly or causing conflicts you can add it to your page after the jquery script.
+<code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code>
+<code><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"></code>
- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+<code> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script></code>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 If you want to optimize the loading sizes, it should be enough just to load the JQueryUI datepicker modules.
@@ Line 37: / Line 42: @@
 The widget can be forced to not attempt to load it's own JQueryUI by setting the following parameter.
- loadJQueryUI: false,
+<code> loadJQueryUI: false,</code>
 == Wordpress ==
 If you use the Wordpress Plugin please use [[:Category:Wordpress|these instructions]].
 == Opening a page on your site containing the booking page in an iFrame ==
@@ Line 48: / Line 51: @@
 == Advanced functions for developers and web designers ==
 === Parameters ===
+<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  '''Required Skills''': HTML, CSS
-Required skills: HTML, CSS
 You can manually set parameters and apply your own CSS. If you want to apply your own CSS use developer tools to identify the classes in the widget.
@@ Line 83: / Line 85: @@
 |-
-| customParamenter|| text || adds the pecified information to the URL of the booking page
+| customParameter|| text || adds the specified information to the URL of the booking page. Example: customParameter:'hideroom=12345', will hide the room with the ID 12345 from the booking page.
@@ Line 202: / Line 204: @@
 |}
-=== Exchange text on labels ===
+===  Exchange text on labels ===
-Required skills: HTML
+<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  '''Required Skills''': HTML
-You can exchange the text on the lables of widgets generated to with the widget designer.
+You can exchange the text on the labels of widgets generated to with the widget designer.
 . Generate the widget and click on "Get Code".
@@ Line 217: / Line 219: @@
 . Paste the amended widget code into the HTML of your web site.
-== Other widgets ==
+=== Hide dates which are not in the month from availability calendar widget ===
-*Code to  embed your booking page as an Iframe into your web site can be generated under  SETTINGS -> BOOKING PAGE->BOOKING WIDGETS->EMBEDDED IFRAME
+<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  '''Required Skills''': HTML, CSS
-*A link  to your booking page can be generated under  SETTINGS -> BOOKING PAGE->BOOKING WIDGETS->LINKS
-*An URL linking to your booking page can be generated under  SETTINGS -> BOOKING PAGE->BOOKING WIDGETS->QUICK URL
+Add the following CSS to your websites style sheet
-*A button can be generated under  SETTINGS -> BOOKING PAGE->BOOKING WIDGETS->BOOKING BUTTON
-*Code for an enquiry form generated under  SETTINGS -> BOOKING PAGE->BOOKING WIDGETS->ENQUIRY FORM
+<code>.ui-datepicker{display: none;}</code>
+= Embedded Iframe or link to your booking page =
+*Code to  embed your booking page as an Iframe into your web site can be generated under  {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > IFRAME GENERATOR
+*A link  to your booking page can be generated under   {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > LINKS
+*An URL linking to your booking page can be generated under  {{#fas:cog}} (SETTINGS) BOOKING PAGE >BOOKING WIDGETS > QUICK URL
+*A button can be generated under  {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > BOOKING BUTTON
+*Code for an enquiry form generated under  {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > ENQUIRY FORM
+= Troubleshooting =
+==Booking page does not open the dates and or number of guests selected in the widget==
+You are defining these parameters in the URL in the embedded Iframe. Remove these parameters from the Iframe URL: <code> &numnight=2&numadult=2&advancedays=2</code>
+==Problem installing widgets on Wix==
+Other than almost all other web sites Wix does not support JQuery. You will need to check with Wix if they allow you to add JQuery to your page. If Wix will not allow you to add JQuery you can use a button, links or our legacy widgets. The legacy widgets are available via SETTINGS-BOOKING PAGE-WIDGETS-BOOKING BUTTON.
+==Console Error "bookWidget is not a function"==
+It seem the page does not accept the word Jquery. Exchange this:
+jQuery(document).ready(function() {
+	jQuery('#bookWidget-44005-75744-0-1589444240').bookWidget({
+		propid:75744,
+		formAction:'https://beds24.com/booking.php',
+		widgetLang:'en',
+		widgetType:'BookingStrip'
+	});
+with this:
+$(document).ready(function() {
+	$('#bookWidget-44005-75744-0-1589444240').bookWidget({
+		propid:75744,
-Previous versions of the widgets are not supported any longer. If you want to use old versions you can access the menu pages via these links:
+		formAction:'https://beds24.com/booking.php',
-*[https://beds24.com/control2.php?pagetype=widgetcalendar Availability Calendar]
-*[https://beds24.com/control2.php?pagetype=widgetstrip Booking Strip]
-*[https://beds24.com/control2.php?pagetype=widgetbox Booking Box]
-== Troubleshooting ==
+		widgetLang:'en',
- '''Booking page does not open the dates and or number of guests selected in the widget'''
- You are defining these parameters in the URL in the embedded Iframe. Remove these parameters from the Iframe URL: &numnight=2&numadult=2&advancedays=2
- '''Wix'''
+		widgetType:'BookingStrip'
- Other than almost all other web sites Wix does not support JQuery. You will need to check with Wix if they allow you to add JQuery to your page. If Wix will not allow you to add JQuery you can use a button, links or our legacy widgets. The legacy widgets are available via SETTINGS-BOOKING PAGE-WIDGETS-BOOKING BUTTON.
+	});

Difference between revisions of "Category:Widgets"

Revision as of 15:53, 30 July 2020

Contents

Generate a widget using the widget designer

If you do not have JQuery

If the datepicker is not working or you do not have JQueryUI

Wordpress

Opening a page on your site containing the booking page in an iFrame

Advanced functions for developers and web designers

Parameters

Exchange text on labels

Hide dates which are not in the month from availability calendar widget

Embedded Iframe or link to your booking page

Troubleshooting

Booking page does not open the dates and or number of guests selected in the widget

Problem installing widgets on Wix

Console Error "bookWidget is not a function"

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Tools