Changes

Jump to navigation Jump to search

Category:Widgets

1,329 bytes added, 17:53, 30 July 2020
[[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 {{#fas:cog}} (SETTINGS -> ) BOOKING PAGE-ENGINE >BOOKING WIDGETS''
__TOC__
== Generate a widget using the widget designer ==
*Choose the widget you want to generate.
*Customise the settings you want to adjust.
*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. <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: <code><nowiki><!-- Place this div on your page where you want the widget to show --></nowiki></code>
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} Note: </span> 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.
<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 The widget will attempt to self load jqueryUI, if this is not working properly or causing conflicts you do not have JQueryUI ===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 <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>
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>
== 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 ==
== Advanced functions for developers and web designers ==
=== Parameters === <span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Required skillsSkills''': 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.
|-
| customParamentercustomParameter|| text || adds the pecified 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.
|}
=== Exchange text on labels ===<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Required skillsSkills''': HTML
You can exchange the text on the lables labels of widgets generated to with the widget designer.
1. Generate the widget and click on "Get Code".
5. 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 === <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> = 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 = 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:*[https formAction://beds24.com/control2.php?pagetype=widgetcalendar Availability Calendar]*[https://beds24.com/control2.php?pagetype=widgetstrip Booking Strip]*['https://beds24.com/control2booking.php?pagetype=widgetbox Booking Box]',
== Troubleshooting == '''Booking page does not open the dates and or number of guests selected in the widget widgetLang:'en'' 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. });

Navigation menu