Embedding travel booking widgets into your website

August 18, 2025
This introduction article outlines our 4 main widgets.
Introduction

It is recommended to read our introduction about the travel booking flow widgets and the pages you need to create to support this in this article first.


In summary, the introduction article outlines our 4 main widgets (Searchbox, Results, Availability & Extras, Payment) and the pages you need to create on your website (results, availability & payment) - if we are building your website, we will set these up for you.


 


Getting Your Widget Embed Code

In the sections below, we reference obtaining your own widget code for each of the widgets. To obtain your own widget embed code, just login to your Travelify portal, go to "My Widgets", select the widget you want to embed and, as per the screenshot below, each of your widgets will have a green "Add to website" button which will give you a popup containing the custom HTML code you will need to embed that widget.



Elements Script

Any page that is going to host one (or more) of our widgets needs to have a link to our elements script (it only needs to be added once per page, no matter how many widgets you have on the page). This script should be placed within your page HTML head tags, as close to the end of the head tags as possible. The elements script takes care of loading all of our widgets on the page. It does not affect the loading speed of the page due to the use of the defer attribute (read more about this here). Our latest version now includes an SRI hash for extra security (read more about this here). We also recommend adding the two preconnect links as this can also improve performance with our widgets and the API that powers them.

<head>

...

<link rel="preconnect" href="https://static.travelify.io/" crossorigin />

<link rel="preconnect" href="https://api.travelify.io/" crossorigin />

<script src="https://static.travelify.io/travelify-elements-v1.0.js" integrity="sha512-TeuOMwttHUA+dk4DWHURBgBpRitNvXpCkpTe1UqT9lVlX9kRmaSnIdNo9Nw1UN4EAreRrUXY7i+mba21mLfB4w==" crossorigin="anonymous" defer="defer"></script>

</head>

Searchbox Widget

The first part of the customer booking journey is the searchbox widget which allows customers to search for the product(s) that they would like to book.


Once the searchbox is set up and styled as per your requirements, you can place this on one or as many pages as you require. We recommend placing this in a prominent position on your homepage to help drive bookings.


To embed the searchbox widget into your website, you will normally need a HTML module/plugin (depends on the website builder or platform you are using) and you will place this in the exact position on your page where you want the searchbox to appear. Once you have placed your HTML module/plugin on the page, you can copy your widget code into it as below (this is an example and you will need to get your own widget code by clicking on the "Add to website" button inside Travelify).

<travel-searchbox widgetid="00000" class="travelify-widget"></travel-searchbox>

Important widget setting: you must ensure that you have set the Url to your results page in the searchbox settings (under Miscellaneous). We recommend setting the relative Url to the page rather than the full domain (eg. /results) as below example.

Results Widget

The second page of the booking journey is the results page & widget. This is the page that the customer will be redirected to after performing a search using the searchbox widget.

We recomment that this is the only widget and content on the page (barring header, navigation and footer) as the results widget is design to take up the full page.


Just like the searchbox, ensure you have the elements script on the page, place a HTML module/plugin on the page and paste your results widget code into it as below (again, this is an example only and you need to obtain your own widget code from your Travelify admin).


<travel-results widgetid="00000" class="travelify-widget"></travel-results>


Important widget settings: you must ensure that you have set the Url to your availability/extras page in the widget settings (under Layout). We recommend setting the relative Url to the page rather than the full domain (eg. /availability) as below example. You can also set the Url to your homepage in the other field.

Availability & Extras Widget

The third page of the booking journey is the availability & extras page and widget. This is the page that the customer will be redirected to after selecting a result. It is responsible for not only collecting the travelling passenger/guest information, but can also be used to upsell optional extras such as flight extras (baggage, meal and seat options), transfers, car rental, insurance and various other extras that you want to upsell.

We recomment that this is the only widget and content on the page (barring header, navigation and footer) as the results widget is design to take up the full page.


Just like the results page, ensure you have the elements script on the page, place a HTML module/plugin on the page and paste your availability extras widget code into it as below (again, this is an example only and you need to obtain your own widget code from your Travelify admin).


<travel-avail-extras widgetid="00000" class="travelify-widget"></travel-avail-extras>


Important widget settings: you must ensure that you have set the Url to your basket/payment page in the widget settings (under Layout). We recommend setting the relative Url to the page rather than the full domain (eg. /basket) as below example. You can also set the Url to your results page and homepage in the other fields.

Basket/Payment Widget

The final page of the booking journey is the basket/payment page and widget. This is the page that the customer will be redirected to after entering passenger/guest information and selecting any optional extras. It is responsible for collecting the billing details and processing any payment information from the customer using your payment gateway of choice.

We recomment that this is the only widget and content on the page (barring header, navigation and footer) as the results widget is design to take up the full page.


Just like the last two pages, ensure you have the elements script on the page, place a HTML module/plugin on the page and paste your basket widget code into it as below (again, this is an example only and you need to obtain your own widget code from your Travelify admin).


<travel-basket widgetid="00000" class="travelify-widget"></travel-basket>

 



That completes the customer booking journey as the confirmation is displayed within the basket/payment widget. Our other widgets can normally be placed where required on your website.


< Older Post

 Newer Post >

Creating a New Role in Travelify

November 28, 2025
VIDEO TRAINING - This Guide will walk you through the process of creating a new Role in Travelify.

Creating a New User in Travelify

November 27, 2025
VIDEO TRAINING - This Guide walks you through the process of creating a New User in Travelify

Adding Promotion Code in Travelify - Step 1

November 26, 2025
VIDEO TRAINING - Learn how to efficiently add a Promotion Code in Travelify

Adding a Promotion Code in Travelify - Step 2

November 25, 2025
VIDEO TRAINING - Learn how to efficiently complete the process of adding a Voucher Code in Travelify

Order Manager in Travelify

November 24, 2025
VIDEO TRAINING - This Guide will walk you through the process of using the Order Manager in Travelify

Using the CRM in Travelify

November 23, 2025
VIDEO TRAINING - Explore this Guide to efficiently navigate the CRM feature in Travelify

Adding Suppliers from the Supplier Directory

November 22, 2025
VIDEO TRAINING - This Guide will walk you through the process step-by-step to efficiently add Suppliers to your platform.

Standard Pricing Rules (Accommodation) in Travelify

November 21, 2025
VIDEO TRAINING - This Guide will walk you through setting up Standard Pricing Rules for Accommodation in Travelify

Standard Pricing Rules (Flights) in Travelify

November 20, 2025
VIDEO TRAINING - Explore the comprehensive Guide to utilising Pricing Rules in Travelify

Standard Pricing Rules (Dynamic Packaging) in Travelify

November 19, 2025
VIDEO TRAINING - This Guide will walk you through configuring Standard Pricing Rules for Dynamic Packages in Travelify
Show More