One <div> and one <script>. Live local time and current weather for any city in the world, in seven layouts and six themes. No signup, no API key, no limits.
Paste both lines where you want the widget to appear. The <script> tag only needs to be on the page once, even if you place several widgets.
| Attribute | Values | What it does |
|---|---|---|
data-type | full · clock · weather · cities · cities-weather · bar · column | Layout. bar fits a header strip, column fits a narrow sidebar. |
data-city | any city name | City for single-city layouts. Resolved by name — London, São Paulo, القاهرة all work. |
data-cities | comma-separated, up to 12 | For cities and cities-weather. |
data-lat, data-lon | coordinates | Pins an exact point and skips name lookup. Useful for places that share a name. |
data-theme | 6 themes | sky changes with day and night at the target city. |
data-lang | 15 languages | Arabic renders right-to-left automatically. |
data-icons | emoji · svg | SVG icons look consistent across platforms; emoji weigh nothing. |
data-width, data-height, data-radius | px | Size and corner rounding. |
data-bg, data-font-color, data-font-size | CSS colour, px | Match your own palette instead of using a preset theme. |
data-show | date,weather,icon | Hide parts you do not need. |
data-country | text | Extra caption under the city name. |
<div class="wtw-widget" data-city="London" data-theme="light"></div>
<div class="wtw-widget" data-city="Tokyo" data-theme="dark"></div>
<script src="https://worldtimeweather.com/widget.js" async></script><div class="wtw-widget"
data-type="bar"
data-cities="London, New York, Tokyo, Sydney"
data-theme="minimal"
data-lang="en"></div>
<script src="https://worldtimeweather.com/widget.js" async></script><div class="wtw-widget"
data-city="Dubai"
data-bg="#0f172a"
data-font-color="#e2e8f0"
data-radius="16"
data-font-size="15"
data-icons="svg"></div>
<script src="https://worldtimeweather.com/widget.js" async></script><div class="wtw-widget"
data-lat="43.2141" data-lon="27.9147"
data-country="Bulgaria"></div>
<script src="https://worldtimeweather.com/widget.js" async></script>rel="nofollow", so it passes no SEO weight and exists for people, not search engines. If you would like to support the project, a mention anywhere on your site is appreciated — but never required.
The script is about 50 KB, loads asynchronously and blocks nothing. Time is computed in the visitor's browser from the target city's IANA time zone, so daylight saving is handled correctly without you doing anything — when a country shifts its clocks, the widget shifts with it the same day.
Weather comes from Open-Meteo, which aggregates national meteorological services. Requests go straight from the visitor's browser, so no traffic passes through our servers and nothing about your visitors is stored anywhere. There are no cookies and no tracking.
Everything renders client-side into the <div> you place, inside its own CSS scope. It will not fight your stylesheet, and it works on any platform that lets you paste HTML — WordPress, Tilda, Webflow, Ghost, plain static files.
If you are building something of your own rather than embedding a card, the JSON API gives you time, UTC offset, daylight-saving dates and current weather for 400 cities as plain static files. Same terms: free, no key; a visible attribution link is appreciated.