Once the option is enabled inside your iBex account, a new menu item called Venues Website Booking Templates will be available.

Please forward this information on to your Web Developer or someone with knowledge with JavaScript and HTML.  We recommend to create a new staff user in iBex for your website designer. Click here for more details. 


Structure

The iBex Venues Front Bookings Screens (VFBS) is designed to be embedded into your website. It does not use iFrames as they are no longer reliable (many browsers now block iFrames from third parties thinking they might be advertisements).


Browser Support

  • Chrome
  • Firefox
  • Safari 10+
  • Edge
  • IE 11 / Safari 9 (supported for now, but may be dropped later)


IE 10 and below are not supported.


Themes & Styles

The fonts and colours are inherited from your website's styles. CSS can be applied on your own website to adjust almost anything inside the VFBS.




Authorised Websites

You must tell iBex what website you will be running the VFBS on. If there are multiple versions (such as a private development website and a live production website) add each of them to iBex.


Any websites not listed here that install your Venues FBS will not load correctly.



Generating VFBS Code

After you have saved your Authorised Websites, the template configuration section appears. This section does not persist, it is a tool to generate the basic installation code for your VFBS.



  1. Choose the Property / Venue that the current VFBS is targeted at.
  2. Pick which Custom Field the extra features are mapped against.


Note: Custom Fields are not required, but are needed to collect extra information. If you want to collect any of the following (Catering Required, Room Layout, Site Inspection Required or Accommodation Required) you must have the Custom Fields option enabled. Contact us to set these up.


Any changes made to the Property or Custom Field Mapping will change the generated VFBS code. Make sure you copy/paste the changes on to your website.



Copy both sets of code and add them to your website. The Body Code is the container the VFBS will be loaded inside. It should be placed on a page large enough (we suggest not having a sidebar on the VFBS parent page) to hold the VFBS.

The Head Code can be placed in the header or before the closing </body> tag.


Save and publish your website, and the VFBS should be running. If it does not load, open up your browser's console and check for any warning or error messages.


Advanced Setup

window.iBexVenueFBS is exposed to interact and control the VFBS. Actions made before the script is loaded will be delayed until after it has loaded.


Set Options

iBexVenuFbs.push(['options', {
// Options can be set here
}]);

The set options call will override all set options in the VFBS. It should only set set once, at the initial load.


Available options can be found in the table below. 


Boot

iBexVenueFbs.push(['boot', 'ibex-app']);


Boot is run once, to start the VFBS. If you want to prevent the VFBS from loading until a button is pushed, you can use this script to do it.



Options List

OptionRequiredTypeDefault ValueDescription
clientYesString
The ID of the account. This is required in the initlisation script.
keyYesString
A unique key for this particular VFBS. This is required in the initlisation script and is generated on the template page.
propertyIdYesInteger
The ID of the Venue property account. It is required.
countryIdYesInteger
The ID of the Country the property belongs to. It is provided by the template page.
accommodationCustomFieldIdNoInteger
The ID of the iBex Custom Field that holds the flag whether this booking requires accommodation or not
siteInspectionCustomFieldIdNoInteger
The ID of the iBex Custom Field that holds the flag whether this booking requires a site inspection or not
cateringCustomFieldIdNoInteger
The ID of the iBex Custom Field that holds the flag whether this booking requires catering or not
layoutCustomFieldIdNoInteger
The ID of the iBex Custom Field that holds the layout that the customer has selected
onTheDayContactNameNoInteger
The ID of the iBex Custom Field that holds the name of the contact on the day
onTheDayContactNumberNoInteger
The ID of the iBex Custom Field that holds the name of the contact on the day's number
functionNameNoInteger
The ID of the iBex Custom Field that holds the function name
agentIdNoString
The iBex agent ID which the rooms/rates should be read from.
showAgentLoginNoBooleanFalseIf true, agents will be able to log into the VFBS and book under their own rooms/rates
startTimeNoString'07:00'The default time bookings will start from
endTimeNoString'17:00'The default time bookings will end at
extraZeroCostNoString'Free'The text shown to customers when an extra has a $0 price
holdButtonNoString'Hold'The label on the "Hold" button.
bookButtonNoString'Book + Confirm'The label on the "Book" button
capacityNoString'People'The label identifying people/capacity
eventStartNoString'Event Start'The label for when the event will start
eventEndNoString'Event End'The label for when the event will end
capacityValueNoInteger10The default number of people shown in the selectors
base-themeNoString'dark'Either 'dark' or 'light'. Controls some basic colouring whether the VFBS is a dark background or a light background.
bookConfirmCallbackNoFunction
Provide a function that is called whenever a booking is completed. Can be used for custom analytics tracking




Booking Confirmation Callback

The bookConfirmCallback setting can be given a callback function that will be execute when a booking is completed. It can be used to integrate with different tracking tools, such as Google Analytics.


<script type="text/javascript">
    window.iBexVenueFbs = window.iBexVenueFbs || [];
    iBexVenueFbs.push(['options', {
        "client": "myaccount",
        "key": "myaccount6330719cd49",
        "propertyId": 6680,
        "countryId": 108,
        "bookConfirmCallback": function(booking){
               // booking will hold information about the completed booking, you can call the desired
               // tracking methods here
               // For Example: If tracking a Google Analytics purchase, you could add something like the following:
               gtag('event', 'purchase', { 'transaction_id': booking.attributes.ref });

               // Try a console.log(booking) to see what values are available
        }
    }]);
    iBexVenueFbs.push(['boot', 'ibex-app']);
</script>