CheckWX METAR-TAF Widget

METAR and TAF Feeds For Your Website

Add live METAR and TAF feeds
with just two lines of code!

Learn More
Need More Weather Data or Decoded METARs and TAFs?  Try our Free API

100% Customizable

Use your own CSS to customize the fonts and colors to match your site.

100% Free

Totally free to use on any website.
No signup.  No obligation.

Setup

Step 1:

Copy and paste this script tag near the bottom of your webpage right before the closing </body> tag.


    <script type="text/javascript" src="https://api.checkwx.com/widgets/metartaf.js"></script>
                

Step 2:

Copy and paste this element tag anywhere on your page where you want the METAR or TAF to appear.


    <div class="checkwx-container" data-type="METAR" data-station="DEMO"></div>
                

Step 3:

Edit the data-type and data-station attributes of the element you pasted in Step 2.

Data Attribute Description
data-type

The type of data feed you are requesting  Please specify: "METAR or "TAF"

data-station

The ICAO airport code or location indicator is a four-character alphanumeric code.
You can find a list of ICAO codes on CheckWX.com.

Options:
  • A single ICAO code
  • Multiple ICAO codes separated with commas (Maximum 50)

Step 4 (Optional):

We would appreciate a link back to https://www.checkwx.com some where on your site.

Examples

Single METAR Request:

    <div class="checkwx-container" data-type="METAR" data-station="KPIE"></div>
                


Multiple METAR Request:

    <div class="checkwx-container" data-type="METAR" data-station="KPIE,KSPG"></div>
                    


Single TAF Request:

    <div class="checkwx-container" data-type="TAF" data-station="KPIE,KSPG"></div>
                    


Multiple TAF Request:

    <div class="checkwx-container" data-type="TAF" data-station="KPIE,KTPA"></div>
                    


Custom CSS Layout:

    <style>

    .checkwx-container {
        padding: 10px;
        border-radius: 8px;
        background-color: #bdc3c7;
    }

    .checkwx-container .checkwx-item {
        font-family: Tahoma, sans-serif;
        font-size: 30px;
        color: #3d566e;
    }

    .checkwx-container .checkwx-link {
       color: #1e90ff;
       text-decoration: underline;
    }

    </style>
                

    <div class="checkwx-container" data-type="METAR" data-station="KPIE"></div>