In order to allow your guests to book directly via your website, you need to specify how you wish your calendar to appear, and generate the code to embed on your website. You can tailor the design/colours of the calendar to match your website closely, or else use one of our stylish pre-defined styles.
1. Go to Admin > Website integration > Calendar wizard > Add new calendar.
2. Enter a calendar name e.g. <your company name calendar> and choose the site ID that should be associated with this calendar.
Please note:
If you have more than one website, you can create website specific calendars for each individual site ID.
To set up additionally required siteIDs, please contact our Support team, [email protected].
3. Enter your calendar URL (this is the website where you will embed your calendar) and then choose your Calendar type.
This URL is used when the booking process is abandoned at any stage by the guest. should this happen the guest will be returned back to this calendar URL.
Calendar type options:
Predefined - this means you can choose from our list of standard colours
Customised - this is where you can choose your own calendar colours.
Advanced - this allows you to use json / CSS to style your calendar.
Calendar types
There are six predefined calendars, four Basic and two Channel specific ones.
If you are listing your properties on Love to Escape or Independent Cottages, you can use their calendar design for a seamless design integration.
Please note:
When using either of the Channel calendar styles any booking received via the calendar will show the particular channel as the source of the booking.
Basic - Green
Basic - Dark
Basic - Teal
Basic - Accessible
This option allows you to style the calendar using custom colours.
Tip: If you like one of the channel designs, but don't want to use the predefined style, you can use the customising options here to recreate the same design.
Tip: Using too many calendar colours can make a calendar look busy and unappealing.
Booked dates should simply display as a muted colour so it doesn't distract the guest from the actual availability, e.g. grey or pale brand colour. You want the available days colour to stand out.
This option is for experienced users and web developers. It provides the possibility to import and/or use JSON or CSS for the styling of the calendars.
4. Easily preview the calendar style by clicking Calendar live preview.
5. Once you're happy with your calendar style click Save calendar.
Generating the code to embed on your website
6. Click Widget code and select your calendar style from the Calendar key drop down:
7. Choose your Desktop behaviour.
This is how you would like your calendar to display when viewing your calendar on a desktop computer (view). You can see previews of each version underneath:
8. Tick I will use this snippet to show single property only, if the calendar you're creating is for a single property.
If you would like this calendar to show more than one property either in a grid view or from the property drop down, leave this option unticked.
9. Your widget code (snippet) is generated underneath. Choose to send this code to your web developer or simply copy this to your clipboard:
10. Your web developer can easily copy and paste this to your website.
Please note:
Your website developer should avoid embedding the code in an iframe if possible, but this may be required in order to display them on some web hosting platforms.
Also ensure that the calendar is not embedded in too narrow a space on your website. This will make it appear 'squashed' and prevent the dates from displaying clearly.