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. |
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 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 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 should be replaced with your airports IATA code.
<flight-search-form subscribingAirport="ORD" origin="ORD" destination="LAX"></flight-search-form>
Styling Your Widget
We've left the styling of the widget up to you! It comes with there styling settings: primaryColor, secondaryColor and theme. These settings control the color of the text and buttons. By default, the widget has a transparent background. Therefore, if it’s placed on a dark background, you should set the theme attribute to "dark" to change the text color to white.
In the example below, the widget is placed inside a container with specific styles. Please note that these styles are controlled by your website’s CSS:
.example {
background-color:#5c5c5c;
padding:20px;
border-radius:20px;
margin:20px 0;
}
The above CSS and the following attributes in the shortcode would output the following example;
<div class="example"><flight-search-form theme="dark" primaryColor="#FFA500"> secondaryColor="#FF0000"></flight-search-form></div>