Flight Schedule Widget<\/title>\r\n <link\r\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@latest\/dist\/css\/bootstrap.min.css\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/* Page custom styles *\/\r\n body {\r\n background-color: #f8f9fa !important;\r\n }\r\n\r\n .accordion-button:hover {\r\n background-color: transparent !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n .section {\r\n margin: 2.5rem 0 !important;\r\n }\r\n\r\n .code-box {\r\n background: #e9ecef !important;\r\n padding: 1rem !important;\r\n border-radius: 0.5rem !important;\r\n overflow-x: auto !important;\r\n cursor: pointer !important;\r\n }\r\n\r\n .code-wrapper {\r\n position: relative !important;\r\n }\r\n\r\n .copy-btn {\r\n position: absolute !important;\r\n top: 0.5rem !important;\r\n right: 0.5rem !important;\r\n padding: 0.25rem 0.5rem !important;\r\n font-size: 0.85rem !important;\r\n }\r\n\r\n body h1,\r\n body h2,\r\n body h3,\r\n body h4,\r\n body h5,\r\n body h6 {\r\n font-weight: 700 !important;\r\n padding-bottom: 0px !important;\r\n }\r\n\r\n .col-12 .code-wrapper {\r\n margin-top: 1rem !important;\r\n }\r\n\r\n pre.code-box {\r\n margin-bottom: 4rem !important;\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n \r\n <section id=\"usage\" class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h1>Embed Your Airport Flight Schedule Widget<\/h1>\r\n <p class=\"lead\">\r\n Quickly display real-time departure or arrival schedules on your\r\n website.\r\n <\/p>\r\n <\/div>\r\n\r\n <h2>Getting Started<\/h2>\r\n <p>\r\n Simply copy and paste one of the snippets below into your HTML where\r\n you want the widget to appear. Replace <code>[IATACODE]<\/code> with the \r\n IATA code of the airport you want to display. For example, for Los\r\n Angeles International Airport, use <code>LAX<\/code>.:\r\n <\/p>\r\n\r\n <div class=\"code-wrapper mb-4\">\r\n <h5>Departures:<\/h5>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"departures\"\r\n ><code><script async src=\"https:\/\/fids.flightradar.live\/widgets\/airport\/[IATACODE]\/departures\"><\/script><\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"departures\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"code-wrapper\">\r\n <h5>Arrivals:<\/h5>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"arrivals\"\r\n ><code><script async src=\"https:\/\/fids.flightradar.live\/widgets\/airport\/[IATACODE]\/arrivals\"><\/script><\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"arrivals\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"generator\" class=\"section bg-white\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Code Generator<\/h2>\r\n <p>\r\n Choose your airport and flight type to generate the widget snippet\r\n instantly.\r\n <\/p>\r\n <\/div>\r\n\r\n <form id=\"generator-form\">\r\n <div class=\"row g-3 align-items-end\">\r\n <div class=\"col-md-4\">\r\n <label for=\"iata-input\" class=\"form-label\"\r\n >Airport IATA Code<\/label\r\n >\r\n <input\r\n list=\"airports\"\r\n class=\"form-control\"\r\n id=\"iata-input\"\r\n placeholder=\"e.g. LAX\"\r\n \/>\r\n <datalist id=\"airports\">\r\n \r\n <\/datalist>\r\n <\/div>\r\n\r\n <div class=\"col-md-4\">\r\n <label for=\"flight-type\" class=\"form-label\">Flight Type<\/label>\r\n <select class=\"form-select\" id=\"flight-type\">\r\n <option value=\"departures\">Departures<\/option>\r\n <option value=\"arrivals\">Arrivals<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"col-md-4 d-grid\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-primary btn-lg\"\r\n id=\"generate-btn\"\r\n >\r\n Generate Code\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n\r\n <div id=\"snippet-output\" class=\"mt-4\" style=\"display: none\">\r\n <label for=\"snippet-box\" class=\"form-label\">Your Widget Code<\/label>\r\n <div class=\"input-group\">\r\n <textarea\r\n class=\"form-control\"\r\n id=\"snippet-box\"\r\n rows=\"2\"\r\n readonly\r\n ><\/textarea>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n type=\"button\"\r\n id=\"copy-btn\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"customization\" class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Customize Look & Feel<\/h2>\r\n <p class=\"lead\">\r\n Use CSS overrides to tailor every visual aspect of the widget.\r\n <\/p>\r\n <\/div>\r\n <p>The code snippets below let you adjust:<\/p>\r\n <ul>\r\n <li>\r\n <strong>Container<\/strong>: background, box-shadow, border-radius,\r\n padding\r\n <\/li>\r\n <li>\r\n <strong>Table<\/strong>: header bg color, row stripes, text color,\r\n font size\r\n <\/li>\r\n <li>\r\n <strong>Buttons<\/strong>: info link color, hover effects, border\r\n <\/li>\r\n <li>\r\n <strong>Pagination<\/strong>: page button colors, spacing, active\r\n state\r\n <\/li>\r\n <li>\r\n <strong>Badges<\/strong>: colors for scheduled, active, landed,\r\n cancelled, delayed, default\r\n <\/li>\r\n <li>\r\n <strong>Fonts & Spacing<\/strong>: global font-family, padding,\r\n margin\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"row row-cols-1\">\r\n \r\n <div class=\"col-12 code-wrapper\">\r\n <h5>1. Container Background<\/h5>\r\n <p>\r\n Override the radial gradient or use a solid\/gradient color to fit\r\n your theme.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"bg\"\r\n ><code>.fids-widget.container {\r\n background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d) !important;\r\n}<\/code><\/pre>\r\n <button class=\"btn btn-outline-secondary copy-btn\" data-target=\"bg\">\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>2. Table Header Background<\/h5>\r\n <p>Set a custom background color for the table header cells.<\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"thead\"\r\n ><code>.fids-widget .table thead th {\r\n background-color: #343a40 !important;\r\n color: #ffffff !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"thead\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>3. Table Row Stripe Color<\/h5>\r\n <p>\r\n Change the alternating row shading to any tint you like for better\r\n contrast.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"stripe\"\r\n ><code>.fids-widget .table-striped > tbody > tr:nth-of-type(odd) {\r\n background-color: #f0f8ff !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"stripe\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>4. Table Text Color<\/h5>\r\n <p>Adjust the primary text color for all table cells.<\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"textcolor\"\r\n ><code>.fids-widget .table, \r\n.fids-widget .table td, \r\n.fids-widget .table th {\r\n color: #212529 !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"textcolor\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>5. Info Button Styles<\/h5>\r\n <p>\r\n Customize the color, background, and hover state of the \u201cInfo\u201d\r\n link button.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"btn\"\r\n ><code>.fids-widget .btn-info {\r\n background-color: #17a2b8 !important;\r\n border-color: #117a8b !important;\r\n color: #fff !important;\r\n}\r\n.fids-widget .btn-info:hover {\r\n background-color: #138496 !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"btn\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>6. Pagination Button Colors<\/h5>\r\n <p>\r\n Style the previous\/next buttons and the page selector dropdown.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"pagination\"\r\n ><code>.fids-widget .fids-pagination {\r\n background-color: #6c757d !important;\r\n color: #fff;\r\n}\r\n.fids-widget .form-select {\r\n border-color: #6c757d !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"pagination\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>7. Badge Variants<\/h5>\r\n <p>Override badge background & text color per status:<\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"badges\"\r\n ><code>.fids-widget .badge.bg-primary { \/* Scheduled *\/\r\n background-color: #ffc107 !important;\r\n color: #212529 !important;\r\n}\r\n.fids-widget .badge.bg-success { \/* Active *\/\r\n background-color: #28a745 !important;\r\n}\r\n.fids-widget .badge.bg-secondary { \/* Landed *\/\r\n background-color: #6c757d !important;\r\n}\r\n.fids-widget .badge.bg-danger { \/* Cancelled *\/\r\n background-color: #dc3545 !important;\r\n}\r\n.fids-widget .badge.bg-warning { \/* Delayed *\/\r\n background-color: #fd7e14 !important;\r\n}\r\n.fids-widget .badge.bg-light { \/* Default *\/\r\n background-color: #f8f9fa !important;\r\n color: #212529 !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"badges\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>8. Font & Spacing<\/h5>\r\n <p>\r\n Change global font-family, table padding, and margin for\r\n consistent spacing.\r\n <\/p>\r\n <pre class=\"code-box\" data-snippet=\"spacing\"><code>.fids-widget {\r\n font-family: 'Roboto', sans-serif;\r\n padding: 1rem !important;\r\n}\r\n.fids-widget .table td,\r\n.fids-widget .table th {\r\n padding: 0.75rem !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"spacing\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section\r\n id=\"additional-info\"\r\n class=\"section\"\r\n style=\"background-color: #f8f9fa !important\"\r\n >\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Additional Information<\/h2>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-6\">\r\n <h3>Overview<\/h3>\r\n <p>\r\n This airport widget is designed to seamlessly integrate into your website,\r\n providing real-time flight information with minimal setup. The\r\n flight status schedule widget requires an active internet connection to fetch real-time\r\n flight data. Ensure that your website’s users have access to a\r\n stable connection for the best experience.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <h3>Customization<\/h3>\r\n <p>\r\n The flight schedule widget is highly customizable. You can adjust the size,\r\n colors, and fonts to match your website’s design. Use the provided\r\n CSS snippets to modify the appearance of the airport widget. Customize the\r\n widget’s appearance to match your website’s theme using the\r\n provided CSS snippets.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-6\">\r\n <h3>Integration<\/h3>\r\n <p>\r\n To integrate the flight widget, simply copy the generated code snippet\r\n and paste it into your website’s HTML where you want the widget to\r\n appear. The airport status widget will automatically adjust its size and layout\r\n based on the surrounding content. For advanced integration, you\r\n can use multiple airport widgets on a single page by generating separate\r\n snippets for each airport or flight type. This allows you to\r\n display both arrivals and departures, or information for different\r\n airports, side by side.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <h3>Updates<\/h3>\r\n <p>\r\n The flight schedule widget is regularly updated to ensure compatibility and\r\n security. We recommend checking for updates or new features\r\n periodically to keep your integration current.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-6\">\r\n <h3>Support<\/h3>\r\n <p>\r\n If you encounter any issues or have questions about the airport widget,\r\n please refer to our documentation or contact our support team for\r\n assistance. We are here to help you with any technical\r\n difficulties or customization requests.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <h3>Powerful Tool<\/h3>\r\n <p>\r\n The Airport Flight Schedule Widget is a powerful tool for\r\n enhancing your website’s functionality. By providing real-time\r\n flight information, you can improve user experience and keep your\r\n visitors informed about their travel plans.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"faq\" class=\"section bg-white\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Frequently Asked Questions<\/h2>\r\n <\/div>\r\n <div class=\"accordion\" id=\"faqAccordion\">\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading1\">\r\n <button\r\n class=\"accordion-button\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse1\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faqCollapse1\"\r\n >\r\n What is the purpose of this widget?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse1\"\r\n class=\"accordion-collapse collapse show\"\r\n aria-labelledby=\"faqHeading1\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n The Airport Flight Schedule Widget provides real-time updates on\r\n flight schedules, statuses, and airport information. It is\r\n designed to be easily embedded into your website, allowing\r\n visitors to access flight information without leaving your site.\r\n The airport schedule widget is customizable, enabling you to match its appearance\r\n with your website’s design. It supports both departures and\r\n arrivals, making it versatile for various use cases. The flight status widget\r\n is responsive and mobile-friendly, ensuring a seamless\r\n experience across devices. Additionally, it is powered by\r\n flightradar.live, ensuring accurate and up-to-date information.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading2\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse2\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse2\"\r\n >\r\n What steps are required to add the Flight Status widget to my\r\n website?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse2\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading2\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n To add the Flight Status widget to your site, follow these\r\n steps:\r\n <ol>\r\n <li>\r\n Access our widget configurator and select the Flight Status\r\n widget for customizing a tool to check and display live\r\n flight information.\r\n <\/li>\r\n <li>\r\n Adjust the settings for airline data and flight tracking\r\n options, and click ‘Save’ to generate the embed code.\r\n <\/li>\r\n <li>Copy the provided code snippet from our platform.<\/li>\r\n <li>\r\n Paste this snippet into your website’s HTML where you want\r\n the Flight Status functionalities to be accessible.\r\n <\/li>\r\n <li>\r\n Successfully installed! Your Flight Status widget is now\r\n ready to provide up-to-date flight tracking and information\r\n to travelers visiting your site.\r\n <\/li>\r\n <\/ol>\r\n Should you encounter any issues, our customer support is ready\r\n to assist you.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading3\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse3\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse3\"\r\n >\r\n Can I use this widget for multiple airports?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse3\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading3\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n Yes, you can use the flight schedule widget for multiple airports. Simply\r\n generate a separate code snippet for each airport by entering\r\n the respective IATA code in the generator form. You can then\r\n embed each snippet in different locations on your website to\r\n display flight information for various airports.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading4\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse4\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse4\"\r\n >\r\n Is the widget mobile-friendly?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse4\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading4\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n Yes, the flight schedule widget is designed to be responsive and\r\n mobile-friendly. It will automatically adjust its layout to fit\r\n different screen sizes, ensuring a seamless experience for users\r\n on both desktop and mobile devices.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading5\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse5\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse5\"\r\n >\r\n Is the Flight Status widget compatible with my site builder or\r\n CMS?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse5\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading5\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n Yes, the Flight Status widget is compatible with most website\r\n builders and content management systems (CMS) that allow you to\r\n add custom HTML or JavaScript code. This includes popular\r\n platforms like WordPress, Wix, Squarespace, and Shopify. If\r\n you’re using a specific platform, please refer to its\r\n documentation for instructions on how to add custom code\r\n snippets.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading6\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse6\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse6\"\r\n >\r\n Best way to use the Flight Status widget on your website\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse6\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading6\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n To effectively use the Flight Status widget on your website,\r\n consider the following best practices:\r\n <ul>\r\n <li>\r\n <strong>Placement:<\/strong> Embed the widget in a prominent\r\n location on your site, such as the homepage or a dedicated\r\n travel section, to ensure easy access for users.\r\n <\/li>\r\n <li>\r\n <strong>Customization:<\/strong> Use the provided CSS\r\n snippets to match the flight schedule widget’s appearance with your site’s\r\n design, ensuring a cohesive look and feel.\r\n <\/li>\r\n <li>\r\n <strong>Testing:<\/strong> Test the widget on various devices\r\n and browsers to ensure it displays correctly and functions\r\n as expected.\r\n <\/li>\r\n <li>\r\n <strong>Updates:<\/strong> Regularly check for updates or new\r\n features from flightradar.live to keep your airport widget current\r\n and functional.\r\n <\/li>\r\n <li>\r\n <strong>User Guidance:<\/strong> Provide clear instructions\r\n or tooltips for users on how to use the widget effectively.\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"bg-white text-center py-4\">\r\n <div class=\"container\">\r\n <p class=\"mb-0\">\r\n Powered by\r\n <a href=\"https:\/\/flightradar.live\" target=\"_blank\"\r\n >flightradar.live<\/a\r\n >\r\n <\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@latest\/dist\/umd\/popper.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@latest\/dist\/js\/bootstrap.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ Copy functionality for all code snippets\r\n document.querySelectorAll(\".copy-btn\").forEach(function (btn) {\r\n btn.addEventListener(\"click\", function () {\r\n var key = this.getAttribute(\"data-target\");\r\n var codeEl = document.querySelector(\r\n '[data-snippet=\"' + key + '\"] code'\r\n );\r\n var text = codeEl.innerText;\r\n navigator.clipboard.writeText(text).then(function () {\r\n btn.innerText = \"Copied!\";\r\n setTimeout(function () {\r\n btn.innerText = \"Copy\";\r\n }, 2000);\r\n });\r\n });\r\n });\r\n\r\n \/\/ Click-to-select for code boxes\r\n document.querySelectorAll(\".code-box\").forEach(function (pre) {\r\n pre.addEventListener(\"click\", function () {\r\n var range = document.createRange();\r\n range.selectNodeContents(pre);\r\n var sel = window.getSelection();\r\n sel.removeAllRanges();\r\n sel.addRange(range);\r\n });\r\n });\r\n\r\n \/\/ Generator logic\r\n document\r\n .getElementById(\"generate-btn\")\r\n .addEventListener(\"click\", function () {\r\n var iata = document\r\n .getElementById(\"iata-input\")\r\n .value.trim()\r\n .toUpperCase();\r\n var type = document.getElementById(\"flight-type\").value;\r\n if (!iata) {\r\n alert(\"Please enter an IATA code.\");\r\n return;\r\n }\r\n var code =\r\n '<script async src=\"https:\/\/fids.flightradar.live\/widgets\/airport\/' +\r\n iata +\r\n \"\/\" +\r\n type +\r\n '\"><\\\/script>';\r\n var box = document.getElementById(\"snippet-box\");\r\n box.value = code;\r\n document.getElementById(\"snippet-output\").style.display = \"block\";\r\n });\r\n\r\n \/\/ Copy for generated snippet\r\n document\r\n .getElementById(\"copy-btn\")\r\n .addEventListener(\"click\", function () {\r\n var box = document.getElementById(\"snippet-box\");\r\n box.select();\r\n navigator.clipboard.writeText(box.value);\r\n this.innerText = \"Copied!\";\r\n setTimeout(() => (this.innerText = \"Copy\"), 2000);\r\n });\r\n\r\n \/\/ Fetch the JSON file and populate the datalist\r\n fetch(\"https:\/\/flightradar.live\/assets\/airports_name_iata_nonull.json\")\r\n .then((response) => response.json())\r\n .then((data) => {\r\n const datalist = document.getElementById(\"airports\");\r\n data.forEach((airport) => {\r\n const option = document.createElement(\"option\");\r\n option.value = airport.iata_code;\r\n option.textContent = airport.name + \" (\" + airport.iata_code + \")\";\r\n datalist.appendChild(option);\r\n });\r\n })\r\n .catch((error) => console.error(\"Error loading airports data:\", error));\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Flight Schedule Widget Embed Your Airport Flight Schedule Widget Quickly display real-time departure or arrival schedules on your website. Getting<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":127,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages\/258158"}],"collection":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/comments?post=258158"}],"version-history":[{"count":3,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages\/258158\/revisions"}],"predecessor-version":[{"id":314479,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages\/258158\/revisions\/314479"}],"wp:attachment":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/media?parent=258158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":258158,"date":"2021-07-25T22:06:59","date_gmt":"2021-07-25T20:06:59","guid":{"rendered":"https:\/\/flightradar.live\/?page_id=258158"},"modified":"2025-04-27T19:12:13","modified_gmt":"2025-04-27T17:12:13","slug":"airport-flight-schedule-widgets","status":"publish","type":"page","link":"https:\/\/flightradar.live\/en\/airport-flight-schedule-widgets\/","title":{"rendered":"Airport Flight Schedule Widgets"},"content":{"rendered":"\r\n\r\n\r\n\r\n \r\n \r\n \r\n Flight Schedule Widget<\/title>\r\n <link\r\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@latest\/dist\/css\/bootstrap.min.css\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/* Page custom styles *\/\r\n body {\r\n background-color: #f8f9fa !important;\r\n }\r\n\r\n .accordion-button:hover {\r\n background-color: transparent !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n .section {\r\n margin: 2.5rem 0 !important;\r\n }\r\n\r\n .code-box {\r\n background: #e9ecef !important;\r\n padding: 1rem !important;\r\n border-radius: 0.5rem !important;\r\n overflow-x: auto !important;\r\n cursor: pointer !important;\r\n }\r\n\r\n .code-wrapper {\r\n position: relative !important;\r\n }\r\n\r\n .copy-btn {\r\n position: absolute !important;\r\n top: 0.5rem !important;\r\n right: 0.5rem !important;\r\n padding: 0.25rem 0.5rem !important;\r\n font-size: 0.85rem !important;\r\n }\r\n\r\n body h1,\r\n body h2,\r\n body h3,\r\n body h4,\r\n body h5,\r\n body h6 {\r\n font-weight: 700 !important;\r\n padding-bottom: 0px !important;\r\n }\r\n\r\n .col-12 .code-wrapper {\r\n margin-top: 1rem !important;\r\n }\r\n\r\n pre.code-box {\r\n margin-bottom: 4rem !important;\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n \r\n <section id=\"usage\" class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h1>Embed Your Airport Flight Schedule Widget<\/h1>\r\n <p class=\"lead\">\r\n Quickly display real-time departure or arrival schedules on your\r\n website.\r\n <\/p>\r\n <\/div>\r\n\r\n <h2>Getting Started<\/h2>\r\n <p>\r\n Simply copy and paste one of the snippets below into your HTML where\r\n you want the widget to appear. Replace <code>[IATACODE]<\/code> with the \r\n IATA code of the airport you want to display. For example, for Los\r\n Angeles International Airport, use <code>LAX<\/code>.:\r\n <\/p>\r\n\r\n <div class=\"code-wrapper mb-4\">\r\n <h5>Departures:<\/h5>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"departures\"\r\n ><code><script async src=\"https:\/\/fids.flightradar.live\/widgets\/airport\/[IATACODE]\/departures\"><\/script><\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"departures\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"code-wrapper\">\r\n <h5>Arrivals:<\/h5>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"arrivals\"\r\n ><code><script async src=\"https:\/\/fids.flightradar.live\/widgets\/airport\/[IATACODE]\/arrivals\"><\/script><\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"arrivals\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"generator\" class=\"section bg-white\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Code Generator<\/h2>\r\n <p>\r\n Choose your airport and flight type to generate the widget snippet\r\n instantly.\r\n <\/p>\r\n <\/div>\r\n\r\n <form id=\"generator-form\">\r\n <div class=\"row g-3 align-items-end\">\r\n <div class=\"col-md-4\">\r\n <label for=\"iata-input\" class=\"form-label\"\r\n >Airport IATA Code<\/label\r\n >\r\n <input\r\n list=\"airports\"\r\n class=\"form-control\"\r\n id=\"iata-input\"\r\n placeholder=\"e.g. LAX\"\r\n \/>\r\n <datalist id=\"airports\">\r\n \r\n <\/datalist>\r\n <\/div>\r\n\r\n <div class=\"col-md-4\">\r\n <label for=\"flight-type\" class=\"form-label\">Flight Type<\/label>\r\n <select class=\"form-select\" id=\"flight-type\">\r\n <option value=\"departures\">Departures<\/option>\r\n <option value=\"arrivals\">Arrivals<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"col-md-4 d-grid\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-primary btn-lg\"\r\n id=\"generate-btn\"\r\n >\r\n Generate Code\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n\r\n <div id=\"snippet-output\" class=\"mt-4\" style=\"display: none\">\r\n <label for=\"snippet-box\" class=\"form-label\">Your Widget Code<\/label>\r\n <div class=\"input-group\">\r\n <textarea\r\n class=\"form-control\"\r\n id=\"snippet-box\"\r\n rows=\"2\"\r\n readonly\r\n ><\/textarea>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n type=\"button\"\r\n id=\"copy-btn\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"customization\" class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Customize Look & Feel<\/h2>\r\n <p class=\"lead\">\r\n Use CSS overrides to tailor every visual aspect of the widget.\r\n <\/p>\r\n <\/div>\r\n <p>The code snippets below let you adjust:<\/p>\r\n <ul>\r\n <li>\r\n <strong>Container<\/strong>: background, box-shadow, border-radius,\r\n padding\r\n <\/li>\r\n <li>\r\n <strong>Table<\/strong>: header bg color, row stripes, text color,\r\n font size\r\n <\/li>\r\n <li>\r\n <strong>Buttons<\/strong>: info link color, hover effects, border\r\n <\/li>\r\n <li>\r\n <strong>Pagination<\/strong>: page button colors, spacing, active\r\n state\r\n <\/li>\r\n <li>\r\n <strong>Badges<\/strong>: colors for scheduled, active, landed,\r\n cancelled, delayed, default\r\n <\/li>\r\n <li>\r\n <strong>Fonts & Spacing<\/strong>: global font-family, padding,\r\n margin\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"row row-cols-1\">\r\n \r\n <div class=\"col-12 code-wrapper\">\r\n <h5>1. Container Background<\/h5>\r\n <p>\r\n Override the radial gradient or use a solid\/gradient color to fit\r\n your theme.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"bg\"\r\n ><code>.fids-widget.container {\r\n background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d) !important;\r\n}<\/code><\/pre>\r\n <button class=\"btn btn-outline-secondary copy-btn\" data-target=\"bg\">\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>2. Table Header Background<\/h5>\r\n <p>Set a custom background color for the table header cells.<\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"thead\"\r\n ><code>.fids-widget .table thead th {\r\n background-color: #343a40 !important;\r\n color: #ffffff !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"thead\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>3. Table Row Stripe Color<\/h5>\r\n <p>\r\n Change the alternating row shading to any tint you like for better\r\n contrast.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"stripe\"\r\n ><code>.fids-widget .table-striped > tbody > tr:nth-of-type(odd) {\r\n background-color: #f0f8ff !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"stripe\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>4. Table Text Color<\/h5>\r\n <p>Adjust the primary text color for all table cells.<\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"textcolor\"\r\n ><code>.fids-widget .table, \r\n.fids-widget .table td, \r\n.fids-widget .table th {\r\n color: #212529 !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"textcolor\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>5. Info Button Styles<\/h5>\r\n <p>\r\n Customize the color, background, and hover state of the \u201cInfo\u201d\r\n link button.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"btn\"\r\n ><code>.fids-widget .btn-info {\r\n background-color: #17a2b8 !important;\r\n border-color: #117a8b !important;\r\n color: #fff !important;\r\n}\r\n.fids-widget .btn-info:hover {\r\n background-color: #138496 !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"btn\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>6. Pagination Button Colors<\/h5>\r\n <p>\r\n Style the previous\/next buttons and the page selector dropdown.\r\n <\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"pagination\"\r\n ><code>.fids-widget .fids-pagination {\r\n background-color: #6c757d !important;\r\n color: #fff;\r\n}\r\n.fids-widget .form-select {\r\n border-color: #6c757d !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"pagination\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>7. Badge Variants<\/h5>\r\n <p>Override badge background & text color per status:<\/p>\r\n <pre\r\n class=\"code-box\"\r\n data-snippet=\"badges\"\r\n ><code>.fids-widget .badge.bg-primary { \/* Scheduled *\/\r\n background-color: #ffc107 !important;\r\n color: #212529 !important;\r\n}\r\n.fids-widget .badge.bg-success { \/* Active *\/\r\n background-color: #28a745 !important;\r\n}\r\n.fids-widget .badge.bg-secondary { \/* Landed *\/\r\n background-color: #6c757d !important;\r\n}\r\n.fids-widget .badge.bg-danger { \/* Cancelled *\/\r\n background-color: #dc3545 !important;\r\n}\r\n.fids-widget .badge.bg-warning { \/* Delayed *\/\r\n background-color: #fd7e14 !important;\r\n}\r\n.fids-widget .badge.bg-light { \/* Default *\/\r\n background-color: #f8f9fa !important;\r\n color: #212529 !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"badges\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 code-wrapper\">\r\n <h5>8. Font & Spacing<\/h5>\r\n <p>\r\n Change global font-family, table padding, and margin for\r\n consistent spacing.\r\n <\/p>\r\n <pre class=\"code-box\" data-snippet=\"spacing\"><code>.fids-widget {\r\n font-family: 'Roboto', sans-serif;\r\n padding: 1rem !important;\r\n}\r\n.fids-widget .table td,\r\n.fids-widget .table th {\r\n padding: 0.75rem !important;\r\n}<\/code><\/pre>\r\n <button\r\n class=\"btn btn-outline-secondary copy-btn\"\r\n data-target=\"spacing\"\r\n >\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section\r\n id=\"additional-info\"\r\n class=\"section\"\r\n style=\"background-color: #f8f9fa !important\"\r\n >\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Additional Information<\/h2>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-6\">\r\n <h3>Overview<\/h3>\r\n <p>\r\n This airport widget is designed to seamlessly integrate into your website,\r\n providing real-time flight information with minimal setup. The\r\n flight status schedule widget requires an active internet connection to fetch real-time\r\n flight data. Ensure that your website’s users have access to a\r\n stable connection for the best experience.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <h3>Customization<\/h3>\r\n <p>\r\n The flight schedule widget is highly customizable. You can adjust the size,\r\n colors, and fonts to match your website’s design. Use the provided\r\n CSS snippets to modify the appearance of the airport widget. Customize the\r\n widget’s appearance to match your website’s theme using the\r\n provided CSS snippets.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-6\">\r\n <h3>Integration<\/h3>\r\n <p>\r\n To integrate the flight widget, simply copy the generated code snippet\r\n and paste it into your website’s HTML where you want the widget to\r\n appear. The airport status widget will automatically adjust its size and layout\r\n based on the surrounding content. For advanced integration, you\r\n can use multiple airport widgets on a single page by generating separate\r\n snippets for each airport or flight type. This allows you to\r\n display both arrivals and departures, or information for different\r\n airports, side by side.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <h3>Updates<\/h3>\r\n <p>\r\n The flight schedule widget is regularly updated to ensure compatibility and\r\n security. We recommend checking for updates or new features\r\n periodically to keep your integration current.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-6\">\r\n <h3>Support<\/h3>\r\n <p>\r\n If you encounter any issues or have questions about the airport widget,\r\n please refer to our documentation or contact our support team for\r\n assistance. We are here to help you with any technical\r\n difficulties or customization requests.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <h3>Powerful Tool<\/h3>\r\n <p>\r\n The Airport Flight Schedule Widget is a powerful tool for\r\n enhancing your website’s functionality. By providing real-time\r\n flight information, you can improve user experience and keep your\r\n visitors informed about their travel plans.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"faq\" class=\"section bg-white\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-5\">\r\n <h2>Frequently Asked Questions<\/h2>\r\n <\/div>\r\n <div class=\"accordion\" id=\"faqAccordion\">\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading1\">\r\n <button\r\n class=\"accordion-button\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse1\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faqCollapse1\"\r\n >\r\n What is the purpose of this widget?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse1\"\r\n class=\"accordion-collapse collapse show\"\r\n aria-labelledby=\"faqHeading1\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n The Airport Flight Schedule Widget provides real-time updates on\r\n flight schedules, statuses, and airport information. It is\r\n designed to be easily embedded into your website, allowing\r\n visitors to access flight information without leaving your site.\r\n The airport schedule widget is customizable, enabling you to match its appearance\r\n with your website’s design. It supports both departures and\r\n arrivals, making it versatile for various use cases. The flight status widget\r\n is responsive and mobile-friendly, ensuring a seamless\r\n experience across devices. Additionally, it is powered by\r\n flightradar.live, ensuring accurate and up-to-date information.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading2\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse2\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse2\"\r\n >\r\n What steps are required to add the Flight Status widget to my\r\n website?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse2\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading2\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n To add the Flight Status widget to your site, follow these\r\n steps:\r\n <ol>\r\n <li>\r\n Access our widget configurator and select the Flight Status\r\n widget for customizing a tool to check and display live\r\n flight information.\r\n <\/li>\r\n <li>\r\n Adjust the settings for airline data and flight tracking\r\n options, and click ‘Save’ to generate the embed code.\r\n <\/li>\r\n <li>Copy the provided code snippet from our platform.<\/li>\r\n <li>\r\n Paste this snippet into your website’s HTML where you want\r\n the Flight Status functionalities to be accessible.\r\n <\/li>\r\n <li>\r\n Successfully installed! Your Flight Status widget is now\r\n ready to provide up-to-date flight tracking and information\r\n to travelers visiting your site.\r\n <\/li>\r\n <\/ol>\r\n Should you encounter any issues, our customer support is ready\r\n to assist you.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading3\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse3\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse3\"\r\n >\r\n Can I use this widget for multiple airports?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse3\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading3\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n Yes, you can use the flight schedule widget for multiple airports. Simply\r\n generate a separate code snippet for each airport by entering\r\n the respective IATA code in the generator form. You can then\r\n embed each snippet in different locations on your website to\r\n display flight information for various airports.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading4\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse4\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse4\"\r\n >\r\n Is the widget mobile-friendly?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse4\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading4\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n Yes, the flight schedule widget is designed to be responsive and\r\n mobile-friendly. It will automatically adjust its layout to fit\r\n different screen sizes, ensuring a seamless experience for users\r\n on both desktop and mobile devices.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading5\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse5\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse5\"\r\n >\r\n Is the Flight Status widget compatible with my site builder or\r\n CMS?\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse5\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading5\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n Yes, the Flight Status widget is compatible with most website\r\n builders and content management systems (CMS) that allow you to\r\n add custom HTML or JavaScript code. This includes popular\r\n platforms like WordPress, Wix, Squarespace, and Shopify. If\r\n you’re using a specific platform, please refer to its\r\n documentation for instructions on how to add custom code\r\n snippets.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"accordion-item\">\r\n <h2 class=\"accordion-header\" id=\"faqHeading6\">\r\n <button\r\n class=\"accordion-button collapsed\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#faqCollapse6\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faqCollapse6\"\r\n >\r\n Best way to use the Flight Status widget on your website\r\n <\/button>\r\n <\/h2>\r\n <div\r\n id=\"faqCollapse6\"\r\n class=\"accordion-collapse collapse\"\r\n aria-labelledby=\"faqHeading6\"\r\n data-bs-parent=\"#faqAccordion\"\r\n >\r\n <div class=\"accordion-body\">\r\n To effectively use the Flight Status widget on your website,\r\n consider the following best practices:\r\n <ul>\r\n <li>\r\n <strong>Placement:<\/strong> Embed the widget in a prominent\r\n location on your site, such as the homepage or a dedicated\r\n travel section, to ensure easy access for users.\r\n <\/li>\r\n <li>\r\n <strong>Customization:<\/strong> Use the provided CSS\r\n snippets to match the flight schedule widget’s appearance with your site’s\r\n design, ensuring a cohesive look and feel.\r\n <\/li>\r\n <li>\r\n <strong>Testing:<\/strong> Test the widget on various devices\r\n and browsers to ensure it displays correctly and functions\r\n as expected.\r\n <\/li>\r\n <li>\r\n <strong>Updates:<\/strong> Regularly check for updates or new\r\n features from flightradar.live to keep your airport widget current\r\n and functional.\r\n <\/li>\r\n <li>\r\n <strong>User Guidance:<\/strong> Provide clear instructions\r\n or tooltips for users on how to use the widget effectively.\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"bg-white text-center py-4\">\r\n <div class=\"container\">\r\n <p class=\"mb-0\">\r\n Powered by\r\n <a href=\"https:\/\/flightradar.live\" target=\"_blank\"\r\n >flightradar.live<\/a\r\n >\r\n <\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@latest\/dist\/umd\/popper.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@latest\/dist\/js\/bootstrap.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ Copy functionality for all code snippets\r\n document.querySelectorAll(\".copy-btn\").forEach(function (btn) {\r\n btn.addEventListener(\"click\", function () {\r\n var key = this.getAttribute(\"data-target\");\r\n var codeEl = document.querySelector(\r\n '[data-snippet=\"' + key + '\"] code'\r\n );\r\n var text = codeEl.innerText;\r\n navigator.clipboard.writeText(text).then(function () {\r\n btn.innerText = \"Copied!\";\r\n setTimeout(function () {\r\n btn.innerText = \"Copy\";\r\n }, 2000);\r\n });\r\n });\r\n });\r\n\r\n \/\/ Click-to-select for code boxes\r\n document.querySelectorAll(\".code-box\").forEach(function (pre) {\r\n pre.addEventListener(\"click\", function () {\r\n var range = document.createRange();\r\n range.selectNodeContents(pre);\r\n var sel = window.getSelection();\r\n sel.removeAllRanges();\r\n sel.addRange(range);\r\n });\r\n });\r\n\r\n \/\/ Generator logic\r\n document\r\n .getElementById(\"generate-btn\")\r\n .addEventListener(\"click\", function () {\r\n var iata = document\r\n .getElementById(\"iata-input\")\r\n .value.trim()\r\n .toUpperCase();\r\n var type = document.getElementById(\"flight-type\").value;\r\n if (!iata) {\r\n alert(\"Please enter an IATA code.\");\r\n return;\r\n }\r\n var code =\r\n '<script async src=\"https:\/\/fids.flightradar.live\/widgets\/airport\/' +\r\n iata +\r\n \"\/\" +\r\n type +\r\n '\"><\\\/script>';\r\n var box = document.getElementById(\"snippet-box\");\r\n box.value = code;\r\n document.getElementById(\"snippet-output\").style.display = \"block\";\r\n });\r\n\r\n \/\/ Copy for generated snippet\r\n document\r\n .getElementById(\"copy-btn\")\r\n .addEventListener(\"click\", function () {\r\n var box = document.getElementById(\"snippet-box\");\r\n box.select();\r\n navigator.clipboard.writeText(box.value);\r\n this.innerText = \"Copied!\";\r\n setTimeout(() => (this.innerText = \"Copy\"), 2000);\r\n });\r\n\r\n \/\/ Fetch the JSON file and populate the datalist\r\n fetch(\"https:\/\/flightradar.live\/assets\/airports_name_iata_nonull.json\")\r\n .then((response) => response.json())\r\n .then((data) => {\r\n const datalist = document.getElementById(\"airports\");\r\n data.forEach((airport) => {\r\n const option = document.createElement(\"option\");\r\n option.value = airport.iata_code;\r\n option.textContent = airport.name + \" (\" + airport.iata_code + \")\";\r\n datalist.appendChild(option);\r\n });\r\n })\r\n .catch((error) => console.error(\"Error loading airports data:\", error));\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Flight Schedule Widget Embed Your Airport Flight Schedule Widget Quickly display real-time departure or arrival schedules on your website. Getting<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":127,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages\/258158"}],"collection":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/comments?post=258158"}],"version-history":[{"count":3,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages\/258158\/revisions"}],"predecessor-version":[{"id":314479,"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/pages\/258158\/revisions\/314479"}],"wp:attachment":[{"href":"https:\/\/flightradar.live\/en\/wp-json\/wp\/v2\/media?parent=258158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}