IBE JS snippet for availability search

The booking engine Javascript snippet is used to provide you with a search bar on your own website that will redirect the user to the search results on the booking engine. The search bar is populated with the same information as the search bar at the top of the booking engine.


Embedded on a website



Step-by-step guide

To add this functionality to a website.

  1. The HTML snippet below will give you the required functionality to accomplish the above.

    <div id="availability-wrapper" data-ibe="https://book.rerumapp.uk/staging-bookings/availability/menu">
    <script src="https://s3-eu-west-1.amazonaws.com/cdn.resharmonics.com/scripts/avm.dist.js"></script>
    </div>
  2. Optional attributes:
data-building-id: 	This options will preselect a building that the system will search for, see example below.
<div id="availability-wrapper" data-ibe="https://book.rerumapp.uk/staging-bookings/availability/menu" data-building-id="5">
<script src="https://s3-eu-west-1.amazonaws.com/cdn.resharmonics.com/scripts/avm.dist.js"></script>
</div>


data-new-ibe: 		This will enable the new ibe styling, see example below.
<div id="availability-wrapper" data-ibe="https://book.rerumapp.uk/staging-bookings/availability/menu" data-new-ibe>
<script src="https://s3-eu-west-1.amazonaws.com/cdn.resharmonics.com/scripts/avm.dist.js"></script>
</div>

Data-New-Ibe-Multi-Tenant: This will enable the new ibe styling, see example below.
<div id="availability-wrapper" data-ibe="https://book.rerumapp.uk/staging-bookings/availability/menu" data-new-ibe data-language="en">
<script src="https://s3-eu-west-1.amazonaws.com/cdn.resharmonics.com/scripts/avm.dist.js"></script>
</div>

Note: If client using multi-language, the customer will need to use javascript to input a language to use e.g data-language="en". 

       

  1. You need to change the url in the data-ibe section to the url of your booking engine

    If the data-ibe attribute isn't there, nothing will be displayed. Make sure this URL is set correctly by going to it in a new tab making sure you get back the unstyled form looking something like this -

Notes: