Adaptive Booking Page (Depreciated) - Revision history

Annette: Annette moved page Adaptive Booking Page to Adaptive Booking Page (Depreciated)

2022-12-15T09:19:55Z

Annette moved page Adaptive Booking Page to Adaptive Booking Page (Depreciated)

← Older revision	Revision as of 09:19, 15 December 2022
(No difference)

Annette at 14:20, 18 June 2020

2020-06-18T14:20:28Z

← Older revision		Revision as of 14:20, 18 June 2020
Line 7:		Line 7:

	== LAYOUT - general layout ==		== LAYOUT - general layout ==
	SETTINGS ~~-> BBOOKING~~ ENGINE -> BOOKING PAGE ->LAYOUT		{{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT

	[[File:example.jpg]]		[[File:example.jpg]]
Line 14:		Line 14:

	== Customise Design, Colours and fonts ==		== Customise Design, Colours and fonts ==
	SETTINGS ->BOOKING ENGINE -> BOOKING PAGE ->STYLE		{{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > STYLE

	[[File:bookingpage1.png]]		[[File:bookingpage1.png]]
Line 21:		Line 21:

	== Content ==		== Content ==
	*Add pictures and information for rooms (5) in SETTINGS -> BOOKING ENGINE -> BOOKING PAGE -> CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING ENGINE -> PICTURES		*Add pictures and information for rooms (5) in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING ENGINE -> PICTURES
	*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS ->BOOKING ENGINE -> BOOKING PAGE -> CONTENT		*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > CONTENT
	*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)		*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)

Line 31:		Line 31:
	== Further and Advanced Options ==		== Further and Advanced Options ==
	*Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES		*Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES
	*Customise Information your guest enters when booking / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS		*Customise Information your guest enters when booking {{#fas:cog}} (SETTINGS) PROPERTIES > BOOKING QUESTIONS
	*Customise Confirmation Messages / SETTINGS ~~-> PROPERTIES -~~> CONFIRMATION MESSAGES		*Customise Confirmation Messages / {{#fas:cog}} (SETTINGS) GUEST MANAGEMENT > CONFIRMATION MESSAGES
	*Set order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP "Availability" and set the ''Sell Priority'' for each room.		*Set order in which rooms appear on your booking page {{#fas:cog}} (SETTINGS) PROPERTIES > ROOMS > SETUP "Availability" and set the ''Sell Priority'' for each room.
	*[[Let Guests View and Cancel Bookings]]		*[[Let Guests View and Cancel Bookings]]
	*Developers please also refer [[developers\|here]]		*Developers please also refer [[developers\|here]]
Line 39:		Line 39:
	== Change Default Text==		== Change Default Text==

	1. You can exchange any of the default text on the booking page in SETTINGS -> BOOKING ~~ENGINE -~~> DEVELOPERS -> "Custom Text"		1. You can exchange any of the default text on the booking page in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS -> "Custom Text"


	2. Stripe and Paymill insert their button and can not be changed. To change the text of any of the other payment buttons you can place this code snippet into SETTINGS -> DEVELOPERS -> "Advanced HTML Settings".		2. Stripe and Paymill insert their button and can not be changed. To change the text of any of the other payment buttons you can place this code snippet into {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS "Advanced HTML Settings".

	Custom Instruction:		Custom Instruction:
Line 61:		Line 61:
	== Hide "Book Multiple" ==		== Hide "Book Multiple" ==

	Use the selector in SETTINGS-> BOOKING ENGINE -> BOOKING PAGE->LAYOUT		Use the selector in S {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT

	== Hover Text ==		== Hover Text ==
	*To not show the number or rooms/units left place the following code in the SETTINGS->BOOKING ~~ENGINE-~~> DEVELOPERS "Custom CSS" setting.		*To not show the number or rooms/units left place the following code in the {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS "Custom CSS" setting.
	.ptdaynumavail {display:none;}		.ptdaynumavail {display:none;}

	*To disable the hover text place the following script in the SETTINGS->BOOKING ~~ENGINE-~~> DEVELOPERS "Advanced HTML Settings" setting.		*To disable the hover text place the following script in the {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS "Advanced HTML Settings" setting.

	<pre>		<pre>
Line 84:		Line 84:
	== Change CS' ==		== Change CS' ==

	Webdesigners use CSS to define the look and formatting of a website. Here a list of common ~~adjustmens~~ which can be done pasting the code provided below into SETTINGS -> BOOKING ~~ENGINE -~~> ~~DEVELOPERS~~.		Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustments which can be done pasting the code provided below into {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > .

Annette at 11:59, 15 May 2020

2020-05-15T11:59:15Z

← Older revision		Revision as of 11:59, 15 May 2020
Line 2:		Line 2:
	[[Category:Booking Page]]		[[Category:Booking Page]]
	[[Category:Booking_Engine]]		[[Category:Booking_Engine]]
	<div class="heading">Adaptive Booking ~~Paga~~</div>		<div class="heading">Adaptive Booking Page</div>
	~~''This page is about the adaptive booking page''~~

	<div class="warning">{{#fas:exclamation-triangle}} This version of the booking page is depreciated. Go to {#fas:cog}} (SETTINGS) >BOOKING ENGINE and set "Booking Page Version" and "Check-out Page Version" = Responsive to use the latest mobile friendly version of the booking page. </div>		<div class="warning">{{#fas:exclamation-triangle}} This version of the booking page is depreciated. Go to {#fas:cog}} (SETTINGS) >BOOKING ENGINE and set "Booking Page Version" and "Check-out Page Version" = Responsive to use the latest mobile friendly version of the booking page. </div>

Annette at 11:59, 15 May 2020

2020-05-15T11:59:00Z

← Older revision		Revision as of 11:59, 15 May 2020
Line 2:		Line 2:
	[[Category:Booking Page]]		[[Category:Booking Page]]
	[[Category:Booking_Engine]]		[[Category:Booking_Engine]]
	''This page ~~explains how to customise~~ the booking page''		<div class="heading">Adaptive Booking Paga</div>
			''This page is about the adaptive booking page''

			<div class="warning">{{#fas:exclamation-triangle}} This version of the booking page is depreciated. Go to {#fas:cog}} (SETTINGS) >BOOKING ENGINE and set "Booking Page Version" and "Check-out Page Version" = Responsive to use the latest mobile friendly version of the booking page. </div>

	== LAYOUT - general layout ==		== LAYOUT - general layout ==

Annette at 19:09, 23 January 2020

2020-01-23T19:09:56Z

← Older revision		Revision as of 19:09, 23 January 2020
Line 1:		Line 1:
	[[Category:How to]]		[[Category:How to]]
	[[Category:Booking Page]]		[[Category:Booking Page]]
			[[Category:Booking_Engine]]
	''This page explains how to customise the booking page''		''This page explains how to customise the booking page''

Annette at 18:23, 23 January 2020

2020-01-23T18:23:01Z

← Older revision		Revision as of 18:23, 23 January 2020
Line 4:		Line 4:

	== LAYOUT - general layout ==		== LAYOUT - general layout ==
	SETTINGS -> ~~BOOKING PAGE~~ -> PAGE ~~DESIGN~~ ->LAYOUT		SETTINGS -> BBOOKING ENGINE -> BOOKING PAGE ->LAYOUT

	[[File:example.jpg]]		[[File:example.jpg]]
Line 11:		Line 11:

	== Customise Design, Colours and fonts ==		== Customise Design, Colours and fonts ==
	SETTINGS -> BOOKING ~~PAGE~~ -> PAGE ~~DESIGN~~ ->STYLE		SETTINGS ->BOOKING ENGINE -> BOOKING PAGE ->STYLE

	[[File:bookingpage1.png]]		[[File:bookingpage1.png]]
Line 18:		Line 18:

	== Content ==		== Content ==
	*Add pictures and information for rooms (5) in SETTINGS -> BOOKING ~~PAGE~~ -> PAGE ~~DESIGN~~ -> CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING ~~PAGE~~ -> PICTURES		*Add pictures and information for rooms (5) in SETTINGS -> BOOKING ENGINE -> BOOKING PAGE -> CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING ENGINE -> PICTURES
	*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS -> BOOKING ~~PAGE~~ -> PAGE ~~DESIGN~~ -> CONTENT		*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS ->BOOKING ENGINE -> BOOKING PAGE -> CONTENT
	*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)		*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)

Line 30:		Line 30:
	*Customise Information your guest enters when booking / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS		*Customise Information your guest enters when booking / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS
	*Customise Confirmation Messages / SETTINGS -> PROPERTIES -> CONFIRMATION MESSAGES		*Customise Confirmation Messages / SETTINGS -> PROPERTIES -> CONFIRMATION MESSAGES
	*Set order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP "~~Availabitlity~~" and set the ''Sell Priority'' for each room.		*Set order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP "Availability" and set the ''Sell Priority'' for each room.
	*[[Let Guests View and Cancel Bookings]]		*[[Let Guests View and Cancel Bookings]]
	*Developers please also refer [[developers\|here]]		*Developers please also refer [[developers\|here]]
Line 36:		Line 36:
	== Change Default Text==		== Change Default Text==

	1. You can exchange any of the default text on the booking page in SETTINGS -> BOOKING ~~PAGE~~ -> DEVELOPERS -> "Custom Text"		1. You can exchange any of the default text on the booking page in SETTINGS -> BOOKING ENGINE -> DEVELOPERS -> "Custom Text"


Line 58:		Line 58:
	== Hide "Book Multiple" ==		== Hide "Book Multiple" ==

	Use the selector in SETTINGS-> BOOKING ~~PAGE~~-> PAGE ~~DESIGN~~->LAYOUT		Use the selector in SETTINGS-> BOOKING ENGINE -> BOOKING PAGE->LAYOUT

	== Hover Text ==		== Hover Text ==
	*To not show the number or rooms/units left place the following code in the SETTINGS->BOOKING ~~PAGE~~-> DEVELOPERS "Custom CSS" setting.		*To not show the number or rooms/units left place the following code in the SETTINGS->BOOKING ENGINE-> DEVELOPERS "Custom CSS" setting.
	.ptdaynumavail {display:none;}		.ptdaynumavail {display:none;}

	*To disable the hover text place the following script in the SETTINGS->BOOKING ~~PAGE~~-> DEVELOPERS "Advanced HTML Settings" setting.		*To disable the hover text place the following script in the SETTINGS->BOOKING ENGINE-> DEVELOPERS "Advanced HTML Settings" setting.

	<pre>		<pre>
Line 81:		Line 81:
	== Change CS' ==		== Change CS' ==

	Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING ~~PAGE~~ -> DEVELOPERS.		Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING ENGINE -> DEVELOPERS.

Lesley: /* Content */

2017-09-08T14:41:56Z

Content

← Older revision		Revision as of 14:41, 8 September 2017
Line 18:		Line 18:

	== Content ==		== Content ==
	*Add pictures and information for rooms (5) in SETTINGS -> BOOKING PAGE -> PAGE DESIGN -> ~~ROOM~~ CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING PAGE -> PICTURES		*Add pictures and information for rooms (5) in SETTINGS -> BOOKING PAGE -> PAGE DESIGN -> CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING PAGE -> PICTURES
	*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS -> BOOKING PAGE -> PAGE DESIGN -> CONTENT		*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS -> BOOKING PAGE -> PAGE DESIGN -> CONTENT
	*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)		*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)

Lesley: /* Content */ added Page design for the correct location

2017-09-08T14:40:00Z

Content: added Page design for the correct location

← Older revision		Revision as of 14:40, 8 September 2017
Line 18:		Line 18:

	== Content ==		== Content ==
	*Add pictures and information for rooms (5) in SETTINGS -> BOOKING PAGE -> ROOM CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING PAGE -> PICTURES		*Add pictures and information for rooms (5) in SETTINGS -> BOOKING PAGE -> PAGE DESIGN -> ROOM CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING PAGE -> PICTURES
	*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS -> BOOKING PAGE -> PAGE DESIGN -> CONTENT		*Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS -> BOOKING PAGE -> PAGE DESIGN -> CONTENT
	*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)		*Show [[Discounts]] adding a [[Discounts\|Marketing Column]] (4)

Annette: /* 'Change CSS' */

2017-02-27T16:31:26Z

'Change CSS'

← Older revision		Revision as of 16:31, 27 February 2017
Line 79:		Line 79:
	</pre>		</pre>

	== 'Change ~~CSS~~' ==		== Change CS' ==

	Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING PAGE -> DEVELOPERS. ~~Examples:~~		Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING PAGE -> DEVELOPERS.

Annette at 16:07, 4 July 2016

2016-07-04T16:07:46Z

← Older revision		Revision as of 16:07, 4 July 2016
Line 82:		Line 82:

	Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING PAGE -> DEVELOPERS. Examples:		Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING PAGE -> DEVELOPERS. Examples:

	~~== Bigger Room Name ==~~
	~~/code for bigger room name/~~
	~~.at_roomnametext{~~
	~~font-size: 14px /if you want the text even bigger use a higher number/~~
	}

	~~== Background Image ==~~
	~~To use a background image upload it to SETTINGS -> BOOKING PAGE -> PICTURES. Replace https://www.beds24.com/pic/p0000/2049/04.jpg with the url of your uploaded picture.~~

	~~/code fo use an image as background/~~
	~~body {~~
	~~background-image:url(https://www.beds24.com/pic/p0000/2049/04.jpg);~~
	}

	~~== Shadow Arround your Booking Page ==~~

	~~Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"~~

	~~/code for a shadow arround your booking page/~~

	~~<nowiki>#</nowiki>bookingpage {~~
	~~-webkit-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);~~
	~~-moz-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);~~
	~~box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);~~
	~~box-shadow: 0 1px 2px rgba(0, 10, 10, 0.38);~~
	~~margin-bottom: 20px;~~
	}

	~~== Booking Page with Rounded Corners ==~~
	~~Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"~~

	~~/code for rounded corners/~~
	~~<nowiki>#</nowiki>bookingpage {~~
	~~border-radius: 7px;~~
	~~-webkit-border-radius: 7px;~~
	~~-moz-border-radius: 7px;~~
	}

	~~== Show prices with cents even if cents are zero ==~~

	~~.bookingpagecentshide {display:inline;}~~