Flight Search Widget

Documentation on how to set up the flight search widget

Airport Information

1

Please enter a subscribing airport.
Please enter an origin.
Please enter a destination.

Appearance Options

Please select a theme.

Background

2

Add a widget background?

Adding a background can help the widget stand out - especially on white or minimal pages. This is optional, but recommended if your site has a light or white background and you want to visually separate the widget from surrounding content.

px
px

Sizing

3

Set the width of the widget?

This depends on the container the widget is placed in. If you're using a platform like WordPress and the container already has a defined width, you likely don't need to adjust this setting.

px
Center the widget?

Live Preview

Copy Your Widget Code!

4

Now paste it into your website!

The Flight Search Widget is availble to you as standard HTML web component, that you can use within any site from an airport terminal website to a CVB or local business. If you a not a client of FlyMyAirport™ we would ask you to complete the following Widget Application form.

Installation

Step 1

First, we need to include the JavaScript file in the site. You can either add it globally in the <head> section of your HTML (so it's loaded site-wide), or you can include it alongside each shortcode instance of the widget.

Global Placement: If you add the script globally, you only need to include it once across the entire site.
Local Placement: If you choose to include the script with each shortcode, you'll need to add the script tag every time you use the widget shortcode.

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

Step 2

Second we need to place the folling code where you would like to place the widget.

<flight-search-form subscribingAirport="IATA" primaryColor="#000000" secondaryColor="#C6C6C6" ></flight-search-form>

Please ensure that you set the following widget attributes to your Aiport's IATA and colors: "subscribingAirport", "primaryColor" and "secondaryColor" .

Attributes

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

Example
attribute="string" | primaryColor="#000000"

Attribute Type Default Description
subscribingAirport * string null

For accurate analytics please ensure you set this field to the subscribing airport's IATA.

primaryColor * string null The primary color of form elements. Input focus, Button, and Calendar colors.
secondaryColor * string null The hover color of buttons
origin string null

If you want to create an outbound search widget, this value should be the airport's 3-letter IATA.

destination string null

If you want to create an inbound search widget, this value should be the airport's 3-letter IATA, omitting the origin airport.

theme string null Options: light | dark
If the widget is placed on a white background, select light; if on a black background, select dark.
Advanced Settings
locationId string null The location identifier - Use only capital letters and numbers (1-10 characters max).
NOTE: Widget will not load if this is incorrect!
airlines string null A comma-separated list of airline codes.
destinations string null A comma-separated list of destination codes.
providers string null A comma-separated list of provider codes.
Show advanced settings

Examples Codes

If you'd like to create a search widget for passengers departing from your airport or the surrounding area, set the origin attribute to your airport's IATA code and leave the destination attribute blank.

The example below is for Chicago, ORD in the subsribingAiport should be replaced with your airports IATA code.

<flight-search-form subscribingAirport="ORD" origin="ORD"></flight-search-form>

If you'd like to create a search widget for passengers inbound to your airport or the surrounding area, set the destination attribute to your airport's IATA code and leave the origin attribute blank.

The example below is for Chicago, ORD in the subsribingAiport should be replaced with your airports IATA code.

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

If you'd like to promote a particular route, you can set both the origin and destination attributes. For example, setting the origin to ORD and the destination to LAX will create a route from Chicago to Los Angeles. In reports, attribution will be credited to ORD as the subscribing airport.

The example below is for Chicago, ORD in the subsribingAiport should be replaced with your airports IATA code.

<flight-search-form subscribingAirport="ORD" origin="ORD" destination="LAX"></flight-search-form>

Still have support questions?

Contact us today!