Flight Search Widget

The Flight Search widget is a simple web component that you can use in your website to display a flight search. It is a simple HTML element that will require minimue to no technical knowledge.

Installation

Step 1

To include the Flight Search Widget you will need to place the following script tag within the HTML code of the desired page:

<script src="https://unpkg.com/airport-one-embeddable-widgets@latest/dist/airport-one-embeddable-widgets.iife.js"></script>

NOTE: If you are using a CMS like WordPress, you can add the script tag to the header of your website by adding it to the header.php file of your theme, within the <head> tag. Using this apporach you will only need to use this code once, and the widget will be available on all pages of your website.

Step 2

To use the Flight Serach Widget you can place the following code where you want the widget to appear, changing YOUR_IATA with your airport IATA code: <flight-search-form origin="YOUR_IATA" ></flight-search-form>

Customizing Your Widget

You can customize the behavior and appearance of the element by setting its attributes. The available attributes are listed in the table below:

Attribute	Type	Default	Description
origin	string	null	The origin airport code
destination	string	null	The destination airport code
airlines	string	null	A comma-separated list of airline codes
providers	string	null	A comma-separated list of provider codes
destinations	string	null	A comma-separated list of destination codes
primaryColor	string	null	The primary color of the form
secondaryColor	string	null	The secondary color of the form
locationId	string	null	The location identifier - Use only capital letter and numbers 1-10 Chracters max. NOTE: widget will not load if this is incorrect!
theme	string	null	Options: light \| dark If the widget is placed on a white background select light, if on a black background select dark

Examples

For example, to set the origin you can use the following markup, changing ORD with your airports IATA code: <flight-search-form origin="ORD"></flight-search-form>

Destination Widget

(CVB, 3rd party website)

For example, to set the destination to your airport you can use the following markup, changing ORD with your airports IATA code:

<flight-search-form destination="ORD" ></flight-search-form>