Flight Search Form Custom Element

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 | | --------------------- | ------ | ------- | ------------------------------------------- | | subscribingAirport | string | null | The subscribing airport code | | 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 | | secondaryColor | string | null | The secondary color of the form | | locationId | string | null | The location identifier | | experimentId | string | null | The experiment identifier | | clickId | string | null | The click identifier | | arrivalAirportLabel | string | null | The label for the arrival airport input | | departureAirportLabel | string | null | The label for the departure airport input | | departureDateLabel | string | null | The label for the departure date input | | returnDateLabel | string | null | The label for the return date input | | 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

For example, to set the origin and destination airports, you can use the following markup:

<flight-search-form origin="JFK" destination="LAX"></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.

Example usage

/* 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;
}

Consent Management

How to dynamically manage user consent preferences and pass them into the widget

There are two consent categories that can optionally be turned off/on via DOM manipulation and modifying attributes on the widget.

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

...

// Call a similar function via your CMP integration to pass in the consent values for Analytics or Advertising
function changeConsent(consentAdvertising, consentAnalytics) {
  // Select the flightWidget element
  var flightWidget = document.getElementsByTagName('flight-search-form');

  // Set user's advertising consent from CMP
  flightWidget.setAttribute('consentAdvertising', consentAdvertising); // consentAdvertising param should be a string of "true" or "false"

  // Set user's analytics consent from CMP
  flightWidget.setAttribute('consentAnalytics', 'true') // consentAnalytics param should be a string of "true" or "false"
}