This easy-to-implement widget automatically displays a grid of recently observed fares from the KAYAK environment. No complex setup or customization is required - just add the two HTML snippets below to your website. The widget will inherit the default color scheme from your FMA environment for a seamless, on-brand experience.
Installation
Paste the following two code snippets in your site content editor at the location you want it to appear.
Part 1
<script src="https://widgets.flymyairport.com"></script>
Part 2
<fma-airfare-content></fma-airfare-content>
Customizations
Attributes
Customization is rarely necessary, but if you'd like to place the widget on a specific background color or showcase a curated set of destinations, you can use the following attributes. These should be added to Part 2 of the embed code.
Example - attribute="string" e.g.secondary-Color="#000000"
| Attribute | Type | Default | Description |
|---|---|---|---|
| origin | string | null |
If you want to create an outbound search widget, this value should be the airport's 3-letter IATA. |
| primary-Color | string | null | Not used |
| secondary-Color | string | null | The color of the price in the grid |
| destination | string | null |
A comma-separated list of destination codes. |
| 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 | |||
| consentAdvertising | string | true | Dynamically turn off/on consent for Advertising - by passing a "true" or "false" |
| consentAnalytics | string | true | Dynamically turn off/on consent for Analytics - by passing a "true" or "false" |
Examples Codes
The widget automatically inherits the colors from your FlyMyAirport environment. If you need to override the Price within the content you can do so my setting the secondary-Color.
Adding the following: secondary-color="#079115"
<fma-airfare-content secondary-color="#079115"></fma-airfare-content>
Using the destinations attribute you can set the destinations that will be displayed in the widget. The example below is for Chicago, ORD and Los Angeles, LAX.
Adding the following: destinations="JFK,LAX,DEN,LHR"
<fma-airfare-content destinations="JFK,LAX,DEN,LHR"></fma-airfare-content>
NOTE: For a result to show for the destiation, searches must have happened within the FMA or Kayak enviorment.
There are two elements you can target with CSS.
fma-airfare-content::part(airfare-content-container) { }
fma-airfare-content::part(airfare-content-item) { }
The first element is the container that holds the entire widget. The second element is the individual flight item.
Example
The following shortcode would be used to the load the widget.
<fma-airfare-content theme="dark" secondary-color="#D2490E"></fma-airfare-content>
The below CSS would create the following exmaple;
<style>
/* Style the main container */
fma-airfare-content::part(airfare-content-container) {
background-color: #003061;
border-radius: 8px;
padding: 16px;
transition: background-color 0.3s ease;
}
/* Style individual flight items */
fma-airfare-content::part(airfare-content-item) {
text-align: center;
font-weight: bold;
}
</style>
If you’re an airport looking to place the widget on a partner website – or a partner of a subscribing airport requesting permission to embed the widget on your site – please complete the form below. The FlyMyAirport team must complete an internal setup before the widget will function, so be sure to submit the request prior to adding the code to your site.