Category:Widgets: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 6: | Line 6: | ||
__TOC__ | __TOC__ | ||
= 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 21: | Line 21: | ||
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> The widgets require your page to have UTF-8 language encoding. | <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 == | |||
If you do not have jQuery and jQueryUI installed on your web page add the following to the <head> section of your page. | If you do not have jQuery and jQueryUI installed on your web page add the following to the <head> section of your page. | ||
| Line 27: | Line 27: | ||
<code> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code> | <code> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code> | ||
== 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. | 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. | ||
| Line 45: | Line 45: | ||
So the date and occupancy parameters are passed to the iFrame, enter your page in the "Redirect URL" parameter | So the date and occupancy parameters are passed to the iFrame, enter your page in the "Redirect URL" parameter | ||
= Advanced functions for developers and web designers = | |||
== Parameters == | |||
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Required Skills''': HTML, CSS | |||
Required | |||
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 200: | Line 199: | ||
|} | |} | ||
== Exchange text on labels == | |||
Required | <span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Required Skills''': HTML | ||
You can exchange the text on the | 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". | 1. Generate the widget and click on "Get Code". | ||
| Line 215: | Line 214: | ||
5. Paste the amended widget code into the HTML of your web site. | 5. Paste the amended widget code into the HTML of your web site. | ||
= Embedded or link to your booking page = | |||
*Code to embed your booking page as an Iframe into your web site can be generated under SETTINGS | *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 IFRAME | ||
*A link to your booking page can be generated under | *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 SETTINGS | *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 SETTINGS | *A button can be generated under {{#fas:cog}} (SETTINGS) BOOKING PAGE > BOOKING WIDGETS > BOOKING BUTTON | ||
*Code for an enquiry form generated under SETTINGS | *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, | |||
formAction:'https://beds24.com/booking.php', | |||
widgetLang:'en', | |||
widgetType:'BookingStrip' | |||
}); | |||