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
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
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>

Styling

Flight Search Widget: Element Descriptions

1. flight-search-widget-container

The main container wrapping the entire flight search widget. Target this to style the overall appearance.

2. flight-search-widget-form

The form inside the widget that contains the search inputs and buttons. Customize this to modify the form layout and styling.

3. flight-search-widget-autocomplete-container

Holds the autocomplete functionality for the departure and arrival airports. Style this container to enhance the autocomplete feature.

4. flight-search-widget-autocomplete-wrapper

Wraps each autocomplete input. Target this to customize the wrapper around the autocomplete input fields.

5. flight-search-widget-autocomplete-icon

The icon associated with the autocomplete input field. Style this to change the icon's appearance.

6. flight-search-widget-autocomplete-input

The input field for the autocomplete feature. Modify its appearance and behavior as needed.

7. flight-search-widget-switch

The switch button that allows users to swap departure and arrival airports. Style this to improve visual appeal and click-feedback.

8. flight-search-widget-switch-svg

The SVG graphic within the switch button. Customize this for the desired visual effect.

9. flight-search-widget-date-range-container

Holds the date range inputs for selecting departure and return dates. Customize this for layout and styling of the date inputs.

10. flight-search-widget-date-range-icon

The icon within the date range inputs. Style this to change the appearance of the date selection icons.

11. flight-search-widget-date-range-start-date-input

The input field for selecting the departure date. Modify its appearance and behavior as needed.

12. flight-search-widget-date-range-vertical-line-separator

The vertical line separator between the departure and return date inputs. Style this to create a distinct separator effect.

13. flight-search-widget-date-range-end-date-input

The input field for selecting the return date. Modify its appearance and behavior as needed.

14. flight-search-widget-search-button-container

The container that holds the search button. Customize this to adjust the button's position within the widget.

15. flight-search-widget-search-button

The search button that submits the flight search. Style this for visual appeal and interactive feedback.

16. flight-search-widget-search-button-svg

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>