Embedding multiple booking frames into the same website page

It's not uncommon for websites to feature a page of properties, with an embedded Inn Style booking calendar next to each.

The default integration is to display calendars for all properties in a grid format (on larger screens) that collapses to consecutive calendars on mobiles and tablets.

But it's also possible to display the booking calendar for a single Cottage, Lodge, Shepherd's Hut or whatever you may be selling, by finding the ID of that Bookable and telling the iframe about it.

Here's some sample code for an imaginary customer with a subdomain of "niftycottages" who'd like to display a calendar for Daydream Cottage that has a Bookable ID of 45678.

<div>
  <h3>Book Daydream Cottage</h3>

  <script src="//developer.innstyle.co.uk/calendar.js"></script>
  <script>
    InnStyle('niftycottages', {
      bookable: 45678
    });
  </script>

</div>

Now. What about if they'd like show the calendar for Moonbeam Cottage too?

It's possible to do it in the same calendar by using a comma-separated string:

<div>
  <h3>Book Daydream Cottage & Moonbeam Cottage</h3>

  <script src="//developer.innstyle.co.uk/calendar.js"></script>
  <script>
    InnStyle('niftycottages', {
      bookable: "45678,45679"
    });
  </script>

</div>

Note those quotation marks! Bad things will happen if you do not abide.

But sometimes this isn't quite what you want. You want separate calendars. Still on the same webpage, but very separate from each other, so you can align them next to a nice picture of the respective cottage.

This is also possible. But does require a tiny bit more effort: because whilst you want two separate calendars, you must only include the library once.

The library – for complete clarity – is this line of code:

<script src="//developer.innstyle.co.uk/calendar.js"></script>

The library includes all the logic that fires when you call this function:

InnStyle('niftycottages', ...)

A common practice is to put libraries of code into the <head> of an HTML page. If you've got access to such powers, we recommend you pop it in there. Right before the head is closed is a good spot.

If you don't, then only include it the first time you embed a calendar.

You can then make multiple calls to the InnStyle function. Each iframe embedded into the page is given a unique reference, and we use that reference to communicate things like height changes, scrolling cues, and overflow triggers back to your website.

So our friends at Nifty Cottages will end up with something like this:

<!DOCTYPE html>
<html>
  <head>
    ... Lots of stuff like titles, meta tags, CSS, and javascript libraries

    ... And last but not least ...
    <script src="//developer.innstyle.co.uk/calendar.js"></script>
  </head>
  <body>

    <div class="cottage">
      <h3>Book Daydream Cottage</h3>
      <img src="assets/img/daydream.jpg">

      <script>
        InnStyle('niftycottages', {
          bookable: 45678
        });
      </script>
    </div>

    <div class="cottage">
      <h3>Book Moonbeam Cottage</h3>
      <img src="assets/img/moonbeam-cropped.jpg">

      <script>
        InnStyle('niftycottages', {
          bookable: 45679
        });
      </script>
    </div>
    
  </body>
</html>

And this should all just work nicely.

A word of warning!

Each call to the InnStyle function embeds an iframe. iFrames are simply webpages in other webpages. If you call the InnStyle function ten times on one webpage, you're effectively loading 10 + 1 websites at the same time.

And just as if you were loading 11 tabs at the same time, this will guarantee a sloppy loading time.

Multiple embeds are a sharp knife we are happy to let you use. But use it wildly, and it's all going to end in tears.

Happy website building. 🎉