Make Your Own Booking Widget - Revision history

Annette at 11:24, 9 September 2020

2020-09-09T11:24:08Z

← Older revision		Revision as of 11:24, 9 September 2020
Line 26:		Line 26:
	A basic HTML FORM can be created like this		A basic HTML FORM can be created like this

	<FORM METHOD="POST" ACTION="https://~~www.~~beds24.com/booking2.php">		<FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
	<input type="hidden" name="propid" value="2035">		<input type="hidden" name="propid" value="2035">
	<input type="submit" value="Book Now">		<input type="submit" value="Book Now">
Line 44:		Line 44:
	It is possible using jQuery or javascript to keep the select options up-to-date with the current month/year but that is beyond the scope of this How To.		It is possible using jQuery or javascript to keep the select options up-to-date with the current month/year but that is beyond the scope of this How To.

	<FORM METHOD="POST" ACTION="https://~~www.~~beds24.com/booking2.php">		<FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
	<select name='fdate_date'>		<select name='fdate_date'>
	<option value='1'>1</option>		<option value='1'>1</option>
Line 113:		Line 113:
	We can add selectors for the length of stay and number of guests as follows		We can add selectors for the length of stay and number of guests as follows

	<FORM METHOD="POST" ACTION="https://~~www.~~beds24.com/booking2.php">		<FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
	<select name='fdate_date'>		<select name='fdate_date'>
	<option value='1'>1</option>		<option value='1'>1</option>
Line 245:		Line 245:
	4. Paste the code into the source code of your web site		4. Paste the code into the source code of your web site

	<nowiki><div style="color: #2f2f2f; font-size:14px; width: 100%; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #339900; background: -moz-linear-gradient(top, #66cc00, #339900); background: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#339900)); background: -webkit-linear-gradient(top, #66cc00, #339900); background: -o-linear-gradient(top, #66cc00, #339900); background: linear-gradient(top, #66cc00, #339900); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#339900');" class="b24bookingstrip"><form method='GET' target='_blank' action='https://~~www.~~beds24.com/booking.php' style='margin:0; padding:0;'><span style='padding-right: 10px; display: inline-block;'><a style='color: #2f2f2f;text-decoration:none;' target='_blank' href='https://~~www.~~beds24.com/booking.php?propid=3103&page=getdates&type=0&referer=BookingStrip'></a></span><span style='display: inline-block; padding-right: 10px;'>		<nowiki><div style="color: #2f2f2f; font-size:14px; width: 100%; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #339900; background: -moz-linear-gradient(top, #66cc00, #339900); background: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#339900)); background: -webkit-linear-gradient(top, #66cc00, #339900); background: -o-linear-gradient(top, #66cc00, #339900); background: linear-gradient(top, #66cc00, #339900); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#339900');" class="b24bookingstrip"><form method='GET' target='_blank' action='https://beds24.com/booking.php' style='margin:0; padding:0;'><span style='padding-right: 10px; display: inline-block;'><a style='color: #2f2f2f;text-decoration:none;' target='_blank' href='https://beds24.com/booking.php?propid=3103&page=getdates&type=0&referer=BookingStrip'></a></span><span style='display: inline-block; padding-right: 10px;'>
	<select id='fdate550775_date_propid3103' name='fdate_date' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f'<option value='1'>1</option><br></select>		<select id='fdate550775_date_propid3103' name='fdate_date' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f'<option value='1'>1</option><br></select>
	<select id='fdate550775_monthyear_propid3103' name='fdate_monthyear' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>		<select id='fdate550775_monthyear_propid3103' name='fdate_monthyear' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>
Line 264:		Line 264:
	Create a URL like this:		Create a URL like this:

	https://~~www.~~beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book		https://beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book

	You need to define:		You need to define:

Annette at 14:14, 18 June 2020

2020-06-18T14:14:18Z

← Older revision		Revision as of 14:14, 18 June 2020
Line 4:		Line 4:
	[[Category:Developers]]		[[Category:Developers]]
	[[Category:Widgets]]		[[Category:Widgets]]
	This page explains how to create your own booking widget		<div class="heading">Create a custom booking widget</div>
			This page explains how to create your own booking widget

	<div class="warning">{{#fas:exclamation-triangle}} Check the options the widget designer {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS first. </div>		<div class="warning">{{#fas:exclamation-triangle}} Check the options the widget designer {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS first. </div>
	__TOC__		__TOC__

	'''~~Requires:~~''' Basic understanding of HTML		<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Required Skills''': Basic understanding of HTML
	== Introduction ==		== Introduction ==
	Making your own booking widget is not hard. It only involves opening the booking page and optionally passing some information to it.		Making your own booking widget is not hard. It only involves opening the booking page and optionally passing some information to it.

Annette at 14:13, 18 June 2020

2020-06-18T14:13:31Z

← Older revision		Revision as of 14:13, 18 June 2020
Line 4:		Line 4:
	[[Category:Developers]]		[[Category:Developers]]
	[[Category:Widgets]]		[[Category:Widgets]]
			This page explains how to create your own booking widget

			<div class="warning">{{#fas:exclamation-triangle}} Check the options the widget designer {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS first. </div>
	__TOC__		__TOC__
	~~''This page explains how to create your own booking widget''~~
	'''Requires:''' Basic understanding of HTML		'''Requires:''' Basic understanding of HTML

	== Introduction ==		== Introduction ==
	Making your own booking widget is not hard. It only involves opening the booking page and optionally passing some information to it.		Making your own booking widget is not hard. It only involves opening the booking page and optionally passing some information to it.
Line 13:		Line 15:
	Common ways to open the booking page are using an HTML <A> link or using a <FORM> with selectors and inputs.		Common ways to open the booking page are using an HTML <A> link or using a <FORM> with selectors and inputs.

	We will only focus on the technical aspects of getting the form to submit information, we will not show any styling, labels, ~~javascript~~ and CSS, that is completely up to you to create any style you need.		We will only focus on the technical aspects of getting the form to submit information, we will not show any styling, labels, Javascript and CSS, that is completely up to you to create any style you need.

	Modify to suit and paste the samples into your web page.		Modify to suit and paste the samples into your web page.

Annette at 10:18, 24 January 2020

2020-01-24T10:18:52Z

← Older revision		Revision as of 10:18, 24 January 2020
Line 277:		Line 277:
	== Redirect to your own property landing page ==		== Redirect to your own property landing page ==

	You can do this with the menu ~~Settings~~ > ~~Properties~~ > ~~Link~~		You can do this with the menu SETTINGS->BOOKING ENGINE->BEHAVIOUR.

	Set "Booking Redirect" = Immediately		Set "Booking Redirect" = Immediately

	Set "Booking Redirect Url" = your landing page for the property. The landing page can contain can iframe with the property booking page. If you do have an Iframe embedded make sure you do not set the number of nights or people in the URL.		Set "Booking Redirect Url" = your landing page for the property. The landing page can contain can iframe with the property booking page. If you do have an Iframe embedded make sure you do not set the number of nights or people in the URL.

Annette: /* Redirect to your own property landing page */

2017-08-30T16:13:41Z

Redirect to your own property landing page

← Older revision		Revision as of 16:13, 30 August 2017
Line 281:		Line 281:
	Set "Booking Redirect" = Immediately		Set "Booking Redirect" = Immediately

	Set "Booking Redirect Url" = your landing page for the property. The landing page can contain an iframe with the property booking page.		Set "Booking Redirect Url" = your landing page for the property. The landing page can contain can iframe with the property booking page. If you do have an Iframe embedded make sure you do not set the number of nights or people in the URL.

Annette at 09:20, 7 November 2016

2016-11-07T09:20:33Z

← Older revision		Revision as of 09:20, 7 November 2016
Line 3:		Line 3:
	[[Category:How to]]		[[Category:How to]]
	[[Category:Developers]]		[[Category:Developers]]
			[[Category:Widgets]]
	__TOC__		__TOC__
	''This page explains how to create your own booking widget''		''This page explains how to create your own booking widget''

Markkinchin at 12:43, 21 March 2016

2016-03-21T12:43:21Z

← Older revision		Revision as of 12:43, 21 March 2016
Line 273:		Line 273:

	5) br1-32906=Book where "br1 is offer 1, br2 is offer 2 etc. and 32906 is the room to book.		5) br1-32906=Book where "br1 is offer 1, br2 is offer 2 etc. and 32906 is the room to book.

			== Redirect to your own property landing page ==

			You can do this with the menu Settings > Properties > Link

			Set "Booking Redirect" = Immediately

			Set "Booking Redirect Url" = your landing page for the property. The landing page can contain an iframe with the property booking page.

Annette at 13:07, 3 December 2015

2015-12-03T13:07:40Z

@@ Line 3: / Line 3: @@
 [[Category:How to]]
 [[Category:Developers]]
+__TOC__
   ''This page explains how to create your own booking widget''
 '''Requires:'''  Basic understanding  of HTML
@@ Line 16: / Line 16: @@
 Modify to suit and paste the samples into your web page.
 '''Create a Form'''
@@ Line 255: / Line 256: @@
 [[Image:Custom-Widget5.png|600px|link=]]
 [[Media:Custom-Widget5.png|view large]]

Annette at 14:36, 20 July 2015

2015-07-20T14:36:34Z

← Older revision		Revision as of 14:36, 20 July 2015
Line 2:		Line 2:
	[[Category:Booking Page]]		[[Category:Booking Page]]
	[[Category:How to]]		[[Category:How to]]
			[[Category:Developers]]

	''This page explains how to create your own booking widget''		''This page explains how to create your own booking widget''

Annette at 07:48, 28 April 2015

2015-04-28T07:48:44Z

← Older revision		Revision as of 07:48, 28 April 2015
Line 231:		Line 231:

	3. Customise the content of the selects to only contain the dates you want to offer. In this example is for a booking strip for December 1st 2015 3 nights.		3. Customise the content of the selects to only contain the dates you want to offer. In this example is for a booking strip for December 1st 2015 3 nights.
			You can also use a the [[Special_Rate_for_Agents_or_Referer\|referer functions]] to apply special prices. Look for the referer in the widget code (in this example referer=BookingStrip) and replace it with your custom [[Special_Rate_for_Agents_or_Referer\|referer code]].

	[[Image:Custom-Widget2.png\|600px\|link=]]		[[Image:Custom-Widget2.png\|600px\|link=]]
	[[Media:Custom-Widget2.png\|view large]]		[[Media:Custom-Widget2.png\|view large]]


	4. Paste the code into the source code of your web site		4. Paste the code into the source code of your web site