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 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 the support team.
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.
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 the support team 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: Replace ibe.your-domain.com and my-company-ID with your actual subdomain and identifier.
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 the support team.
Example URL: www.your-domain.com/tours
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 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.
Q: Why Does the IBE Sometimes Request Authentication When Accessing an Itinerary?
When accessing an itinerary in the IBE, you may occasionally be prompted to authenticate. This typically occurs when the itinerary has been linked to a TripBuilder user account.
If, during the checkout process, the contact information includes an email address associated with an active TripBuilder user, the itinerary is considered private. As a result, TripBuilder requires authentication to access the itinerary, ensuring that only authorised users can view it. This measure is in place to protect the user's personal travel information.