fbpx

Inn Style Developer Documentation

squiggle line2

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 style="display: inline-block; padding: 10px 15px 9px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid #419941; color: #419941;" href="https://demobb.innstyle.co.uk" target="_blank" rel="noopener">Book online now!</a>
				
			

Will produce something like this:

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('artesiahotel')</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('artesiahotel',{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:

NameTypeOptionsDefaultNotes
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 booleantrueAllows 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.
wix logo

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 data-rsssl=1>
    <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

squarespace logo

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.

weebly logo

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.

An exclusive offer from

Inn Style &
The Epicurean Club

An exclusive offer from

Inn Style

An exclusive offer from

Inn Style

An exclusive offer from

Inn Style

An exclusive offer from

Inn Style

An exclusive offer from

Inn Style

An exclusive offer from

Inn Style

An exclusive offer from

Inn Style &
Stay in a pub

An exclusive offer from

Inn Style &
Stay in a pub

An exclusive offer from

Inn Style &
The Epicurean Club

An exclusive offer from

Inn Style &
The Epicurean Club

Book a Demo

Complete the form below and someone from the Inn Style team will be in touch.

Let's connect

Got a question? Complete the form below and someone from the Inn Style team will be in touch.