Country:
Languages: Español | English | More...
Selected Language: en


Getting Started

Step 1: Provision Your Domain

After licensing Max Web - Weather Widgets for your website, please send an email to twcdigitalsupport@us.ibm.com containing a list of all web domains on which the widgets will be embedded. The widgets and map will only work on domains that are provisioned by TWC.

The TWC Support team will setup your account for the specified web domains and send a return email with the IDs required for your code.

ID NameDescription
cid A unique account identifier required to load the widgets on allowed domains.

Step 2: Add the TWC JavaScript

In the or of your HTML page, reference the one of the JavaScript files below with your unique cid value appended as a query parameter. The web page must always use a Weather Company URL as the script src. Copying and serving this code from a local file is prohibited.

There are two production widget environments; standard and long-term stable. Use only one of the following scripts on the web page.

The standard environment always receives the latest widget features and other updates as soon as they are released. Improvements to this environment can occur as frequently as every two weeks.

Use the script below to implement the standard environment code on your website.

<script type="text/javascript" src="https://widgets.media.weather.com/wxwidget.loader.js?cid=[Your ID]"></script>

 

The long-term stable environment will receive updates less frequently than the standard environment. The long-term stable code will be updated to match the standard version during the following months: February, May, August, October. All other changes to long-term stable code are restricted to emergency patches and bug fixes.

Use the script below to implement the long-term stable environment code on your website.

<script type="text/javascript" src="https://widgets-lts.media.weather.com/wxwidget.loader.js?cid=[Your ID]"></script>

 

Step 3: Add TWC Widget Tags

A sample widget tag is:

<wx-widget type="current-conditions" latitude="40.71" longitude="-73.98"></wx-widget>

When the page loads, the TWC JavaScript will locate all widget and map tags on the page and replace them with the specified weather content. Each type of widget and map has a defined set of arguments used for customizing the display.

If embedding more than one widget on the page, you can also use the <wx-config> tag to define global attributes that apply to all widgets.

<wx-config language="en" latitude="38.91" longitude="-77.04" group="true"></wx-config>
<p><wx-widget type="search"></wx-widget></p>
<p><wx-widget type="alerts"></wx-widget></p>
<p><wx-widget type="current-conditions"></wx-widget></p>
<p><wx-widget type="daily-forecast"></wx-widget></p>

Try our configuration tool to generate widget code.

Configuration Tool »


HTML Tag Configuration

<wx-config>

The optional <wx-config> tag applies global settings to every <wx-widget> tag on the page. This is useful for keeping global arguments in one place when there are many Max Web widget tags on the page.

ArgumentDescription
groupgroup="true" tells the widget to change locations and toggle units based on the actions of other page widgets.
icasticast="true" replaces the default daily-forecast and hourly-forecast model data and icons with legacy iCast forecast data. The Intellicast forecast editor can be used to edit the icast data when icast="true". This attribute only works with English language forecast data.
iconsurliconsurl is the path to an external folder of custom weather icons. This will replace the default weather icon path in the widget. Do not include the filename or extension in the IconsURL. View icon codes ↓
iconsexticonsext is the file extension for the custom icons in the iconsURL folder. Possible values are "png", "svg", "jpg", "gif".
languagelanguage defines the language for the widgets. View language codes ↓
latitudelatitude defines the latitude of the default location. Use decimal format only.
longitudelongitude defines the longitude of the default location. Use decimal format only.
standalonestandalone="true" loads the widget in an iFrame.
themetheme defines the default color theme for the widgets ("dark-gray","light-gray","blue").
unitsunits defines the units of measure as either "e" for english/imperial (°F, mph, in.) or "m" for metric (°C, km/h, cm.).
urlconfigurlconfig="true" tells the widgets to look for widget parameters in the parent page URL query string and to default to those parameters if the widget is set to group="true". Supported urlconfig parameters are latitude and longitude (Example: http://yoururl.com?latitude=43&longitude=-89).
urlconfigprefixurlconfigprefix allows you to prepend a string to the urlconfig parameters to avoid possible query string conflicts. For example, if urlconfigprefix="twc_", then the urlconfig would be activated by http://yoururl.com?twc_latitude=43&twc_longitude=-89.

Example

<wx-config language="en" latitude="38.91" longitude="-77.04" group="true"></wx-config>


<wx-widget type="search">

The search widget provides a utility for allowing the user to search for a new location by city name or postal code. The search widget can change the location of every other widget on the page with group-"true" specified as a widget parameter.

ArgumentDefaultDescription
languageen-USlanguage defines the language for the widget. View language codes ↓
placeholderSearch by city.placeholder overwrites the default placeholder text with a custom text string.
standalonefalsestandalone="true" loads the widget in an iFrame.
themedark-graytheme defines the default color theme for the widgets ("dark-gray","light-gray","blue").

Example

<wx-widget type="search"></wx-widget>


<wx-widget type="current-conditions">

The Current Conditions widget uses station-based current conditions data by default, but can be changed to Currents on Demand by passing ondemand="true" into the widget. Station-based current conditions return actual observed data for specific physical weather stations. Sometimes these stations can return incomplete or incorrect weather information. Using Currents on Demand supplements the observed values with TWC produced observation data, which provides more reliable conditions for every point on Earth.

ArgumentDefaultDescription
groupfalsegroup="true" tells the widget to change locations and toggle units based on the actions of other page widgets.
headertrueheader="false" will hide the top header section of the widget containing the location name and units toggle.
iconsurlnulliconsurl is the path to an external folder of custom weather icons. This will replace the default weather icon path in the widget. Do not include the filename or extension in the IconsURL. View icon codes ↓
iconsextpngiconsext is the file extension for the custom icons in the iconsURL folder. Possible values are "png", "svg", "jpg", "gif".
languageen-USlanguage defines the language for the widget. View language codes ↓
latitudenulllatitude defines the latitude of the default location. Use decimal format only.
longitudenulllongitude defines the longitude of the default location. Use decimal format only.
ondemandfalseondemand="true" changes the data source from station-based observations to the TWC proprietary Currents on Demand data.
standalonefalsestandalone="true" loads the widget in an iFrame.
themedark-graytheme defines the default color theme for the widgets ("dark-gray","light-gray","blue").
unitseunits defines the units of measure as either "e" for english/imperial (°F, mph, in.) or "m" for metric (°C, km/h, cm.).
urlconfigfalseurlconfig="true" tells the widgets to look for widget parameters in the parent page URL query string and to default to those parameters if the widget is set to group="true". Supported urlconfig parameters are latitude and longitude (Example: http://yoururl.com?latitude=43&longitude=-89).
urlconfigprefixnullurlconfigprefix allows you to prepend a string to the urlconfig parameters to avoid possible query string conflicts. For example, if urlconfigprefix="twc_", then the urlconfig would be activated by http://yoururl.com?twc_latitude=43&twc_longitude=-89.

Example

<wx-widget type="current-conditions" ondemand="true" group="true"></wx-widget>


<wx-widget type="daily-forecast">

The Daily Forecast widget leverages Forecast on Demand to provide the most accurate 10-day forecast for any location on the globe. Each day can be expanded to show day and night forecast details. Day is defined as 7am - 7pm, while Night is 7pm - 7am the next morning. The weather values for the current day change to reflect the "tonight" forecast after 4pm local time. The "tonight" forecast will remain as the first day in the widget until 3am local time.

ArgumentDefaultDescription
days10days determines the number of available forecast days. If there are more days than rows, a scrollbar will appear. Standard values are integers 1 to 10. Some widgets support up to 15 days for use in private dashboards. Fifteen day cannot be used on public websites.
groupfalsegroup="true" tells the widget to change locations and toggle units based on the actions of other page widgets.
headertrueheader="false" will hide the top header section of the widget containing the location name and units toggle.
icastfalseicast="true" replaces the default daily-forecast and hourly-forecast model data and icons with legacy iCast forecast data. The Intellicast forecast editor can be used to edit the icast data when icast="true". This attribute only works with English language forecast data.
iconsurlnulliconsURL is the path to an external folder of custom weather icons. This will replace the default weather icon path in the widget. Do not include the filename or extension in the IconsURL. View icon codes ↓
iconsextpngiconsExt is the file extension for the custom icons in the iconsURL folder. Possible values are "png", "svg", "jpg", "gif".
languageen-USlanguage defines the language for the widget. View language codes ↓
latitudenulllatitude defines the latitude of the default location. Use decimal format only.
longitudenulllongitude defines the longitude of the default location. Use decimal format only.
rows10rows determines the number of visible day rows. If there are more days than rows, a scrollbar will appear. Possible values are integers 1 to 10.
standalonefalsestandalone="true" loads the widget in an iFrame.
themedark-graytheme defines the default color theme for the widgets ("dark-gray","light-gray","blue").
unitseunits defines the units of measure as either "e" for english/imperial (°F, mph, in.) or "m" for metric (°C, km/h, cm.).
urlconfigfalseurlconfig="true" tells the widgets to look for widget parameters in the parent page URL query string and to default to those parameters if the widget is set to group="true". Supported urlconfig parameters are latitude and longitude (Example: http://yoururl.com?latitude=43&longitude=-89).
urlconfigprefixnullurlconfigprefix allows you to prepend a string to the urlconfig parameters to avoid possible query string conflicts. For example, if urlconfigprefix="twc_", then the urlconfig would be activated by http://yoururl.com?twc_latitude=43&twc_longitude=-89.

Example

<wx-widget type="daily-forecast" group="true"></wx-widget>


<wx-widget type="hourly-forecast">

The hourly forecast widget leverages Forecast on Demand to provide accurate hour-by-hour weather forecasts to help users plan their activities for the day.

ArgumentDefaultDescription
hours48hours determines the number of available forecast hours. If there are more hours than rows, a scrollbar will appear. Standard values are integers 1 to 48. Some widgets support up to 360 hours for use in private dashboards. More than 48 hours cannot be used on public websites.
groupfalsegroup="true" tells the widget to change locations and toggle units based on the actions of other page widgets.
headertrueheader="false" will hide the top header section of the widget containing the location name and units toggle.
icastfalseicast="true" replaces the default daily-forecast and hourly-forecast model data and icons with legacy iCast forecast data. The Intellicast forecast editor can be used to edit the icast data when icast="true". This attribute only works with English language forecast data.
iconsurlnulliconsurl is the path to an external folder of custom weather icons. This will replace the default weather icon path in the widget. Do not include the filename or extension in the IconsURL. View icon codes ↓
iconsextpngiconsext is the file extension for the custom icons in the iconsURL folder. Possible values are "png", "svg", "jpg", "gif".
itemsicon,temp,pop,winditems allows you to specify the order and types of data displayed in the hourly-forecast widget. The number of visible data columns depends on the widget width.
Items=""Description
iconsky icon graphic + weather phrase
temptemperature
popprobability of precipitation (rain drop icon + value)
windCardnial wind direction + wind speed
feels_likeFeels like temperature
qpfLiquid precipitation totals (quantitative precipitation forecast)
snow_qpfSnow precipitation totals
gustPeak wind gust
rhRelative Humidity
dewptDewpoint
mslpMean Sea Level Pressure
visVisibility
uvUV Index value + phrase
phraseWeather phrase
labelsfalselabels="true" displays data column labels in the hourly forecast widget.
languageen-USlanguage defines the language for the widget. View language codes ↓
latitudenulllatitude defines the latitude of the default location. Use decimal format only.
longitudenulllongitude defines the longitude of the default location. Use decimal format only.
rows6rows determines the number of visible hour rows. If there are more hours than rows, a scrollbar will appear. Possible values are integers 1 to 48.
standalonefalsestandalone="true" loads the widget in an iFrame.
themedark-graytheme defines the default color theme for the widgets ("dark-gray","light-gray","blue").
unitseunits defines the units of measure as either "e" for english/imperial (°F, mph, in.) or "m" for metric (°C, km/h, cm.).
urlconfigfalseurlconfig="true" tells the widgets to look for widget parameters in the parent page URL query string and to default to those parameters if the widget is set to group="true". Supported urlconfig parameters are latitude and longitude (Example: http://yoururl.com?latitude=43&longitude=-89).
urlconfigprefixnullurlconfigprefix allows you to prepend a string to the urlconfig parameters to avoid possible query string conflicts. For example, if urlconfigprefix="twc_", then the urlconfig would be activated by http://yoururl.com?twc_latitude=43&twc_longitude=-89.

Example

<wx-widget type="hourly-forecast" group="true"></wx-widget>


<wx-widget type="alerts">

The alerts widget returns alerts issued by government sources in the United States, Canada, and parts of Europe. The government alert headlines will be translated according to supported language codes, but the alert details always display in the language at which they were issued. This widget can also be configured to display manually produced headlines from the Max Engage product.

ArgumentDefaultDescription
alertsgovernmentalerts defines the data sources for the alerts widget. If you use the Max Engage product, you can incorporate Engage headlines using the alerts="engage" or alerts="all" attribute. When alerts="engage", only the headlines triggered from Max Engage will display in the widget. When alerts="all", both government alerts and Max Engage alerts will display in the widget. By default, only government alerts appear.
expandedfalseExpanded="true" expands the widget to show all alerts by default when more than one is active.
groupfalseGroup="true" tells the widget to change locations based on the search widget.
languageen-USLanguage defines the language for the widget. View language codes ↓
latitudenullLatitude defines the latitude of the default location. Use decimal format only.
longitudenullLongitude defines the longitude of the default location. Use decimal format only.
standalonefalseStandalone="true" loads the widget in an iFrame.
themedark-grayThe alerts widget supports two themes: default and engage. When theme="engage", a special theme designed to look like the Max Mobile engage headlines UI is applied. For all other themes, the default alerts widget theme is used.
urlconfigfalseurlconfig="true" tells the widgets to look for widget parameters in the parent page URL query string and to default to those parameters if the widget is set to group="true". Supported urlconfig parameters are latitude and longitude (Example: http://yoururl.com?latitude=43&longitude=-89).
urlconfigprefixnullurlconfigprefix allows you to prepend a string to the urlconfig parameters to avoid possible query string conflicts. For example, if urlconfigprefix="twc_", then the urlconfig would be activated by http://yoururl.com?twc_latitude=43&twc_longitude=-89.

Example

<wx-widget type="alerts" group="true"></wx-widget>

(The alert widget only displays when there are active alerts for a location.)


Language Codes

LanguageCodeShort Code
Arabic (UAE)ar-AEar
Croatianhr-HRhr
Czech (Czech Republic)cs-CZcs
Danishda-DKda
Dutchnl-NLnl
German/Switzerlandde-CH
German/Germanyde-DEde
Greekel-GRel
English/Australiaen-AU
English/Great Britainen-GB
English/Indiaen-IN
English/United Statesen-USen
Spanish/Argentinaes-AR
Spanish/Spaines-ES
Spanish (LATAM)es-LA
Spanish/Mexicoes-MX
Spanish (International)es-UN
Spanish/USes-USes
Spanish/Spaines-ES
Finnishfi-FIfi
French (Canada)fr-CA
French/Switzerlandfr-CH
French/Francefr-FRfr
Hebrew (he)he-ILhe
Hebrew (iw)iw-ILiw
Hindihi-INhi
Hungarianhu-HUhu
Indonesianid-IDid
Italian/Switzerlandit-CH
Italian/Italyit-ITit
Japaneseja-JPja
Kazakhkk-KZkk
Koreanko-KRko
Malayms-MYms
Norwegianno-NOno
Persian (Farsi)fa-IRfa
Polishpl-PLpl
Portuguese/Brazilpt-BR
Portuguesept-PTpt
Romanianro-ROro
Russianru-RUru
Slovak - Slovakiask-SKsk
Swedish - Swedensv-SEsv
Thai - Thailandth-THth


Icon Codes

Icon CodeIcon DescriptionIcon ImageForecast / Current ConditionsNight / Daytime
0TornadoForecastNight + Day
1Tropical StormForecast + Current ConditionsNight + Day
2 Hurricane Forecast Night + Day
3 Strong Storms Forecast Night + Day
4 Thunder and Hail Forecast + Current Conditions Night + Day
5 Rain to Snow Showers Forecast + Current Conditions Night + Day
6 Rain / Sleet Forecast + Current Conditions Night + Day
7 Wintry Mix Snow / Sleet Forecast + Current Conditions Night + Day
8 Freezing Drizzle Forecast + Current Conditions Night + Day
9 Drizzle Forecast + Current Conditions Night + Day
10 Freezing Rain Forecast + Current Conditions Night + Day
11 Light Rain Forecast + Current Conditions Night + Day
12 Rain Forecast + Current Conditions Night + Day
13 Scattered Flurries Forecast + Current Conditions Night + Day
14 Light Snow Forecast + Current Conditions Night + Day
15 Blowing / Drifting Snow Forecast + Current Conditions Night + Day
16 Snow Forecast + Current Conditions Night + Day
17 Hail Forecast + Current Conditions Night + Day
18 Sleet Forecast + Current Conditions Night + Day
19 Blowing Dust / Sandstorm Forecast + Current Conditions Night + Day
20 Foggy Forecast + Current Conditions Night + Day
21 Haze / Windy Forecast + Current Conditions Night + Day
22 Smoke / Windy Forecast + Current Conditions Night + Day
23 Breezy Forecast Night + Day
24 Blowing Spray / Windy Forecast + Current Conditions Night + Day
25 Frigid / Ice Crystals Forecast + Current Conditions Night + Day
26 Cloudy Forecast + Current Conditions Night + Day
27 Mostly Cloudy Forecast + Current Conditions Night
28 Mostly Cloudy Forecast + Current Conditions Day
29 Partly Cloudy Forecast + Current Conditions Night
30 Partly Cloudy Forecast + Current Conditions Day
31 Clear Forecast + Current Conditions Night
32 Sunny Forecast + Current Conditions Day
33 Fair / Mostly Clear Forecast + Current Conditions Night
34 Fair / Mostly Sunny Forecast + Current Conditions Day
35 Mixed Rain & Hail Forecast Day
36 Hot Forecast Day
37 Isolated Thunderstorms Forecast Day
38 Thunderstorms Forecast + Current Conditions Night + Day
39 Scattered Showers Forecast Day
40 Heavy Rain Forecast + Current Conditions Night + Day
41 Scattered Snow Showers Forecast Day
42 Heavy Snow Forecast + Current Conditions Night + Day
43 Blizzard Forecast Night + Day
44 Not Available (N/A) Forecast Night + Day
45 Scattered Showers Forecast Night
46 Scattered Snow Showers Forecast Night
47 Scattered Thunderstorms Forecast + Current Conditions Night


Version Release Notes

v3.0.4 - 10/04/2017

v3.0.3 - 6/19/2017

v3.0.2 - 5/01/2017

v3.0.1 - 4/18/2017