Difference between revisions of "Category:Widgets"

From Beds24 Wiki
Jump to navigation Jump to search
 
(46 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
[[Category:Settings]]
+
 
−
[[Category:Booking_Page_and_Widgets]]
 
 
[[Category:Booking_Page]]
 
[[Category:Booking_Page]]
−
 
+
[[Category:Booking_Engine]]
−
  ''This page is about the menu SETTINGS -> BOOKING PAGE->BOOKING WIDGETS''
+
[[Category:Troubleshooting]]
 +
<div class="heading">Booking Widgets</div>
 +
  This page is about the menu {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > BOOKING WIDGETS
 
__TOC__
 
__TOC__
  
−
== Generate a widget using the widget designer ==
+
= Generate a widget using the widget designer =
 
*Choose the widget you want to generate.  
 
*Choose the widget you want to generate.  
 
*Customise the settings you want to adjust.  
 
*Customise the settings you want to adjust.  
Line 13: 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.
 
*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>
 
  
−
=== If you do not have JQuery ===
+
<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>
  
−
If you do not have jQuery and jQueryUI installed on your web page add the following to the <head> section of your page.
+
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span>   The widgets require your page to have UTF-8 language encoding.  
  
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> The availability calendar widget only processes data one year in advance. For more future dates the dates show available but are not bookable.  
−
<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>
 
  
−
=== Advanced functions for developers and web designers ===
+
== If the datepicker is not working or you do not have JQueryUI  ==
−
Required skills: HTML, CSS
+
 
 +
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>
 +
 
 +
<code> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script></code>
 +
 
 +
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.
 +
 
 +
<code> loadJQueryUI: false,</code>
 +
 
 +
If you are required to be GDPR complaint you may need to download and self host thess libraries, if so disable self loading, download the libraries to your server and change the links accordingly.
 +
 
 +
== 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 ==
 +
If you want to transport dates and number of guests from the widget to the booking page please follow these[[Embedded_Iframe#How_to_reliably_transfer_dates_and_other_data_from_a_booking_widget_on_one_page_to_a_booking_page_embedded_in_an_Frame_on_a_different_page| instructions]].
 +
 
 +
== Advanced functions for developers and web designers ==
 +
=== Parameters ===  
 +
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  '''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.  
 
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 53: Line 78:
 
|-
 
|-
 
| buttonTitle || text || button text
 
| buttonTitle || text || button text
 +
 
|-
 
|-
 
| color || hex code/any valid CSS || text color
 
| 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.
 +
 +
|-
 +
| customParameter:'br1-xxxx=book || skip directly to checkout page
  
 
|-
 
|-
Line 70: Line 102:
 
|-
 
|-
 
| defaultNumNight|| number 0 = today|| preselection for the number ob booked nights
 
| defaultNumNight|| number 0 = today|| preselection for the number ob booked nights
−
 
−
|-
 
−
| excludeGroup || text  || group of properties not to include
 
  
 
|-
 
|-
Line 83: Line 112:
  
 
|-
 
|-
−
| includeGroup || text|| group of properties to include
+
| 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
  
 
|-
 
|-
−
| defaultNumChild || number || default number of children
+
| noExternalFonts||true false || do not load external fonts
  
 
|-
 
|-
−
| defaultNumAdult || || default number of adults
+
| noGroup||text || opens the booking page with the specified group removed
  
 
|-
 
|-
Line 153: Line 194:
  
 
|}
 
|}
−
 
  
 
'''Multiple property search only'''
 
'''Multiple property search only'''
Line 166: Line 206:
 
|}
 
|}
  
−
== Other widgets ==
+
===  Exchange text on labels ===
−
*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
−
*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
+
You can exchange the text on the labels of widgets generated to with the widget designer.
−
*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
+
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 ===
 +
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  '''Required Skills''': HTML, CSS
 +
 
 +
Add the following CSS to your websites style sheet
 +
 
 +
<code>.ui-datepicker{display: none;}</code>
 +
 
 +
=== Adjust widgets for RTL languages (Arabic, Hebrew) ===
 +
You need to use CSS to adjust the alignment.
 +
 
 +
Example: To adjust the booking box dd the following CSS to your websites style sheet
 +
 
 +
<code>.book-widget label {float: right !important;} .book-container .book-row .book-col-offset-5 {margin-left: 0;}</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
 +
 
 +
==Skip to Checkout Page==
 +
You can  bypass the booking page and redirect the widget directly to the checkout page by adding this parameter
 +
 
 +
<code>customParameter:'br1-xxxx=book'</code>
 +
 
 +
to the widget.
 +
 
 +
Replace xxxx with the room ID of the room you want to populate.
 +
 
 +
= Troubleshooting =
 +
==Booking page does not open the dates and or number of guests selected in the widget==
 +
Use these [[Embedded_Iframe#How_to_reliably_transfer_dates_and_other_data_from_a_booking_widget_on_one_page_to_a_booking_page_embedded_in_an_Frame_on_a_different_page|instructions]] if you want to pass the guests selection on to the booking page.
 +
 
 +
==Problem installing widgets on Wix==
 +
Unlike almost all other website builders 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"==
 +
 
 +
If the page does not accept the word Jquery. Exchange it for a $ symbol as follows:
 +
 
 +
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',
  
−
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:
+
widgetType:'BookingStrip'
−
*[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]
 

Latest revision as of 08:02, 1 May 2024

Booking Widgets
This page is about the menu  (SETTINGS)  BOOKING ENGINE > BOOKING WIDGETS

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

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:

<!-- Place this div on your page where you want the widget to show -->

The widgets require your page to have UTF-8 language encoding.

The availability calendar widget only processes data one year in advance. For more future dates the dates show available but are not bookable.

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

If you are required to be GDPR complaint you may need to download and self host thess libraries, if so disable self loading, download the libraries to your server and change the links accordingly.

1.2 Wordpress

If you use the Wordpress Plugin please use these instructions.

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

If you want to transport dates and number of guests from the widget to the booking page please follow these instructions.

1.4 Advanced functions for developers and web designers

1.4.1 Parameters

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.
customParameter:'br1-xxxx=book skip directly to checkout 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
noExternalFonts true false do not load external fonts
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

1.4.2 Exchange text on labels

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.

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

Required Skills: HTML, CSS

Add the following CSS to your websites style sheet

.ui-datepicker{display: none;}

1.4.4 Adjust widgets for RTL languages (Arabic, Hebrew)

You need to use CSS to adjust the alignment.

Example: To adjust the booking box dd the following CSS to your websites style sheet

.book-widget label {float: right !important;} .book-container .book-row .book-col-offset-5 {margin-left: 0;}

2 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 (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > IFRAME GENERATOR
  • 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
  • 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

2.1 Skip to Checkout Page

You can bypass the booking page and redirect the widget directly to the checkout page by adding this parameter

customParameter:'br1-xxxx=book'

to the widget.

Replace xxxx with the room ID of the room you want to populate.

3 Troubleshooting

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

Use these instructions if you want to pass the guests selection on to the booking page.

3.2 Problem installing widgets on Wix

Unlike almost all other website builders 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.

3.3 Console Error "bookWidget is not a function"

If the page does not accept the word Jquery. Exchange it for a $ symbol as follows:

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' });

Subcategories

This category has the following 3 subcategories, out of 3 total.

D

L

W

Retrieved from "https://wiki.beds24.com/index.php?title=Category:Widgets&oldid=25064"