Embed World Clock Widget

Add accurate, live time display to your website with a single line of code.

✅ Free forever✅ Zero CLS✅ Lightweight (~2KB)✅ IANA timezone data

Live Demo

Minimal Theme

Loading widget...

Light Theme

Loading widget...

Dark Theme

Loading widget...

Quick Start

HTML

<!-- Add this where you want the widget to appear -->
<div class="timeinc-widget" data-city="tokyo">
  <a href="https://www.time.inc/time/tokyo">Current time in Tokyo</a>
</div>

<!-- Add this script once, before closing </body> tag -->
<script src="https://www.time.inc/widget.js" async></script>

That's it! The widget will automatically initialize and display the current time. The fallback link provides SEO benefits and works without JavaScript.

Configuration Options

Attribute	Values	Default	Description
data-city	Any city slug	(required)	City to display (e.g., tokyo, new-york)
data-theme	light, dark, minimal	light	Visual theme of the widget
data-size	small, medium, large	medium	Widget dimensions

Examples

Tokyo Time (Large)

<div class="timeinc-widget" 
     data-city="tokyo" 
     data-theme="light" 
     data-size="large">
  <a href="https://www.time.inc/time/tokyo">Current time in Tokyo</a>
</div>
<script src="https://www.time.inc/widget.js" async></script>

Multiple Cities

<!-- New York City -->
<div class="timeinc-widget" data-city="new-york">
  <a href="https://www.time.inc/time/new-york-city">Current time in New York City</a>
</div>

<!-- London -->
<div class="timeinc-widget" data-city="london">
  <a href="https://www.time.inc/time/london">Current time in London</a>
</div>

<!-- Tokyo -->
<div class="timeinc-widget" data-city="tokyo">
  <a href="https://www.time.inc/time/tokyo">Current time in Tokyo</a>
</div>

<!-- Include script once -->
<script src="https://www.time.inc/widget.js" async></script>

💡 You can embed multiple widgets on the same page. All use the same class name.

Dark Theme Widget

<div class="timeinc-widget" 
     data-city="paris" 
     data-theme="dark" 
     data-size="medium">
  <a href="https://www.time.inc/time/paris">Current time in Paris</a>
</div>
<script src="https://www.time.inc/widget.js" async></script>

API Endpoint

Need direct API access? Use our JSON endpoint:

GET

https://www.time.inc/api/widget/{city-slug}

Example Response:

{
  "city": "Tokyo",
  "country": "Japan",
  "timezone": "Asia/Tokyo",
  "time": "03:45:23",
  "date": "Thu, Dec 18, 2025",
  "utcOffset": "UTC+09:00",
  "isDST": false,
  "timestamp": "2025-12-17T18:45:23.000Z",
  "url": "https://www.time.inc/time/tokyo"
}

Features:

CORS enabled for cross-origin requests
Cached for 60 seconds (fast response times)
IANA timezone data (accurate DST handling)
Free for reasonable use (no rate limits for widgets)

Available Cities

We support 1,000+ cities worldwide. Find your city:

Browse all available cities and get their slugs:

View All Cities →

Popular cities:

tokyonew-yorklondonparissydneydubaisingaporehong-kongshanghaimumbaisao-paulomexico-city

Technical Details

Performance

✅ Zero CLS (Cumulative Layout Shift)
✅ ~2KB minified (no dependencies)
✅ Async loading (non-blocking)
✅ 60-second cache TTL
✅ Uses performance.now() for accuracy

Accuracy

✅ IANA Time Zone Database
✅ Automatic DST handling
✅ Server-side time calculation
✅ Independent of user's system clock
✅ Deterministic results

FAQ

Is the widget free?

Yes! The widget is completely free for any website. There are no rate limits for widget usage.

Can I remove the attribution?

The attribution link is required to use the widget. It's small, unobtrusive, and helps others discover accurate time data.

Does it work on mobile?

Yes! The widget is fully responsive and works on all devices.

What if my city isn't available?

We support 1,000+ cities. If yours isn't listed, contact us and we'll consider adding it.

Can I customize the styling?

The widget provides light, dark, and minimal themes. For advanced customization, use our API endpoint and build your own display.

Need Help?

Questions about widget integration or API usage?

Contact Support