Difference between revisions of "Category:Widgets"

From Beds24 Wiki
Jump to navigation Jump to search
Line 2: Line 2:
 
[[Category:Booking_Page_and_Widgets]]
 
[[Category:Booking_Page_and_Widgets]]
 
[[Category:Booking_Page]]
 
[[Category:Booking_Page]]
−
This page is about the menu SETTINGS -> BOOKING PAGE->BOOKING WIDGETS
 
−
The booking widget links your website to your online booking systems [[:Category:Booking Page|Booking Page]] letting your guests see your availabilty and make a booking. You can create your own widget using the link to your booking page or place one of the widgets or availability calendars Beds24 supplies on your website.
 
  
−
You find the widgets unter SETTINGS -> BOOKING WIDGETS
+
''This page is about the menu SETTINGS -> BOOKING PAGE->BOOKING WIDGETS''
 +
__TOC__
 +
The widget designer allow you to create a booking widget which you can embed into the html of your website.
  
−
All our widgets can be customised to suit the style of your website.  
+
== 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 desginer to do this for you.
  
−
You can use multiple widgets on multiple websites, blogs etc.
+
=== 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.
  
−
Choose from the menu and use the selector to determine what the widget should link to. Depending what you want to show you have the choice of:  
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></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>
  
−
'''Room Widgets'''
+
=== Advanced functions for developers and web designers ===
−
*for individual rooms showing just this room go to Properties open the room you want to set up and then go to Widgets. When you use these widgets a guest can only see/book this room.
+
Required skills: HTML, CSS
  
−
'''Property Widgets'''
+
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.  
−
*for a property showing all the rooms in a property go to Properties open the property you want to set up and then go to Widgets. When you use these widgets a guest can can see all rooms in this property.
 
  
−
'''Multiple Property and Agency Widgets'''
+
Parameters are:
−
*if you are a host with multiple properties or an association showing all properties and rooms in your account. When you use these widgets a guest can see all rooms in all properties.
 
  
−
'''Install Widgets on your Web Site'''
+
{| class="wikitable"
 +
| '''Parameter''' || '''Values'''    ||'''Description'''
  
−
To install the widget, copy the supplied code from the white box to the place in your page source you want the item to appear. These widgets are samples, you are allowed to modify them as you like to create your own booking links, buttons, forms etc.
+
|-
 +
| alignment || left right center || alignment of the widget content
 +
|-
 +
| backgroundColor || hex code/any valid CSS|| widget background color
  
−
You will need the ability to edit the HTML of your page. This may involve knowing the passwords for your web server and the ability to transfer your files. Your web hosting service should be able to provide information and assist you with this.
+
|-
 +
| borderColor || hex code/any valid CSS || widget border color
  
−
If you are using '''Wordpress''' you install the Beds24 Wordpress plugin. This will allow you to easily install widgets using shortcodes.
+
|-
 +
| boxShadow || true false|| shadow around the widget
  
−
  Note:
+
|-
−
Your website CSS (e.g. Wordpress theme CSS) might override the CSS for the booking widgets.
+
| buttonBackgroundColor || hex code/any valid CSS || button background color
−
  To fix display problems with of the booking strip try adding
+
 
−
  .b24bookingstrip select{width: auto;}
+
|-
−
  to the custom CSS of your Wordpress page.
+
| 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
 +
 
 +
|-
 +
| numChild || number || default number of children
 +
 
 +
|-
 +
| numAdult || || 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'''
 +
{| 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
 +
|-
 +
 
 +
|}
 +
 
 +
== 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:
 +
*[https://beds24.com/control2.php?pagetype=widgetcalendar Availability Calendar]
 +
*[https://beds24.com/control2.php?pagetype=widgetstrip Booking Strip]
 +
*[https://beds24.com/control2.php?pagetype=widgetbox Booking Box]

Revision as of 16:15, 6 June 2017


This page is about the menu SETTINGS -> BOOKING PAGE->BOOKING WIDGETS

The widget designer allow you to create a booking widget which you can embed into the html of your website.

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 desginer to do this for you.

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

1.2 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
numChild number default number of children
numAdult 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

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

Subcategories

This category has the following 3 subcategories, out of 3 total.

D

L

W

Retrieved from "https://wiki.beds24.com/index.php?title=Category:Widgets&oldid=10397"