Free website widget

Clock Widgets for Websites

Q: How do I add a clock widget to my website?

Use the widget builder above to configure your clock, then copy the embed code. Paste it into any HTML page, WordPress post, or website builder. The widget is a self-contained JavaScript snippet that upgrades a link into a live clock.

Q: Is the Timezzon widget free?

Yes, the widget is completely free to use. There are no usage limits, no watermarks, and no account required. Each embed includes a visible attribution link back to Timezzon.

Q: What designs are available?

There are 10 widget designs: Classic, Compact, Minimal, Glass, Bordered, Pill, Stacked, Terminal, Accent, and Editorial. Each is available in dark and light themes.

Q: How does the multi-city widget work?

The multi-city widget displays 2-8 clocks in a responsive grid. Add cities using the multi-city builder, copy the embed code, and paste it into your site. It shows each city with its local time in a single compact widget.

Q: Can I customize the widget colors?

Each design has a dark and light theme. Use the theme toggle in the builder to switch between them. For advanced customization, the widget uses CSS custom properties that can be overridden.

Q: Does the widget work on mobile?

Yes, all widget designs are fully responsive. They automatically adjust to fit any screen size, from mobile phones to large desktop monitors.

Q: What is the WordPress shortcode format?

Use [timezzon-clock city="london" theme="dark" design="classic" seconds="true"]. The city parameter accepts any city slug from timezzon.com. Theme can be "dark" or "light".

Add a lightweight live city clock to a blog, company site, travel guide, event page, or team wiki. Choose from 10 designs and 2 themes. Each embed includes a normal visible attribution link to the matching Timezzon city page.

Add Timezzon to Chrome Build single clock Build world clock

Single city widget

Embed a clock for one city

Configure widget

Pick a city, theme and style

CityTheme

Accent color

Font size

Live preview · London

London--:--

Embed code

Paste into any webpage

<a class="timezzon-clock-widget"
   data-timezzon-clock="london"
   href="https://www.timezzon.com/time/london">
  Current time in London
</a>

<script async src="…/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Choose a design

Click any card to preview · 38 styles available

classic

1–20 of 38

Multi-city widget

World clock for your website

Show multiple city clocks in a single responsive grid. Ideal for global companies, remote teams, travel sites, and international event pages. Add 2-8 cities in one embed.

Multi-city widget

Show 2-8 clocks in one embed

Selected cities (3/8)

LondonNew YorkTokyo

Add city

Theme

Design

Embed code

Paste into any webpage

<div class="timezzon-multi-clock" data-timezzon-cities="london,new-york,tokyo" data-timezzon-theme="dark" data-timezzon-design="classic" data-timezzon-seconds="false">
  <a href="https://www.timezzon.com/time/london">London</a>
  <a href="https://www.timezzon.com/time/new-york">New York</a>
  <a href="https://www.timezzon.com/time/tokyo">Tokyo</a>
</div>
<script async src="https://www.timezzon.com/widgets/multi-clock.js?cities=london%2Cnew-york%2Ctokyo&theme=dark&design=classic&seconds=false&accent=default&showCity=true&fontSize=medium"></script>

Why use Timezzon widgets

Built for performance and SEO

Lightweight

Under 3KB gzipped

The entire widget script is under 3KB gzipped. No jQuery, no React, no framework dependencies. Loads asynchronously and renders instantly with server-synced time.

Multi-platform

Works everywhere

WordPress, Wix, Squarespace, Shopify, Blogger, or plain HTML. The widget is a simple script tag that works on any website without server-side code.

10 designs

Matches your brand

From minimal terminal style to bold editorial layouts. Choose from 10 designs in dark or light themes to match your website's aesthetic.

Platform guides

How to install on any platform

WordPress

Install the Timezzon plugin or paste the shortcode directly into any post, page, or widget area.

Install the Timezzon Clock Widget plugin from the WordPress plugin directory, or
Add a Custom HTML block in the WordPress editor
Paste the embed code and save
The clock appears live on your page

Shortcode

[timezzon-clock city="london" theme="dark" design="classic" seconds="true"]

Wix

Add an HTML embed element to your Wix page and paste the widget code.

Click + Add in the Wix editor
Choose Embed Code > Embed HTML
Paste the widget embed code
Adjust the widget size and publish

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Squarespace

Use a Code Block to embed the widget on any Squarespace page.

Edit your page and add a Code Block
Paste the embed code into the code editor
Disable "Display Source" if prompted
Save and preview the page

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Shopify

Add the widget to your Shopify theme or individual pages using the HTML liquid tag.

Go to Online Store > Themes > Edit code
Open the template file (e.g., page.liquid or section)
Paste the embed code where you want the clock
Save and preview

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

HTML / Blogger

Paste the embed code directly into your HTML template or blog post.

Copy the embed code from the widget builder above
Paste it into your HTML wherever you want the clock
Works with any static site, Blogger, Hugo, Jekyll, or plain HTML
No JavaScript framework required

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Use cases

Where to use Timezzon widgets

Remote team dashboards

Show local time for every team member across timezones. Perfect for Slack, Notion, or internal wikis.

Travel & tourism sites

Display destination time on booking pages, travel guides, and airport information pages.

E-commerce & SaaS

Show support hours, business hours, or next-day shipping cutoff times for different regions.

Event & webinar pages

Let attendees see their local time alongside event time. Reduce missed events due to timezone confusion.

News & media

Embed live clocks in articles about global events, markets, or international coverage.

Corporate websites

Display office hours for global headquarters and regional offices in a single world clock widget.

Popular widget pages

London clock New York clock Tokyo clock Dubai clock Sydney clock Paris clock Singapore clock Los Angeles clock

Frequently asked questions

Widget FAQ

Frequently Asked Questions

How do I add a clock widget to my website?

Is the Timezzon widget free?

What designs are available?

How does the multi-city widget work?

Can I customize the widget colors?

Does the widget work on mobile?

What is the WordPress shortcode format?

Explore Timezzon

World Clock Time Zone Converter Meeting Planner Sunrise & Sunset Stopwatch Timer Date Calculator Chrome Extension Public Holidays Timezone Reference FAQ Blog About

Embed a clock for one city

Configure widget

Pick a city, theme and style

CityTheme

Accent color

Font size

Live preview · London

London--:--

Embed code

Paste into any webpage

<a class="timezzon-clock-widget"
   data-timezzon-clock="london"
   href="https://www.timezzon.com/time/london">
  Current time in London
</a>

<script async src="…/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Choose a design

Click any card to preview · 38 styles available

classic

1–20 of 38

World clock for your website

Show multiple city clocks in a single responsive grid. Ideal for global companies, remote teams, travel sites, and international event pages. Add 2-8 cities in one embed.

Multi-city widget

Show 2-8 clocks in one embed

Selected cities (3/8)

LondonNew YorkTokyo

Add city

Theme

Design

Embed code

Paste into any webpage

<div class="timezzon-multi-clock" data-timezzon-cities="london,new-york,tokyo" data-timezzon-theme="dark" data-timezzon-design="classic" data-timezzon-seconds="false">
  <a href="https://www.timezzon.com/time/london">London</a>
  <a href="https://www.timezzon.com/time/new-york">New York</a>
  <a href="https://www.timezzon.com/time/tokyo">Tokyo</a>
</div>
<script async src="https://www.timezzon.com/widgets/multi-clock.js?cities=london%2Cnew-york%2Ctokyo&theme=dark&design=classic&seconds=false&accent=default&showCity=true&fontSize=medium"></script>

Built for performance and SEO

Lightweight

Under 3KB gzipped

The entire widget script is under 3KB gzipped. No jQuery, no React, no framework dependencies. Loads asynchronously and renders instantly with server-synced time.

Multi-platform

Works everywhere

WordPress, Wix, Squarespace, Shopify, Blogger, or plain HTML. The widget is a simple script tag that works on any website without server-side code.

10 designs

Matches your brand

From minimal terminal style to bold editorial layouts. Choose from 10 designs in dark or light themes to match your website's aesthetic.

How to install on any platform

WordPress

Install the Timezzon plugin or paste the shortcode directly into any post, page, or widget area.

Install the Timezzon Clock Widget plugin from the WordPress plugin directory, or
Add a Custom HTML block in the WordPress editor
Paste the embed code and save
The clock appears live on your page

Shortcode

[timezzon-clock city="london" theme="dark" design="classic" seconds="true"]

Wix

Add an HTML embed element to your Wix page and paste the widget code.

Click + Add in the Wix editor
Choose Embed Code > Embed HTML
Paste the widget embed code
Adjust the widget size and publish

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Squarespace

Use a Code Block to embed the widget on any Squarespace page.

Edit your page and add a Code Block
Paste the embed code into the code editor
Disable "Display Source" if prompted
Save and preview the page

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Shopify

Add the widget to your Shopify theme or individual pages using the HTML liquid tag.

Go to Online Store > Themes > Edit code
Open the template file (e.g., page.liquid or section)
Paste the embed code where you want the clock
Save and preview

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

HTML / Blogger

Paste the embed code directly into your HTML template or blog post.

Copy the embed code from the widget builder above
Paste it into your HTML wherever you want the clock
Works with any static site, Blogger, Hugo, Jekyll, or plain HTML
No JavaScript framework required

Embed code

<a class="timezzon-clock-widget" data-timezzon-clock="london" href="https://www.timezzon.com/time/london">Current time in London</a>
<script async src="https://www.timezzon.com/widgets/clock.js?city=london&theme=dark&design=classic&seconds=true"></script>

Where to use Timezzon widgets

Remote team dashboards

Show local time for every team member across timezones. Perfect for Slack, Notion, or internal wikis.

Travel & tourism sites

Display destination time on booking pages, travel guides, and airport information pages.

E-commerce & SaaS

Show support hours, business hours, or next-day shipping cutoff times for different regions.

Event & webinar pages

Let attendees see their local time alongside event time. Reduce missed events due to timezone confusion.

News & media

Embed live clocks in articles about global events, markets, or international coverage.

Corporate websites

Display office hours for global headquarters and regional offices in a single world clock widget.

Clock Widgets for Websites

Embed a clock for one city

World clock for your website

Built for performance and SEO

Under 3KB gzipped

Works everywhere

Matches your brand

How to install on any platform

WordPress

Wix

Squarespace

Shopify

HTML / Blogger

Where to use Timezzon widgets

Remote team dashboards

Travel & tourism sites

E-commerce & SaaS

Event & webinar pages

News & media

Corporate websites

Convert times while you browse

Widget FAQ

Frequently Asked Questions

Clock Widgets for Websites

Embed a clock for one city

World clock for your website

Built for performance and SEO

Under 3KB gzipped

Works everywhere

Matches your brand

How to install on any platform

WordPress

Wix

Squarespace

Shopify

HTML / Blogger

Where to use Timezzon widgets

Remote team dashboards

Travel & tourism sites

E-commerce & SaaS

Event & webinar pages

News & media

Corporate websites

Convert times while you browse

Widget FAQ

Frequently Asked Questions