Hello! We’re chuffed that you’re thinking about integrating Inn Style — a booking system for accommodation — into your website. Hopefully you’ll find it pain-free, but if you find yourself getting stuck, just hit the chat button the bottom corner of the screen and we’ll be on hand to help.
Okay, now skip to where you feel most comfortable.
- The simple, classic link
- Adding Inn Style to popular content management tools
1. The simple, classic link
A link to your accommodation’s Inn Style “homepage” is a perfectly sensible approach. We’ll take care of things from that point onwards. Simply copy and paste the following into the relevant part of your website — replacing
demo with your account subdomain.
That will produce something like this:
Of course, you can add your own CSS to taste. So something like this (shown inline for brevity, but feel free to pop it in your stylesheet to make it reusable):
Will produce something like this:
Or, if you’re using a framework such as Bootstrap, you can just add the necessary classes.
Which will generate something like this:
Option one takes your guest to your Inn Style “homepage”. This option brings your homepage to them — right within your site. Simply copy and paste these two lines of code, and pop them into your website wherever you’d like the calendar to appear.
demowith your subdomain.
It’s just an iFrame, really.
Those two lines of code embed an
<iframe> into your site and resize the height of the iframe accordingly.
But it’s a pretty clever iFrame
Inn Style is completely responsive, so you can embed your calendars nice and big, or pop them in a sidebar.
If your calendar is embedded in a space greater than
991px wide, each day of the current calendar month is shown in a nice long row, making it easy to see what’s available when.
If you embed the calendar into a space
991px or smaller, the calendar collapses to stacked weeks for each room (or other bookable type).
This allows you to build a fully responsive website for your accommodation business (or that of your client).
For instance, you can do something a bit like this:
Here’s a bit more about those options, with a few extra parameters to work with:
|color||‘light’ or ‘dark’||‘dark’||The iFrame has a transparent background. So if you want to put it on a dark background, choose our ‘light’ theme and the text will be white.|
|policy||‘show’ or ‘hide’||‘show’||Accommodation policies will appear at the bottom of the iFrame. If you’ve got these elsewhere on your site, you can choose to hide them.|
|bookable||–||–||A bookable is a room, cottage, caravan, tent pitch etc. By default, the Inn Style calendar shows all the enabled bookables for that accommodation owner.|
You can show one or more bookables using this option. Handy if you’ve got a separate page for that bookable on your website, and you want to show its availability.
Please note that if you’re trying to show more than one bookable, you need to do it as comma separated values as a string. So
|date_in_view||–||–||The calendar defaults to the current month. If you want to show availability for a given month, pass in a date string of any date in that month.|
|datepicker||‘only’||–||Shows just a datepicker and an occupancy selector which on submit passes the query through to Inn Style. Please note: Enquiry view must be selected in the Guest Experience preferences of the Inn Style account.|
|force_enquiry||true||–||Allows the ability to leave the default availability view switched on in the Guest Experience settings but force the Enquiry view if you’d like to use both formats on your website in different locations.|
|protocol||‘https’ or ‘http’||‘http’||Allows you to embed the calendar over https if you have a security certificate on your own site.|
|height||‘400’||–||Allows you to set the height of the iframe and override any potential longer page results that can sometimes occur.|
|ga||–||–||Formatted as a string |
2.2 What happens next?
You can get a feel for it by playing with the example above, but this is what’s going on:
- The guest sees the calendar on your site. They click on a check-in date.
- A modal appears showing the guest how long they can stay for. They choose how many nights they’d like to stay and hit continue.
- At this point, the guest is redirected to Inn Style’s secure servers where they see their chosen accommodation, check the price, and complete the booking.
This redirect makes integration much, much easier for you because you don’t need to worry about PCI compliance or security certificates or any of the misery that comes with server administration. That’s our job.
3. Simple booking system integrations for CMS
Here’s some useful guides for adding Inn Style to different content management tools.
- Adding a booking system to SquareSpace
- Adding a booking calendar to Wix
- Adding a booking system to Weebly
- Adding a booking system to WordPress