Flight Search Widget - Customization
The Flight Search Form Custom Element is a web component that you can use in your website to display a flight search form. You can use it as a standard HTML element, and you don't need to have a React application to use it.
Installation
To include the flight-search-form custom element in your project, add the following script tag to your HTML file:
<script src="https://unpkg.com/airport-one-embeddable-widgets@latest/dist/airport-one-embeddable-widgets.iife.js"></script>
Usage
To use the flight-search-form custom element, simply add the following HTML tag to your markup:<flight-search-form></flight-search-form>
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 |
| destinations | string | null | A comma-separated list of destination codes |
| primaryColor | string | null | The primary color of form elements. Input focus, Button and Calendar colors. |
| 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 |
| providers | string | null | A comma-separated list of provider codes |
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>
Styling
Flight Search Widget: Element Descriptions
The main container wrapping the entire flight search widget. Target this to style the overall appearance.
The form inside the widget that contains the search inputs and buttons. Customize this to modify the form layout and styling.
Holds the autocomplete functionality for the departure and arrival airports. Style this container to enhance the autocomplete feature.
Wraps each autocomplete input. Target this to customize the wrapper around the autocomplete input fields.
The icon associated with the autocomplete input field. Style this to change the icon's appearance.
The input field for the autocomplete feature. Modify its appearance and behavior as needed.
The switch button that allows users to swap departure and arrival airports. Style this to improve visual appeal and click-feedback.
The SVG graphic within the switch button. Customize this for the desired visual effect.
Holds the date range inputs for selecting departure and return dates. Customize this for layout and styling of the date inputs.
The icon within the date range inputs. Style this to change the appearance of the date selection icons.
The input field for selecting the departure date. Modify its appearance and behavior as needed.
The vertical line separator between the departure and return date inputs. Style this to create a distinct separator effect.
The input field for selecting the return date. Modify its appearance and behavior as needed.
The container that holds the search button. Customize this to adjust the button's position within the widget.
The search button that submits the flight search. Style this for visual appeal and interactive feedback.
The SVG graphic within the search button. Customize this for the desired visual effect.
/* Targeting the main container */
flight-search-form::part(flight-search-widget-container) {
background-color: #f9f9f9;
border-radius: 5px;
}
/* Styling the form inside the widget */
flight-search-form::part(flight-search-widget-form) {
padding: 20px;
}
/* Enhancing the autocomplete container */
flight-search-form::part(flight-search-widget-autocomplete-container) {
background-color: #fff;
border: 1px solid #ddd;
}
/* Customizing the autocomplete wrapper */
flight-search-form::part(flight-search-widget-autocomplete-wrapper) {
padding: 10px;
}
/* Changing the autocomplete icon's appearance */
flight-search-form::part(flight-search-widget-autocomplete-icon) {
fill: #888;
}
/* Modifying the appearance and behavior of the autocomplete input field */
flight-search-form::part(flight-search-widget-autocomplete-input) {
border: none;
outline: none;
}
/* Styling the switch button */
flight-search-form::part(flight-search-widget-switch) {
background-color: #007BFF;
color: #fff;
}
/* Customizing the switch button SVG graphic */
flight-search-form::part(flight-search-widget-switch-svg) {
fill: #fff;
}
/* Customizing the date range container */
flight-search-form::part(flight-search-widget-date-range-container) {
display: flex;
justify-content: space-between;
}
/* Changing the appearance of the date selection icons */
flight-search-form::part(flight-search-widget-date-range-icon) {
fill: #888;
}
/* Modifying the appearance of the departure date input field */
flight-search-form::part(flight-search-widget-date-range-start-date-input) {
border: none;
outline: none;
}
/* Styling the vertical line separator */
flight-search-form::part(flight-search-widget-date-range-vertical-line-separator) {
border-left: 1px solid #ddd;
}
/* Modifying the appearance of the return date input field */
flight-search-form::part(flight-search-widget-date-range-end-date-input) {
border: none;
outline: none;
}
/* Customizing the search button container */
flight-search-form::part(flight-search-widget-search-button-container) {
text-align: right;
}
/* Styling the search button */
flight-search-form::part(flight-search-widget-search-button) {
background-color: #007BFF;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
/* Customizing the search button SVG graphic */
flight-search-form::part(flight-search-widget-search-button-svg) {
fill: #fff;
}
Reverse 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>
Styling Your Widget
We've left the styling of the widget up to you! It comes with two customizable settings: primaryColor and theme. These settings control the colors of the text and the buttons. By default, the widget has a transparent background. Therefore, if it's placed on a dark element, you should set the theme in the shortcode to "dark" to change the text color to white. In the example below, the widget is placed in a container with specific styles. Please note that these styles are controlled by the terminal's website CSS:
.example {
background-color:black;
padding:20px;
border-radius:20px;
margin:20px 0;
}
The settings in the shortcode would be as follows;
<flight-search-form theme="dark" primaryColor="#FFA500"></flight-search-form>