Inn Style Developer Documentation

before you start

Booking Engine Best Practices

We’ve taken the trouble of gathering all of our best practices for implementing our booking engine into one place. Click the link below to find out about the various ways our engine can be implemented, along with some additional features for increasing conversion on direct bookings.
Explore Best Practices

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.
Book Online Now!
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):
<a class="book-now-btn" href="https://demobb.innstyle.co.uk">Book Online Now!</a>

<style>
  .book-now-btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 16px;
    color: #25361a;
    background-color: #c8a1ff;
    border-radius: 40px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .book-now-btn:hover {
    background-color: #ffffff; 
    color: #25361a; 
    border: 2px solid #ffffff; 
  }
</style>
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.
<script src="https://developer.innstyle.co.uk/calendar.min.js"></script>
<script>InnStyle('demobb')</script>
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).
Customisation
The InnStyle function on the second line of Javascript accepts an object as an optional second argument. 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:
<script src="https://developer.innstyle.co.uk/calendar.min.js"></script>
<script>InnStyle('demobb',{bookable: 12, date_in_view: '14-04-2020'})</script>
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.

Adding Inn Style to your website
Inn Style is designed to integrate seamlessly with all major content management systems, including WordPress, Wix, Squarespace, Weebly, and more. Our flexible solution works across these platforms without requiring extensive technical knowledge or custom development.

This guide provides step-by-step instructions for adding the Inn Style booking calendar to your specific CMS. Simply locate your platform below and follow the detailed implementation steps.

Whether you're using a drag-and-drop builder or a more traditional CMS, you'll be able to enhance your accommodation website with Inn Style's powerful booking capabilities in just a few minutes.
Adding Inn Style to your Wordpress website
WordPress is a popular website platform that allows users to create and manage sites with customizable themes and plugins, similar to website builders like Wix and Squarespace.
1. Adding a Code Block.
Click "Edit page" with your website builder (ex. Elemenor, Bricks Builder).
<script src="https://developer.innstyle.co.uk/calendar.js"></script>
<script>InnStyle('integrio',{custom_enquiry_page: true, datepicker: 'only'})</script>
2. add the code.
Add a "Code" element. Paste this into the text area. 

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.
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
<html>
  <body>
    <script id="InnStyle-js" src="https://developer.innstyle.co.uk/calendar.min.js">
    </script>

    <script>
      InnStyle('insertinnstyledomainhere');
    </script>
  </body>
</html>
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 “insertinnstyledomainhere” to your own subdomain)
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
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.
Adding the code block in SquareSpace

Open a page or post editor. Click Insert Point and select Code from the Block Menu. Paste the code below in the block editor, replacing your innstyledomain.

Having to refresh the page to see your calendar?

All you need to do is disable Ajax by following the steps below:

  1. In the Home menu, click Design, and then click Site styles.
  2. Search for the Enable Ajax loading tweak.
  3. Uncheck Enable Ajax loading.
<script id="InnStyle-js" src="https://developer.innstyle.co.uk/calendar.min.js">
</script>

<script>
    InnStyle('insertinnstyledomainhere');
</script>
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).

<script id="InnStyle-js" src="https://developer.innstyle.co.uk/calendar.min.js">
</script>

<script>
    InnStyle('insertinnstyledomainhere');
</script>
Nothing showing yet?
Fear not, Weebly won’t display the code you just added until you publish your page.

FOR DEMO PURPOSES