weatherwidget.io Open in urlscan Pro
2606:4700:e2::ac40:8e1e  Public Scan

Form analysis
1 forms found in the DOM

Name: searchForm —

<form ng-submit="$event.preventDefault()" name="searchForm" class="ng-pristine ng-valid-minlength ng-valid-maxlength ng-invalid ng-invalid-required">
  <div layout="row" layout-wrap="" class="layout-wrap layout-row">
    <md-autocomplete flex="30" flex-sm="100" flex-xs="100" force-select="" md-select-on-match="" md-autoselect="" required="" md-input-name="autocompleteField" md-input-minlength="3" md-no-cache="wc.noCache" md-selected-item="wc.selectedItem"
      md-search-text="wc.searchText" md-items="item in querySearch(wc.searchText)" md-item-text="item.description" md-floating-label="Select Location" md-selected-item-change="o.location = item; setLocation()" tabindex="-1"
      class="ng-isolate-scope flex-xs-100 flex-sm-100 flex-30"> <md-autocomplete-wrap
        ng-class="{ 'md-whiteframe-z1': !floatingLabel,                         'md-menu-showing': !$mdAutocompleteCtrl.hidden,                         'md-show-clear-button': !!clearButton }"> <!-- ngIf: floatingLabel --><md-input-container
          ng-if="floatingLabel" class="ng-scope"> <label class="ng-binding md-required" for="{{ inputId || 'fl-input-' + $mdAutocompleteCtrl.id }}">Select Location</label> <input type="search" id="fl-input-8" name="autocompleteField"
            autocomplete="off" ng-required="$mdAutocompleteCtrl.isRequired" ng-readonly="$mdAutocompleteCtrl.isReadonly" ng-minlength="3" ng-disabled="$mdAutocompleteCtrl.isDisabled" ng-model="$mdAutocompleteCtrl.scope.searchText"
            ng-model-options="{ allowInvalid: true }" ng-keydown="$mdAutocompleteCtrl.keydown($event)" ng-blur="$mdAutocompleteCtrl.blur($event)" ng-focus="$mdAutocompleteCtrl.focus($event)" aria-owns="ul-8" aria-label="Select Location"
            aria-autocomplete="list" role="combobox" aria-haspopup="true" aria-activedescendant="" aria-expanded="false" class="ng-pristine ng-untouched md-input ng-empty ng-valid-minlength ng-valid-maxlength ng-invalid ng-invalid-required"
            aria-invalid="true" required="required">
          <div class="md-errors-spacer"></div> <!-- mdAutocompleteParentScope: -->
          <div md-autocomplete-parent-scope="" md-autocomplete-replace="" class="ng-scope">
            <!-- ngIf: searchForm.autocompleteField.$touched -->
          </div>
        </md-input-container><!-- end ngIf: floatingLabel --> <!-- ngIf: clearButton && $mdAutocompleteCtrl.scope.searchText && !$mdAutocompleteCtrl.isDisabled --> <!-- ngIf: $mdAutocompleteCtrl.loadingIsVisible() -->
      </md-autocomplete-wrap></md-autocomplete>
    <md-input-container flex="20" flex-sm="25" flex-xs="100" class="flex-xs-100 flex-sm-25 flex-20 md-input-has-value">
      <label for="input_9">Location Label 1</label>
      <input type="text" ng-model="o.label_1" class="ng-pristine ng-untouched ng-valid md-input ng-not-empty" id="input_9" aria-invalid="false">
      <div class="md-errors-spacer"></div>
    </md-input-container>
    <md-input-container flex="20" flex-sm="25" flex-xs="100" class="flex-xs-100 flex-sm-25 flex-20 md-input-has-value">
      <label for="input_10">Location Label 2</label>
      <input type="text" ng-model="o.label_2" class="ng-pristine ng-untouched ng-valid md-input ng-not-empty" id="input_10" aria-invalid="false">
      <div class="md-errors-spacer"></div>
    </md-input-container>
    <md-input-container flex="15" flex-sm="25" flex-xs="100" class="flex-xs-100 flex-sm-25 flex-15 md-input-has-value">
      <label for="select_11" class="">Language</label>
      <md-select ng-model="o.language" ng-model-options="{trackBy: '$value.name'}" aria-label="Language: English" md-on-close="changeLang()" class="ng-pristine ng-untouched ng-valid ng-empty" tabindex="0" aria-disabled="false" role="listbox"
        aria-expanded="false" aria-multiselectable="false" id="select_11" aria-owns="select_container_12" aria-invalid="false"><md-select-value class="md-select-value" id="select_value_label_6"><span>
            <div class="md-text ng-binding">English</div>
          </span><span class="md-select-icon" aria-hidden="true"></span></md-select-value>
        <div class="md-select-menu-container" aria-hidden="true" id="select_container_12"><md-select-menu class="_md"><md-content class="_md">
              <!-- ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_27" aria-checked="true"
                value="[object Object]">
                <div class="md-text ng-binding">Arabic</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_28"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Bulgarian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_29"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Czech</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_30"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Danish</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_31"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">German</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_32"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Greek</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="true" id="select_option_33"
                aria-checked="true" value="[object Object]" selected="selected">
                <div class="md-text ng-binding">English</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_34"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Spanish</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_35"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">French</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_36"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Croatian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_37"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Hebrew</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_38"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Hungarian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_39"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Italian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_40"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Japanese</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_41"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Norwegian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_42"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Dutch</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_43"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Polish</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_44"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Portuguese</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_45"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Romanian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_46"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Russian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_47"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Slovak</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_48"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Serbian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_49"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Swedish</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_50"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Turkish</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_51"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">Ukrainian</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_52"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">simplified Chinese</div>
              </md-option><!-- end ngRepeat: language in d.languages --><md-option ng-value="language" ng-repeat="language in d.languages" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_53"
                aria-checked="true" value="[object Object]">
                <div class="md-text ng-binding">traditional Chinese</div>
              </md-option><!-- end ngRepeat: language in d.languages -->
            </md-content></md-select-menu></div>
      </md-select>
    </md-input-container>
    <md-input-container flex="15" flex-sm="25" flex-xs="100" class="flex-xs-100 flex-sm-25 flex-15 md-input-has-value">
      <label for="select_13" class="">Units</label>
      <md-select ng-model="o.unit" ng-model-options="{trackBy: '$value.name'}" aria-label="Units: International (Celsius)" class="ng-pristine ng-untouched ng-valid ng-empty" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false"
        aria-multiselectable="false" id="select_13" aria-owns="select_container_14" aria-invalid="false"><md-select-value class="md-select-value" id="select_value_label_7"><span>
            <div class="md-text ng-binding">International (Celsius)</div>
          </span><span class="md-select-icon" aria-hidden="true"></span></md-select-value>
        <div class="md-select-menu-container" aria-hidden="true" id="select_container_14"><md-select-menu class="_md"><md-content class="_md">
              <!-- ngRepeat: unit in d.units --><md-option ng-value="unit" ng-repeat="unit in d.units" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="true" id="select_option_54" aria-checked="true" value="[object Object]"
                selected="selected">
                <div class="md-text ng-binding">International (Celsius)</div>
              </md-option><!-- end ngRepeat: unit in d.units --><md-option ng-value="unit" ng-repeat="unit in d.units" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_55" aria-checked="true"
                value="[object Object]">
                <div class="md-text ng-binding">USA (Fahrenheit)</div>
              </md-option><!-- end ngRepeat: unit in d.units -->
            </md-content></md-select-menu></div>
      </md-select>
    </md-input-container>
  </div>
</form>

Text Content

WEATHERWIDGET.IO

> ...a free, customizable, responsive weather widget that will always match your
> website...

 * Follow us on Facebook
 * Follow us on Twitter
 * Weather Widget examples at Codepen

follow
 * Share on Facebook
 * Tweet
 * Share with email

share

> Enter your location below and choose the settings, options and theme that you
> like. Customize as needed. Then just "Get Code" and paste the supplied snippet
> to the place in your website where you want the widget to appear.

SettingsOptionsThemesCustomize SettingsOptionsThemesCustomize
Select Location


Location Label 1

Location Label 2

Language
English
Arabic
Bulgarian
Czech
Danish
German
Greek
English
Spanish
French
Croatian
Hebrew
Hungarian
Italian
Japanese
Norwegian
Dutch
Polish
Portuguese
Romanian
Russian
Slovak
Serbian
Swedish
Turkish
Ukrainian
simplified Chinese
traditional Chinese
Units
International (Celsius)
International (Celsius)
USA (Fahrenheit)
Font
Tahoma
Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold
Arimo
Consolas
Courier New
Fira Sans
Georgia
Helvetica
Jura
Monaco
Noto Sans
Noto Serif
Open Sans
Open Sans Condensed
Palatino
Play
Roboto
Roboto Slab
Tahoma
Times New Roman
Tinos
Trebuchet MS
Ubuntu
Verdana
Icon Set
Iconvault
Iconvault
Climacons
Climacons Animated
Current / Forecast
Both
Current
Forecast
Both
Forecast Days
7
7
5
3
Theme type: 

Flat

Gradient

Pattern

Image

Weather Conditions
Theme type
Flat
Flat
Gradient
Pattern
Image
Weather Conditions

ORIGINAL


HiLo

PURE


HiLo

ORANGE


HiLo

GRAY


HiLo

DARK


HiLo

DESERT


HiLo

CANDY


HiLo

BEIGE


HiLo

BLANK


HiLo

SALMON


HiLo

RETRO SKY


HiLo

MARINE


HiLo

MOUNTAINS


HiLo

BLUE MOUNTAINS


HiLo

PILLOWS


HiLo

GRASS


HiLo

FALL LEAVES


HiLo

CLEAR


HiLo

SKY


HiLo

METALLIC


HiLo

RUBY


HiLo

KIWI


HiLo

KITTY


HiLo

HEXELLENCE


HiLo

TILE WOOD


HiLo

WHITE LEATHER


HiLo

POOL TABLE


HiLo

RANDOM GREY


HiLo

WEATHER ONE


HiLo

Background


Accent


Text


High Temp


Low Temp


Shadow


Sun / Thunder


Moon


Cloud / Fog / Wind


Cloud Fill


Rain


Snow / Hail

Get Code Load Code


NEW YORK WEATHER


24°C
scattered clouds
MondayMon

28°C
22°C
TuesdayTue

32°C
20°C
WednesdayWed

33°C
23°C
ThursdayThu

32°C
25°C
FridayFri

30°C
24°C
SaturdaySat

33°C
24°C
SundaySun

32°C
26°C


drag the border to preview the widget in different sizes
width:1435px

Drag the border on the right of the above widget to preview it in different
sizes. View this page on a wider screen if you would like to preview how the
widget responds to fill wider spaces.


FEATURES


FREE

The Weather Widget is free to be used in any website, personal or commercial.
You do not even need to sign up or give your email.


CUSTOMIZABLE

You can customize nearly everything, including the label, the font, the number
of forecast days and the colors of every element.


RESPONSIVE

This widget will respond to the size of its container. It can fit nicely in the
main content area or a sidebar, while at the same time automatically respond to
fit in any smartphone or tablet.


ANY WEBSITE

The Weather Widget can be easily embedded in any website by just pasting the
provided code in any place you would like the widget to appear. It has no
dependencies and no server side requirements.


COMPATIBLE

Compatible with all modern browsers including IE11, Edge, Chrome, Firefox,
Safari, Opera and all major mobile browsers.


MULTILINGUAL

Available in 27 languages. More languages coming in the future.


FREQUENTLY ASKED QUESTIONS


CAN THE WIDGET BE USED WITH DIGITAL SIGNAGE, MOBILE APPS OR ANY OTHER
APPLICATION?

According to our Terms of Service our free widget may only be embedded in
websites (on pages which can be accessed by anybody using a standard web
browser). For Digital Signage applications we offer a pro version of the same
widget with a few additional features. If interested please contact us for more
details.


CAN THE WIDGET DISPLAY WEATHER INFO FOR THE LOCATION OF THE VISITOR?

No. The location needs be defined at the time the widget is created on this
website. You can, however, define more than one location (up to 8) and switch
between them using javascript.


DOCUMENTATION

WeatherWidget.io provides an easy, interactive interface which you can use to
build and customize a weather widget for any website. Following you can find a
description for all available fields of this interface.

SettingsOptionsThemesCustomize SettingsOptionsThemesCustomize

Setting Description Select Location

Search for the location for which you would like a weather widget. The location
can be a country, city, village or area.

Required: Yes

Location Label 1

The first line of the label, e.g. the name of location. You can type anything
you like, but try to keep it short (preferably less than 15 characters)

Required: No

Location Label 2

The second line of the label. You can type anything you like, but try to keep it
short (preferably less than 15 characters)

Required: No

Language

The language of the weather widget. 20 languages currently supported.

Required: Yes

Units

You can select either International units (SI) with temperatures shown in
degrees Celsius, or USA units with temperatures shown in degrees Fahrenheit.

Required: Yes Default: International

Option Description Font

Select a font for the widget. Two types of fonts are available: (1) Stacks with
"web safe" font-families, i.e. fonts that are usually found on most operating
systems, and (2) Google fonts. For the "web safe" fonts only the first font of
the stack is shown and if a user doesn't have installed on his/her system this
font, then a fallback will be used.

Required: No Default: Tahoma

Icon Set

Three different icon sets are currently available. They are all SVG and will
therefore always look sharp. One of the icon sets is animated.

Required: No Default: Iconvault

Current / Forecast

The weather widget can display the current weather, a weather forecast for the
next few days, or both the current weather and the weather forecast.

Required: No Default: Both

Forecast Days

The number of days to be shown in the weather forecast (not applicable when only
the current weather is displayed)

Required: No Default: 7

Theme Type Description Flat

Themes made exclusively with flat colors. No gradients and no images are used.
All colors can be customized in the "Customize" tab.

Gradient

A gradient is used on the background of these themes. You can change the color
of the gradient by changing the "Background" color in the "Customize" tab. By
adjusting the opacity of the "Background" color you can show more or less of the
gradient effect.

Pattern

A small repeating image is used as the background of these themes. Adding a
"Background" color in the "Customize" tab will hide the background image but you
can still add a "Background" color with a lower opacity to create a "colorize"
effect over the image pattern.

Image

A large image is used as the background of these themes. Adding a "Background"
color in the "Customize" tab will hide the background image but you can still
add a "Background" color with a lower opacity to create a "colorize" effect over
the image.

Weather Conditions

A single "Weather Conditions" theme is currently available. This displays a
different background image and colors according to the current weather. Please
note that you can not customize the colors of this theme.

Color name Description All

The colors can be set by either typing any valid color in an input field, or by
clicking the color swatch next to the field and selecting a color using the
color picker. Note that the rightmost column on the color picker selects the
opacity.

Background

The background color of the widget. With an image based theme the background
color is usually removed so that the image behind it can be seen. You can also
make the background, semi-transparent by lowering its opacity in order to blend
and colorize whatever lies behind it.

Required: No Default: None

Accent

This is the color background for all the odd forecast day columns (i.e. 1, 3, 5,
7). Setting this to a color (e.g. black or white) with low opacity makes it easy
to blend the accent with the background color.

Required: No Default: None

Text

The text color is used for the location labels, the current temperature, the
current weather description and the day names. It is also used as the default
color for all text and icon colors.

Required: No Default: #000000 (black)

High Temp

The color for the high temperature.

Required: No Default: Text color

Low Temp

The color for the low temperature.

Required: No Default: Text color

Shadow

The color for the drop shadow behind text and icons. This is sometimes useful to
visually separate the text and icons from the background (most useful when the
background is an image or when text and icons have a similar color to the
background)

Required: No Default: none

Sun / Thunder

The color of the sun and the thunder in the icons.

Required: No Default: Text color

Moon

The color of the moon in the icons.

Required: No Default: Text color

Cloud / Fog / Wind

The color of the cloud, fog and wind icons.

Required: No Default: Text color

Cloud Fill

The color for the fill (inside part) of the cloud icons. Applicable only for the
animated icons (Climacons Animated). Static icons have no cloud fill.

Required: No Default: Text color

Rain

The color of the rain drops in the icons.

Required: No Default: Text color

Snow / Hail

The color for the snow and hail in the icons.

Required: No Default: Text color


TUTORIAL

Adding the weather widget to your website takes just a couple of minutes. All
you need to do is to paste the supplied code to the location where you want the
widget to appear. Watch the following tutorial to learn all the details.


Privacy Terms Contact

Data by OpenWeather

copyright © weatherwidget.io