Front Booking Screen V2 (FBS V2): overview and setup

In developing the new front end booking screen, we believe we’ve created something that:

• simplifies and speeds up the booking process for your guests, due to fewer steps involved, therefore increasing bookings for you; 
• has a state of the art, current look and feel;
• provides vastly improving mobile responsiveness;
• allows multi room bookings;
• includes both mandatory and optional extras.

The Front Booking Screen V2 (FBS V2) is designed to be linked to from your website or embedded inside your own website.

To set it up for your website, you must have both V5 enabled and FBS V2 options turned on, reach out to our support team if you need help with this. You can then just log in to your Seekom iBex account and navigate to the Website Bookings section on your menu bar and select New Website Bookings Templates to get started. Customisation is limited to the options and custom CSS provided on the screen. For greater control over the booking screen, see the ‘Advanced Install’ below.

Creating New Template:
When creating a new template, click on the ‘Create New Template’ button on the upper right hand side of the page.

General Fields Tab:

Once you have clicked “Create New Template”, you will want to edit the General Fields tab. This is where you can set up the basic/general information the FBS V2 will be using.

Add Website: 

You must tell iBex what website you will be running the FBS V2 on. If there are multiple versions (such as a private development website and a live production website) add each of them to iBex (without the protocols: ‘http’, ‘https’).

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

Property Details: 

Template Name: The name of the template

Property: The property the booking screen will be using

Other Options: 

Rooms: Only selected rooms will be shown in the booking screen

Will default to show all rooms when nothing is selected

Rates: Only selected rates will be shown in the booking screen

Will default to show all rates when nothing is selected

Extra Categories: Only selected extras will be displayed in the booking screen.

Will default to show all

Sales Channel/Agent: Restricts the booking screen to the selected Sales Channel / Agent 

Labels:

Adult Label: Label to use to when talking about guests that are adults

Defaults: Adult

Child Label: Label to use to when talking about guests that are children

Defaults: Child

Infant Label: Label to use to when talking about guests that are children

Defaults: Infant

Additional Options:

Payment Options: 

Credit Cards: This option will only be clickable if you have set up your payment gateway or iBex Vault.

Guest Fields Tab:

This tab is where you can setup which fields will be Optional/Mandatory/Hidden on the booking form

Styling Tab:

This tab is where you can set up the Primary and Secondary Colour which the new FBS V2 will be using. It would help to match these with the Primary and Secondary colours of your website.

Custom Scripts Tab:

This tab allows you to add in some custom code that 3rd party libraries use to integrate with our new FBS V2. This is also where you can grab the ‘Advanced Install’ code that you can use to embed the new FBS V2 directly on your website.

Google Analytics: This can be used to add your Google Analytics/Adwords etc.

Facebook Pixel: This can be used to add your facebook pixel code

Advanced Install: This is a code block that can be used to embed the new Front Booking

Screen V2 directly into your website (see instructions below).

Adding FBS V2 To Your Site

Now you can choose whether to link the FBS V2 to your website or embed it inside your website.

To Link: 

Navigate back to the Website Bookings Templates section and select the ‘Generate Code’ button alongside the template you have just set up. You can copy the Raw URL and hyperlink it to a booking button or text (e.g. a ‘Book Now’ button, or “Make a reservation” line on your booking page), or you can use the Embedded URL code to embed the new FBS V2 on your site using a hyperlink, by adding the code to the body of your booking page (see ‘Advanced Install’, below, for information on how to add the screen without the use of iFrames if you prefer). You may also provide this code to your website developer so they can add the code for you.

Advanced Install (embedding without iFrames):

Embedding the Advanced Install’ code from the Custom Scripts Tab directly into your website allows the booking form to be rendered without the use of iFrames. This allows for customisation by giving you more control over the CSS that governs the look and feel, but may require the assistance of your web developer.

To embed the form in your website, copy the whole code from the code block in the ‘Advanced

Install’ section and paste it inside the <body></body> tag of the page on your website where you want the FBS V2 to appear.

Keep in mind that some customisation of the code will be needed to make the form exactly

match the look of the site in which it is embedded.