Flight Schedule Widget

Embed Your Airport Flight Schedule Widget

Quickly display real-time departure or arrival schedules on your website.

Getting Started

Simply copy and paste one of the snippets below into your HTML where you want the widget to appear:

Departures:

<script async src="https://fids.flightradar.live/widgets/airport/[IATACODE]/departures"></script>

Arrivals:

<script async src="https://fids.flightradar.live/widgets/airport/[IATACODE]/arrivals"></script>

Code Generator

Choose your airport and flight type to generate the widget snippet instantly.

Customize Look & Feel

Use CSS overrides to tailor every visual aspect of the widget.

The code snippets below let you adjust:

Container: background, box-shadow, border-radius, padding
Table: header bg color, row stripes, text color, font size
Buttons: info link color, hover effects, border
Pagination: page button colors, spacing, active state
Badges: colors for scheduled, active, landed, cancelled, delayed, default
Fonts & Spacing: global font-family, padding, margin

1. Container Background

Override the radial gradient or use a solid/gradient color to fit your theme.

.fids-widget.container {
  background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d) !important;
}

2. Table Header Background

Set a custom background color for the table header cells.

.fids-widget .table thead th {
  background-color: #343a40 !important;
  color: #ffffff !important;
}

3. Table Row Stripe Color

Change the alternating row shading to any tint you like for better contrast.

.fids-widget .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f0f8ff !important;
}

4. Table Text Color

Adjust the primary text color for all table cells.

.fids-widget .table, 
.fids-widget .table td, 
.fids-widget .table th {
  color: #212529 !important;
}

5. Info Button Styles

Customize the color, background, and hover state of the “Info” link button.

.fids-widget .btn-info {
  background-color: #17a2b8 !important;
  border-color: #117a8b !important;
  color: #fff !important;
}
.fids-widget .btn-info:hover {
  background-color: #138496 !important;
}

6. Pagination Button Colors

Style the previous/next buttons and the page selector dropdown.

.fids-widget .fids-pagination {
  background-color: #6c757d !important;
  color: #fff;
}
.fids-widget .form-select {
  border-color: #6c757d !important;
}

7. Badge Variants

Override badge background & text color per status:

.fids-widget .badge.bg-primary { /* Scheduled */
  background-color: #ffc107 !important;
  color: #212529 !important;
}
.fids-widget .badge.bg-success { /* Active */
  background-color: #28a745 !important;
}
.fids-widget .badge.bg-secondary { /* Landed */
  background-color: #6c757d !important;
}
.fids-widget .badge.bg-danger { /* Cancelled */
  background-color: #dc3545 !important;
}
.fids-widget .badge.bg-warning { /* Delayed */
  background-color: #fd7e14 !important;
}
.fids-widget .badge.bg-light { /* Default */
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

8. Font & Spacing

Change global font-family, table padding, and margin for consistent spacing.

.fids-widget {
  font-family: 'Roboto', sans-serif;
  padding: 1rem !important;
}
.fids-widget .table td,
.fids-widget .table th {
  padding: 0.75rem !important;
}

Additional Information

Overview

This airport widget is designed to seamlessly integrate into your website, providing real-time flight information with minimal setup. The flight status schedule widget requires an active internet connection to fetch real-time flight data. Ensure that your website’s users have access to a stable connection for the best experience.

Customization

The flight schedule widget is highly customizable. You can adjust the size, colors, and fonts to match your website’s design. Use the provided CSS snippets to modify the appearance of the airport widget. Customize the widget’s appearance to match your website’s theme using the provided CSS snippets.

Integration

To integrate the flight widget, simply copy the generated code snippet and paste it into your website’s HTML where you want the widget to appear. The airport status widget will automatically adjust its size and layout based on the surrounding content. For advanced integration, you can use multiple airport widgets on a single page by generating separate snippets for each airport or flight type. This allows you to display both arrivals and departures, or information for different airports, side by side.

Updates

The flight schedule widget is regularly updated to ensure compatibility and security. We recommend checking for updates or new features periodically to keep your integration current.

Support

If you encounter any issues or have questions about the airport widget, please refer to our documentation or contact our support team for assistance. We are here to help you with any technical difficulties or customization requests.

Powerful Tool

The Airport Flight Schedule Widget is a powerful tool for enhancing your website’s functionality. By providing real-time flight information, you can improve user experience and keep your visitors informed about their travel plans.

Frequently Asked Questions

The Airport Flight Schedule Widget provides real-time updates on flight schedules, statuses, and airport information. It is designed to be easily embedded into your website, allowing visitors to access flight information without leaving your site. The airport schedule widget is customizable, enabling you to match its appearance with your website’s design. It supports both departures and arrivals, making it versatile for various use cases. The flight status widget is responsive and mobile-friendly, ensuring a seamless experience across devices. Additionally, it is powered by flightradar.live, ensuring accurate and up-to-date information.

To add the Flight Status widget to your site, follow these steps:

Access our widget configurator and select the Flight Status widget for customizing a tool to check and display live flight information.
Adjust the settings for airline data and flight tracking options, and click ‘Save’ to generate the embed code.
Copy the provided code snippet from our platform.
Paste this snippet into your website’s HTML where you want the Flight Status functionalities to be accessible.
Successfully installed! Your Flight Status widget is now ready to provide up-to-date flight tracking and information to travelers visiting your site.

Should you encounter any issues, our customer support is ready to assist you.

Yes, you can use the flight schedule widget for multiple airports. Simply generate a separate code snippet for each airport by entering the respective IATA code in the generator form. You can then embed each snippet in different locations on your website to display flight information for various airports.

Yes, the flight schedule widget is designed to be responsive and mobile-friendly. It will automatically adjust its layout to fit different screen sizes, ensuring a seamless experience for users on both desktop and mobile devices.

Yes, the Flight Status widget is compatible with most website builders and content management systems (CMS) that allow you to add custom HTML or JavaScript code. This includes popular platforms like WordPress, Wix, Squarespace, and Shopify. If you’re using a specific platform, please refer to its documentation for instructions on how to add custom code snippets.

To effectively use the Flight Status widget on your website, consider the following best practices:

Placement: Embed the widget in a prominent location on your site, such as the homepage or a dedicated travel section, to ensure easy access for users.
Customization: Use the provided CSS snippets to match the flight schedule widget’s appearance with your site’s design, ensuring a cohesive look and feel.
Testing: Test the widget on various devices and browsers to ensure it displays correctly and functions as expected.
Updates: Regularly check for updates or new features from flightradar.live to keep your airport widget current and functional.
User Guidance: Provide clear instructions or tooltips for users on how to use the widget effectively.