Documentation

Hello! We’re chuffed that you’re thinking about integrating Inn Style's booking system into your website. Hopefully you’ll find it straightforward, but hit the chat button in the bottom corner of the screen if you need a hand.

Adding a simple booking 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:

Book online now!

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:

Book online now!

Embedding a calendar on your Website


Option one takes your guest to your Inn Style “homepage”. This option brings your booking calendar to them — right within your own site. Simply copy and paste these two lines of code, and pop them into your website wherever you’d like the calendar to appear.

Remember! Replace demo with 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).

Secure connections (SSL/TLS)


Running Inn Style over a secure SSL or TLS connection is simple.

More customisation


You can pass an optional hash of options to function on the second line of Javascript. This gives you a little more control of the look and feel of your calendar.

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:

Name Type Options Default Notes
policy string ‘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 integer or string 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 3 or "4,5" will work, but 6,7 will most certainly not.
date_in_view string 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.
Formats 14/04/2016 or 2016-04-14 will be fine.
datepicker string ‘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 boolean 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 string ‘https’ or ‘http’ ‘http’ Allows you to embed the calendar over https if you have a security certificate on your own site.
height string ‘400’ Allows you to set the height of the iframe and override any potential longer page results that can sometimes occur.
ga string Formatted as a string "UA-XXXXXXXX-X" Use this if you want Google Analytics to track conversions on Inn Style (contact us through your Inn Style account if you would like to do this and we will help get your account ready).

Adding Inn Style to your Wix website


Like SquareSpace, Wix is one of the many popular ‘drag-and-drop’ website management tools that do away with the need to know how to code or manage hosting.

1. Adding an HTML Code Block.

Click the Add symbol in your side menu, then head down to the bottom of the list and select ‘More’. Click the HTML Code button

2. Position the box and add the code.

Move the newly created box into position on your page. Then click the Enter Code button. Select the ‘code’ option and paste this into the text area. (Remember to change the "demo" to your own Inn Style account name)

Click the update button once the code is in place.

And that’s it! You can now drag and resize the block Inn Style is in. If you want to control what’s shown in the block you’ve created

Newer Wix sites use SSL

New Wix sites are now using secure connections, so you'll need to use this code, but remember to include the html and body tags above.

Adding Inn Style to your SquareSpace website


SquareSpace is an easy-to-use platform for building and running your accommodation website with a set of attractive, mobile-friendly themes. You don’t need any technical know-how to manage your site, and it’s really easy to integrate Inn Style into your SquareSpace account.

What you’ll need

  1. A SquareSpace account
  2. A page ready to add your Inn Style code to (you can try this setup with a free trial of Inn Style)

Got everything? Let’s press on.

Adding the code block in SquareSpace

Open a page or post editor. Click an Insert Point and select Code from the Block Menu.

SquareSpace now use SSL/TLS by default for all new sites, so chances are you should use this secure version of the Inn Style Code

Keep in mind …

As a SquareSpace security measure, sometimes your code won’t appear when you’re logged in, even if visitors can see it.

If you can’t see code that you added to a Code Block, try logging out of your site or opening your site in another browser.

Your code also might not display if you’ve added it to a page within an Index. To test, remove the page from the Index within the Pages panel and log out of your site.

Adding Inn Style to your Weebly website


With its easy to use drag-and-drop interface, Weebly is one of the most popular website tools around. With just a few clicks you can have a theme-based site up and running in no time. We’ll now guide you through adding a booking calendar to a Weebly website.

Once you’ve got your account and theme setup, you can start adding pages, menus and content to your new Weebly site. Once you’ve got the basics setup, you can get your booking calendar in place.

1. Add the ’embed code’ Block

In the sidebar of your Weebly site editor, you should see a box titled ’embed code’ — drag that onto the page where you’d like to add your booking calendar.

2. Add the code

With Inn Style, you just need a couple of lines of code to show your booking calendar. In this example, we’re using the code from our demo account. Paste this into the ’embed-code’ block you just dragged onto your Weebly page (making sure you change ‘demo’ with your Inn Style account name).

Nothing showing yet?

Fear not, Weebly won’t display the code you just added until you publish your page.

Creating and designing your own enquiry form


If you're a web developer, perhaps you'd like to create your own custom-designed form to send enquiries to Inn Style. We've included a simple boilerplate form for you to work from below. Let us know if you come up with anything amazing and we'll share it.

Book a guided tour

Request a demo if you’d like to see how Inn Style can help your accommodation.
Request a demo