Changes

You find [[Category:Booking_Page]][[Category:Booking_Engine]][[Category:Troubleshooting]]<div class="heading">Booking Widgets</div> This page is about the widgets unter menu {{#fas:cog}} (SETTINGS -) BOOKING ENGINE > BOOKING WIDGETS__TOC__

All our The datepicker in the widgets can be customised will display up to suit the style of your websiteone year in advance.

Choose from the menue and use the selector to determine what the widget should link <span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> The widgets require your page tohave UTF-8 language encoding. Depending what you want to show you have the choice of:

'''Room Widgets'''<span style="color:#fe746c;“ >{{#fas:exclamation-for individual rooms showing just this room go to Properties open triangle}} </span> The availability calendar widget only processes data one year in advance. For more future dates the room you want to set up and then go to Widgets. When you use these widgets a guest can only see/book this roomdates show available but are not bookable.

'''Property Widgets'''-for a property showing all == If the rooms in a property go to Properties open the property you want to set up and then go to Widgets. When datepicker is not working or you use these widgets a guest can can see all rooms in this property.do not have JQueryUI ==

'''Association Widgets'''-The widget will attempt to self load jqueryUI, if you are a host with multiple properties this is not working properly or an association showing all properties and rooms in your account. When causing conflicts you use these widgets a guest can see all rooms in all propertiesadd it to your page after the jquery script.

To create the widget, copy the supplied <code from the white box to the place in your page source you want the item to appear><script src="https://ajax. These widgets are samples, you are allowed to modify them as you like to create your own booking links, buttons, forms etcgoogleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code>

To install widgets on your web site you will need the ability to edit the HTML of your page<code><link rel="stylesheet" href="https://ajax. This may involve knowing the passwords for your web server and the ability to transfer your filesgoogleapis. Your web hosting service should be able to provide information and assist you with thiscom/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 prefer our webdesigner 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.  Parameters are: {| class="wikitable"| '''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'''{| class="wikitable"| '''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'''{| class="wikitable"| '''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 === <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 installation 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==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"== If the page does not accept the word Jquery. Exchange it for a small fee$ 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'). Just send us a message via control panel clicking on SUPPORTbookWidget({  propid:75744,  formAction:'https://beds24.com/booking.php',  widgetLang:'en',  widgetType:'BookingStrip' });