Webflow Attribute Booster

Webflow Real Time Clock

Display the live current time for any location in the world without style limitations. 100% free, just add attributes.

Getting Started 🕙

Display the live current time for any location in the world directly on your Webflow site.

Want to show your visitors the current date and time? Maybe you have multiple locations or offices across the globe? Use this guide to learn how to add a real-time clock to any Webflow project.

This Booster can be added directly into your Webflow projects with our official Webflow App. You can install the official Boosters App. The Boosters app will add all the attributes and elements you need directly in your Webflow project.

Install Instructions ✍️

1. Add the Booster Script To Your Project.

Copy the script listed below, and add it to the <head> tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.

<!-- Flowbase Booster [Real Time Clock] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-real-time-clock@1.1.0/dist/real-time-clock.min.js" type="text/javascript"</script>

2. Setting Up Your Clock Component

To begin, add a ▭ div block to your page that will hold the key attributes and elements of the clock, such as hours, seconds, month, etc. For this guide, we’ll call it 'Clock.' If you're using the app, the component will automatically include the necessary attributes, so you can skip these setup steps.

Next, add the following attributes to the 'Clock' div-block:

Name: fb-clock Value: true
Name: fb-clock-timezone Value: Australia/Brisbane
Name: fb-clock-format Value: 12-hour

You can find the appropriate timezone to apply using this site, and adjust the value based on your location or preference. Additionally, you can choose between a 12-hour or 24-hour format, depending on your needs.

3. Building the Clock Structure

Now it's time to build your clock by adding the elements you want to display. The structure is flexible, so you can choose to show only the parts you need, like hours, minutes, or even the date. If you don’t want to display certain elements, simply omit them.

Here’s how to set it up:

Add Text Elements:
Inside your 'Clock' wrapper, add text elements for each part of the clock you want to display.
Assign Attributes:
Attach the appropriate attributes to each text element based on what you want to show:
- To Show Hours:
  Name: fb-clock-hour
  Value: hh
- To Show Minutes:
  Name: fb-clock-minute
  Value: mm
- To Show the Period (AM/PM):
  Name: fb-clock-period
  Value: true
- To Show the Day:
  Name: fb-clock-day
  Value: DD
- To Show the Month:
  Name: fb-clock-month
  Value: MMMM
- To Show the Year:
  Name: fb-clock-year
  Value: YYYY

You can customize the format of these values by adjusting the attributes as needed. For more details on timecode values and formatting options, learn more here.

4. Customizing the Clock Format

You can easily adjust the format of your clock by changing the attribute values. Below are some options you can use to customize how each element is displayed:

Day of the Week:
Name: fb-clock-day-week
Values: dddd (e.g., Monday), ddd (e.g., Mon)
Day of the Month:
Name: fb-clock-day
Values: DD (e.g., 01), D (e.g., 1)
Month:
Name: fb-clock-month
Values: MMMM (e.g., January), MMM (e.g., Jan), MM (e.g., 01), M (e.g., 1)
Year:
Name: fb-clock-year
Values: YYYY (e.g., 2024), YY (e.g., 24)

By adjusting these values, you can tailor the clock’s appearance to match your design preferences.

6. Add this in one-click with our free app

If you prefer a quicker setup, you can use our Booster app to add the clock to your project in just seconds. Skip the manual setup and effortlessly integrate this feature with a single click!

7. Publish & Test 🚀

Once you've completed the steps above, including adding both the script and the necessary attributes, it's time to publish your page. Head over to your live staging domain to see the Booster in action. Test the real-time clock feature to ensure everything is working smoothly.

Did you find this helpful? 💕

Your support means the world to us! In just 10 seconds, you can make a big difference:

Leave a like on our Free Webflow Booster App.
Share what you built with us on Twitter! We re-post to thousands!

Thank you for being awesome! 🌟

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application

*Official Webflow booster application