World Clock widget

Webflow embed guide

How to Add a World Clock to a Webflow Site.

Webflow's Embed element accepts custom code, which makes adding a World Clock straightforward, and because the widget is hosted, you can keep tweaking its content later without opening the Designer or republishing the site.

Live starter preview

Step by step

Embed the World Clock in your Webflow site.

01

Create the widget in Fugte

Start from the World Clock starter, generate a variation with the built-in AI, or paste your own code.

02

Customize and publish it in Fugte

Text, colors, images, numbers, and options are no-code settings, so you can match your branding without touching code. Publishing gives the World Clock a stable hosted link and an embed snippet.

03

Drag in an Embed element

In the Webflow Designer, drag an Embed element from the Add panel to where the widget should sit and paste the embed snippet into the code editor.

04

Publish the site

Save and publish. The World Clock renders live on the published site; later content changes happen in the widget editor, with no republish needed.

Good to know

Webflow specifics worth planning around.

Webflow's custom-code Embed element requires a paid Webflow site plan. On free staging domains, you can link to the hosted widget page instead.

The embed snippet is a few lines, so it uses almost none of the Embed element character limit.

The widget is hosted and sandboxed, so it cannot conflict with Webflow interactions or custom code elsewhere on the page.

Content edits in the widget editor go live immediately, useful when a client wants copy changes but you do not want to republish the Webflow project.

This widget

What the World Clock needs from the embed.

The section above applies to anything you put on a Webflow site. This part is specific to the World Clock.

The clock is short, and its height is set by how many cities you list rather than by anything the visitor does. Set the frame height on the editor's Iframe tab to fit the list you have, and revisit it when you add a city, or the new row ends up scrolling inside the frame.

City names sit on one line and a long one is cut off rather than wrapped, so short labels survive a narrow box best. "Support" and "HQ" read better than "Customer support (EMEA)" at any width.

The times come from the visitor's own device, so a wrong device clock shifts every city by the same amount. The gaps between cities stay correct either way.

Ideas

Where the World Clock fits.

Remote teams

A live world clock for the cities your business spans, with your own label on each one

Support hours

A live world clock for the cities your business spans, with your own label on each one

International storefronts

A live world clock for the cities your business spans, with your own label on each one

FAQ

Common questions.

Can I add the World Clock on a free Webflow plan?

The Embed element needs a paid site plan. On free plans you can still add a link or button pointing to the hosted widget page.

Does the World Clock count against Webflow CMS or code limits?

No CMS items are used, and the embed snippet is small. The widget itself is served from an external CDN, not stored in Webflow.

Can a client edit the widget without Designer access?

Yes, that is a common setup. The client edits text, colors, and offers through Fugte's no-code settings; the Webflow layout stays locked.

Try it

Put a World Clock on your Webflow site today.

Start free, customize the World Clock without code, and embed it with one link.