Category:Widgets: Difference between revisions

(22 intermediate revisions by 2 users not shown)

Line 1:

~~[[Category:Settings]]~~

[[Category:Booking_Page]]

[[Category:Booking_Engine]]

[[Category:Troubleshooting]]

<div class="heading">Booking Widgets</div>

Line 6:

Line 7:

__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 21:

Line 22:

<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 ===~~

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

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

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

~~<code> <~~script ~~src="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 jquery script.

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

<code~~><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></code>

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

Line 38:

Line 39:

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

Line 43:

Line 46:

== 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~~

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

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 81:

Line 83:

|-

| ~~customParamenter~~|| text || adds the specified 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.

|-

| customParameter:'br1-xxxx=book || skip directly to checkout page

|-

Line 121:

Line 125:

|-

| minNumNight || integer || minimum number of nights

|-

| noExternalFonts||true false || do not load external fonts

|-

Line 187:

Line 194:

|}

'''Multiple property search only'''

Line 200:

Line 206:

|}

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

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

Line 215:

Line 221:

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

== Embedded Iframe ==

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

=== 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',

~~== 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~~

~~'''Problem installing widgets on 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.

});

@@ Line 1: / Line 1: @@
-[[Category:Settings]]
 [[Category:Booking_Page]]
+[[Category:Booking_Engine]]
 [[Category:Troubleshooting]]
 <div class="heading">Booking Widgets</div>
@@ Line 6: / Line 7: @@
 __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 21: / Line 22: @@
 <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  ===
+<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.
-If you do not have jQuery and jQueryUI installed on your web page add the following to the <head> section of your page.
+== If the datepicker is not working or you do not have JQueryUI  ==
-<code> <script src="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 jquery script.
-=== If you do not have JQueryUI  ===
+<code><script src="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 jquery script.
+<code><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"></code>
-<code><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></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.
@@ Line 38: / Line 39: @@
 <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 ==
@@ Line 43: / Line 46: @@
 == 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
+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
-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 81: / Line 83: @@
 |-
-| customParamenter|| text || adds the specified 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.
+|-
+| customParameter:'br1-xxxx=book || skip directly to checkout page
 |-
@@ Line 121: / Line 125: @@
 |-
 | minNumNight || integer || minimum number of nights
+|-
+| noExternalFonts||true false || do not load external fonts
 |-
@@ Line 187: / Line 194: @@
 |}
 '''Multiple property search only'''
@@ Line 200: / Line 206: @@
 |}
-=== 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 215: / Line 221: @@
 . Paste the amended widget code into the HTML of your web site.
-== Embedded Iframe ==
+=== 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>
+=== 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',
-== 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
- '''Problem installing widgets on 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.
+	});

Category:Widgets: Difference between revisions

Navigation menu

Search