Difference between revisions of "Category:Widgets"
Jump to navigation
Jump to search
Markkinchin (talk | contribs) |
|||
| Line 41: | Line 41: | ||
== Wordpress == | == Wordpress == | ||
If you use the Wordpress Plugin please use [[:Category:Wordpress|these instructions]]. | 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 == | ||
| + | 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 == | == Advanced functions for developers and web designers == | ||
Revision as of 17:22, 19 June 2018
This page is about the menu SETTINGS -> BOOKING PAGE->BOOKING WIDGETS
Contents
1 Generate a widget using the widget designer
- Choose the widget you want to generate.
- Customise the settings you want to adjust.
- Click on "Refresh" to see a preview.
- Click on "Get Code" and copy the provided code snippet.
- 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.
Note: 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: <!-- Place this div on your page where you want the widget to show -->
Note: The widgets require your page to have UTF-8 language encoding.
1.1 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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
1.2 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.
<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>
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.
loadJQueryUI: false,
2 Wordpress
If you use the Wordpress Plugin please use these instructions.
3 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
4 Advanced functions for developers and web designers
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:
| 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 |
| 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 |
| excludeGroup | text | group of properties not to include |
| 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 |
| includeGroup | text | group of properties to include |
| defaultNumChild | number | default number of children |
| defaultNumAdult | default number of adults | |
| 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
| 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
| 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 |
5 Other widgets
- Code to embed your booking page as an Iframe into your web site can be generated under SETTINGS -> BOOKING PAGE->BOOKING WIDGETS->EMBEDDED IFRAME
- 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
- 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
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:
6 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: &numnight=2&numadult=2&advancedays=2
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.
Subcategories
This category has the following 3 subcategories, out of 3 total.
Pages in category "Widgets"
The following 11 pages are in this category, out of 11 total. download this selection of articles as a PDF book
