Skip to main content

How to Integrate the IBE Into Your Website

Jamina Padilla
Updated

Overview

This article explains how to integrate TripBuilder into your website as an Internet Booking Engine (IBE). By following these steps, you'll be able to incorporate the TripBuilder IBE, including Planner and Checkout, into your website.

 

Step 1 - Preparations

Enable Your IBE

TripBuilder's product plans, Monetise and Maximise, include a branded online IBE feature for your website. This feature is disabled by default for a new TripBuilder instance. If you wish to activate it, please contact Nezasa Customer Service.

When requesting activation, please provide the following information:

  • Website Domain
    Please inform us of the domain name you wish to integrate TripBuilder, for example, https://www.your-domain.com.

  • Path to Page
    Your website must load the IBE on a specific page. You will need to create this page, such as www.your-domain.com/ibe. For multi-language setups, it is possible to have different paths for each language.

  • IBE Sub-Domain
    Nezasa will automatically create a sub-domain on *.tripbuilder.app. However, loading the IBE from a sub-domain of your main website is recommended to avoid browser restrictions associated with third-party cookies. An example of an IBE sub-domain is ibe.your-domain.com

You can choose the sub-domain and path naming that best suits your needs.

 

Page Layout

To ensure a seamless IBE integration, consider the following recommendations:

  • Full Page Width
    Avoid using sidebars or setting spacings/margins around the IBE. The IBE should utilise the entire width of the page. Regarding height, it should start immediately below your website header and extend until your website footer.

TripBuilder IBE.jpg

 

  • Non-Sticky Website Header and Footer
    Refrain from using sticky or floating headers and footers, as they may overlap with the IBE, concealing essential content and functionality.

  • Tune the Theme
    Adjust your website's theme so the IBE content matches your site design.

 

Step 2 - Configure Your IBE Subdomain

To run the TripBuilder IBE on a subdomain, some configurations are required, including adding DNS (Domain Name System) settings to your website's domain. Nezasa's Customer Experience team will assist you throughout this configuration process.

For more detailed information, technically inclined readers can read the article How to white-label / mask my domain?

Please contact Nezasa Customer Service to set up your IBE subdomains.

 

Step 3 - Embed the IBE

After completing the preparations and subdomain setup, your IBE will be structured as follows:

  • Your website URL: https://www.your-domain.com
  • IBE URL: https://www.your-domain.com/ibe
  • Subdomain for IBE: ibe.your-domain.com

Assuming your identifier is my-company, you can see your actual identifier in the TripBuilder Cockpit, for example, https://example.tripbuilder.app/apps/cockpit/my-company.

You will add some HTML code to your IBE page in this step. Two options are available; both will ultimately load the required iframe for the IBE.

Important:

Replace ibe.your-domain.com and my-company-ID with your actual subdomain and identifier.

 

Option 1 - Optimised Integration "Head & Body"

This option performs better for the initial page load because the most important script is loaded earlier. Add the following code within the <head> tag of that page as early as possible:

<script src="https://ibe.your-domain.com/integration/v2/my-company-ID/embed.js" type="text/javascript"></script>

And in <body>, add:

<div id="nz-planner" onload="nz.init()"></div>

 

Option 2 - Simple Integration "Body Only"

With this approach, insert the following HTML code into the <body> tag of the page at /ibe:

<div id="nz-planner"></div>
<script src="https://ibe.your-domain.com/integration/v1/my-company-ID/embed.js" type="text/javascript"></script>

 

Important:

Due to performance considerations while loading the iframe, Option 1 is recommended over Option 2. Although Option 2 is still supported, it is considered deprecated.

 

Step 4 - Testing

After updating and publishing your page, you need to verify if it functions correctly. When you navigate to https://www.your-domain.com/ibe, the TripBuilder IBE should load the discovery overview page.

 

Step 5 - CMS URLs Configuration

For a successful integration, Nezasa needs to configure your CMS URLs.

Please provide the URLs for the CMS page that hosts the Nezasa integration application to Nezasa Customer Service.


Example URL: www.your-domain.com/tours

Please note:

For multi-language portals, each URL can be defined separately for each language. If the URLs are the same for all languages, defining it as the default language is sufficient.

 

Step 6 - Layout Configuration

When configuring the initial user interface for the IBE, commonly referred to as the Discovery Overview, you have two options:

  • Legacy User Interface
  • Hero Search User Interface

 

The legacy user interface is the default option when loading the IBE. If you wish to continue using this layout, no further action is required.

If you prefer to use the Hero Search user interface, as described in the Discovery Overview article, please contact our support team or your customer success manager to enable the feature flag available at the Distribution Channel > Discovery > Discovery Overview / Trip Search > New Hero Search for IBE.

 

FAQ

Q: Why can't I change language or currency on the IBE?

A: The language and currency settings are stored in a cookie. Due to the third-party cookie policies of browsers, this storage method does not work when your main website and the IBE subdomain do not use the same top-level domain. Please request Nezasa's support for a white-labelled domain for your IBE.

For more information about white labelling, please refer to this article.

Related articles

Comments

0 comments

Article is closed for comments.