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.
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/[email protected]/dist/real-time-clock.min.js" type="text/javascript"</script>
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:
fb-clock
Value: true
fb-clock-timezone
Value: Australia/Brisbane
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.
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:
fb-clock-hour
hh
fb-clock-minute
mm
fb-clock-period
true
fb-clock-day
DD
fb-clock-month
MMMM
fb-clock-year
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.
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:
fb-clock-day-week
dddd
(e.g., Monday), ddd
(e.g., Mon)fb-clock-day
DD
(e.g., 01), D
(e.g., 1)fb-clock-month
MMMM
(e.g., January), MMM
(e.g., Jan), MM
(e.g., 01), M
(e.g., 1)fb-clock-year
YYYY
(e.g., 2024), YY
(e.g., 24)By adjusting these values, you can tailor the clock’s appearance to match your design preferences.
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!
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.
Your support means the world to us! In just 10 seconds, you can make a big difference:
Thank you for being awesome! 🌟