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