Changes

<div class="heading">Booking Widgets</div> ''This page is about the menu {{#fas:cog}} (SETTINGS -> ) BOOKING PAGE-ENGINE >BOOKING WIDGETS''

== Generate a widget using the widget designer ==

Note: If you want The datepicker in the widgets will display up to display multiple widgets on one page make sure you to remove the first part of the code for the second widgetyear in advance. Paste the code for the second widget in from this line: <nowiki><!-- Place this div on your page where you want the widget to show --></nowiki>

<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} Note</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: The widgets require <code><nowiki><!-- Place this div on your page where you want the widget to have UTFshow -8 language encoding. -></nowiki></code>

<span style=== If you do not "color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> The widgets require your page to have JQuery ===UTF-8 language encoding.

If you do not have jQuery and jQueryUI installed on your web page add the following to the <headspan style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> section of your pageThe availability calendar widget only processes data one year in advance. For more future dates the dates show available but are not bookable.

== If the datepicker is not working or you do not have JQueryUI <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>=

<code><script src=== If you do not have JQueryUI ==="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code>

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 <code><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery script-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>

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

=== Parameters === <span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Required skillsSkills''': HTML, CSS

| includeGroup defaultNumChild || textnumber || group default number of properties to includechildren

| defaultNumChild defaultNumAdult || || default number of adults |-| group||text | default | opens the booking page for the specified group |-| maxNumNight || integer || maximum number of nights |-| minNumNight || integer || minimum number of childrennights |-| noExternalFonts||true false || do not load external fonts

| defaultNumAdult noGroup|| text || default number of adultsopens the booking page with the specified group removed

== Other = Exchange text on labels === <span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''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 === <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->EMBEDDED IFRAMEGENERATOR*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,

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 widgetLang:*[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]'en',

== Troubleshooting == '''Booking page does not open the dates and or number of guests selected in the widget' widgetType:'BookingStrip' 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 });