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 Seekom VenueRez 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
zeroCostExtraText
NoString'Free'The text shown to customers when an extra has a $0 price
holdButtonText
NoString'Hold'The label on the "Hold" button.
bookButtonText
NoString'Book + Confirm'The label on the "Book" button
capacityLabel
NoString'People'The label identifying people/capacity
eventStartLabel
NoString'Event Start'The label for when the event will start
eventEndLabel
NoString'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
homePageImgNoStringDefault ImageThe url/path to the image that will be used as the homepage background image
onRequestMode
NoBooleanfalseIf true, this will mean that all 'hold' bookings will be treated as 'On Request'. This means that the booking will be on 'hold' but will not take availability.
onRequestButton
NoString Path'On Request'The button text when 'onRequestMode' is set to true
homePageBannerText
NoString'Tailored Solutions for Your Events'
Text found on the Banner on the homepage
homePageTitle
NoString'Select Event'
This will be used in breadcrumbs; Title of the homepage
bookPageTitle
NoString'Select Package'This will be label in breadcrumbs for booking page
detailsPageTitle
NoString'Book and Hold'This will be the label in breadcrumbs for the bookier detail page
homePageSubmitNoString'FIND VENUES'This is the label used in the homepage submit button
bookPageSearchButton
NoString'Search'The label for the 'Search' button on booking page
addCateringButton
No
String
'Add'The label for the button to add catering
removeCateringButton
No
String
'Remove'The label for the button to remove catering
addCateringButtonMobile
No
String
'Add Catering'The label used for the button to add catering in mobile (cannot just use 'Add' since there is no context for the layout in mobile)
removeCateringButtonMobile

No
String
'Remove Catering'The label used for the button to remove catering in mobile (cannot just use 'Remove' since there is no context for the layout in mobile)
extrasButton

No

String
'View Extras'The label used in button to view extras
agentLoginLink
No
String
'Corporate Sign In'The text used for the link to login as agent/company
agentLogoutLink
No
String
'Logout'The text used for the link to logout logged in user
roomCost
No
String
'Room Cost'The text used to label Room Cost in booking page
totalNo
String
'Total'The text used to label the total to be paid when room is booked
extrasNo
String
'Extras'The text used to label the total of the extras that was chosen in extras modal
cateringNo
String
'Catering'The text used to label 'Catering'
depositNo
String
'Deposit'The text used to label Deposit needed to be payed when booking the chosen room
breadcrumbBack
No
String
'Back'The label for the back button on the breadcrumbs on top of page
loginBanner
No
String
'Corporate Sign In'
The text in the header found when login modal is opened
formAgent
No
String
'Agent ID'The placeholder for the agent login field
verifyButtonNo
String
'Verify'The label on the button to verify agent
usernameTextNo
String
'Username'The placeholder for the username field when logging (only for agents using username and password as part of login)
passwordTextNo
String
'Password'The placeholder for the password field when logging (only for agents using username and password as part of login)
credentialsButtonNo
String
'Submit'The label used for the submit button when username and password is used
codeTextNo
String
'Code'The placeholder for the code field when logging (only for agents using code as part of login)
codeButtonNo
String
'Submit'The label used for the submit button when only code is used
siteInspection
No
String
'Site Inspection Required?'The label used for the 'Site Inspection' field
accomodationRequired
No
String
'Accommodation Required?'
The label used for the 'Accommodation Required' field
aboutUsNo
String
'How did you hear about us?'The label used for the field that asks how you heard about us
bookDetailsHeader
No
String
'Booker Details'The label used for header in Booking Form
formName
No
String
'Name'The placeholder for 'Name' field
formEmailNo
String
'Email'The placeholder for 'Email' field
formPhone
No
String
'Phone Number'The placeholder for 'Phone' field
formCommentNo
String
'Comment'The placeholder for 'Comment' field
formAddressNo
String
'Address'The placeholder for 'Address' field
formTownNo
String
'Suburb/Town'The placeholder for 'Town' field
formCityNo
String
'City/Region/State'The placeholder for 'City' field
formZipNo
String
'Post/Zip Code'The placeholder for 'Zip Code' field
formOnTheDayContactNo
String
'On the day contact name'The placeholder for the 'On the day contact name' field
formOnTheDayPhoneNo
String
'On the day contact phone number'The placeholder for the 'On the day contact phone number' field
formFunctionName
No
String
'Function Name'The placeholder for the 'Function Name' field
formArrivalTime
No
String
'Arrival Time'The placeholder for the 'Arrival Time' field




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>