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 linked to from your website or embedded inside an iFrame onto your website. 


Customisation is limited to the options and custom CSS provided on the screen. For greater control over the screen, see the Advanced Install below.


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.



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.


Template Configurations

Select which property you wish to create a front booking screen for from the Property drop down list  

 This will then load the Configure Template section



Configure Template

A range of select boxes will now appear


Theme: Switch between either light or dark text (depending on the shade of your website)

Home Page Icon: To override the default image on the first screen you can add in a URL to your chosen home image

Show Agent Login: Yes means the login link will appear on the booking screen, No means the link will be hidden

Show Deposit: Select Yes if you want the deposit to show in the booking summary, No means it will be hidden

Default Capacity: The number entered here will be pre populated on the front booking screen, customers are able to override and put in another number if required

Default Start Time / End Time: The min / max times which will appear on the front booking screen time selectors


In order for your custom fields to appear on the front booking screen they will need to be mapped here

Example on the 'Catering Required' field select the custom field you have previously set up from the dropdown box


  1. 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 etc) you must have the Custom Fields option enabled. Contact us to set these up.



Custom CSS allows you to hide fields, change the background colour, login text size etc


Remember to



Advanced

In the Advanced section you are able to add in your own room layout icons by adding in the images URL


 

Below this is all the possible labels that can be changed.

Amend to whatever you need your new labels to be and this will be displayed on the front booking screen



Once you are happy with your changes select the 'Save Changes' button

 


Install Code

You will now be able to create your venue front booking screen by the Popup URL, Button or iFrame Code.









Generating VFBS Code


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.


If you want to have more fine grained control on initialising your VFBS, you can use the Advanced Install option.

All you have to do is copy the whole code inside and paste it betwwen your pages <body></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>