This article covers the topic of how to integrate TripBuilder into your website as an Internet Booking Engine (IBE).

By going through a few simple steps, you will be able to integrate the TripBuilder IBE, including the planner and the checkout, into your website. 

Step 1 - Preparations

Get Your IBE Enabled

The product plan you have chosen defines whether you have the IBE included or not. By default, the IBE is inactive for any new setup, however, please contact the Nezasa Customer Service to get it enabled.

When doing so, please provide the following information:

  • Website Domain
    We need to know on which website you want to integrate the TripBuilder. Please provide us with the domain name of this website, e.g. https://www.your-domain.com

  • Path to Page
    Your website has to load the IBE on a certain page, e.g., www.your-domain.com/ibe. This page needs to be created by you on your website. For multi-language setups, it is possible to have a different path per language.

  • IBE Sub-Domain
    Nezasa automatically creates a sub-domain on *.tripbuilder.app. However, it is highly recommended that any IBE is loaded from a sub-domain of the main website due to browser restrictions related to third-party cookies. An example for the IBE subdomain is ibe.your-domain.com

For both, the sub-domain and the path, it is your choice what exactly you'd like to use.

Page Layout

Here are a few recommended points that make the integration of the IBE even more seamless.

  • Full Page Width
    Don't use any sidebars or spacings/margins around the IBE. The IBE should be able to leverage the full page width. In terms of height, please start right after your website header and stretch it until your website footer:

    60d2f13cc8816.png
  • Non-Sticky Website Header and Footer
    Do not use sticky or floating headers or footers because they may overlap with the IBE and hide important content.

  • Tune the Theme
    Adjust your theme in a way that the IBE content and your website match nicely.

 

Step 2 - Configure own IBE Subdomain

In order to run the TripBuilder IBE on a subdomain, we need to perform some configurations and you need to add some DNS (Domain Name System) settings in your website domain. The Nezasa Customer Service team guides you through the process configuration.

A little more background information for the inclined reader can be found on How to white-label / mask my domain?

Please get in contact with Nezasa Customer Service for the setup of your IBE subdomains.

 

Step 3 - Embed the IBE

Once the preparations and the subdomain setup are done, your IBE should look as follows:

  • Your website is located at https://www.your-domain.com
  • The IBE is located at https://www.your-domain.com/ibe
  • And the sub-domain where your IBE runs on is ibe.your-domain.com

Assuming that your identifier is my-company, your actual identifier will be visible when you go to Cockpit, for example: https://nezasa-app.nezasa.com/apps/cockpit/my-company

In this step, we'll add HTML code to your IBE page. There is a simpler and more advanced option available. Both options will ultimately load the required iframe to load the IBE.

Important

Don't forget to replace ibe.your-domain.com and my-company-ID with your actual sub-domain and identifier.

Option 1 - Simple Integration "Body Only"

In this approach, you only have to insert HTML into the body of the page at /ibe. Add the following code inside the <body> tag:

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

Option 2 - Optimized Integration "Head & Body"

The second option is superior to the first one in terms of the performance of the initial page load. This is due to the fact that the most important script can be loaded earlier.

In the <head> tag of that page (as early as possible), add:

<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>

 

Step 4 - Testing

Once you have updated your page and published it, check if it works. When browsing to https://www.your-domain.com/ibe the TripBuilder IBE should now successfully load the discovery page with the curated trips.

 

Step 5 - CMS URLs Configuration

For successful integration, Nezasa must configure the URLs of your CMS.
Please provide the URLs to the CMS page that hosts the Nezasa integration application to
Nezasa.


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

Please Note: 

In the case of multi-language portals, each URL can be defined separately for each language. If the URLs are the same for all the languages, it is enough to define it for the default language.


Frequently Ask Questions

IBE - Cannot switch language or currency

The language and currency are stored in a cookie. Due to the third-party cookie policy of browsers, this storing doesn't work when your main website and the subdomain of the IBE do not use the same top-level domain. Please order a white-labelled domain for your IBE with Nezasa support.

More info about the white labelling can be found here.

 

Comments

0 comments

Please sign in to leave a comment.