Learn how to embed the full TripBuilder IBE into your website
It is simple to integrate the TripBuilder IBE into your website. By going through a few step, your own website will be able to load the full IBE including planner and the checkout.
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 support to get it enabled.
When doing so, please also provide the following information:
- 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. Read more here.
- Path to Page
Your website has to load the IBE on a certain page, e.g., www.your-domain.com/ibe. For multi-language setups, it is possible to have a different path per language.
For both, the sub-domain and the path, it is your choice what exactly you'd like to use.
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, and in terms of height, start right after your website header and stretch until your website footer:
- 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 such that the IBE content and your website match nicely.
Step 2 - Embed the IBE
Okey, the preparations are done. For the rest of this article, we assume the following for all examples:
- 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
Also, we assume that your identifier is my-company. Your actual identifier is 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.
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:
Option 2 - Optimized Integration "Head & Body"
The second option is superior to the first one in terms of 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:
And in <body>, add:
<div id="nz-planner" onload="nz.init()"></div>
Step 3 - 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 4 - CMS URLs Configuration
For a 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
Note that in 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.