Add

Lorem ipsum

Lorem ipsum

A
A
A
Easter egg

15 views

2 min

How to Show Different Text Based on the Time of Day in Webflow

Learn how to display different text based on the time of day in Webflow: dynamic greetings and day-specific messages.

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to display different text depending on the time of day in Webflow.

Example

Based on your local time

Loading...

...

Time rangeMessageID to use
5am - 12pm☀️ Good morningtime-greeting
12pm - 2pm🍽️ Enjoy your mealtime-greeting
6pm - 10pm🌙 Good eveningtime-greeting
Based on the dayHappy Monday, Happy Friday...day-greeting

1. Add an ID to your text in Webflow

On your Text Block: custom attribute Name = id, Value = time-greeting.

2. Add the script in Footer code

(function() {
function getGreeting() {
var h = new Date().getHours();
if (h >= 5 && h < 12) return '☀️ Good morning';
if (h >= 12 && h < 14) return '🍽️ Enjoy your meal';
if (h >= 14 && h < 18) return '🌤️ Good afternoon';
if (h >= 18 && h < 22) return '🌙 Good evening';
return '⭐ Good night';
}
var el = document.getElementById('time-greeting');
if (el) el.textContent = getGreeting();

var dayEl = document.getElementById('day-greeting');
var days = ['Happy Sunday', 'Happy Monday!', 'Happy Tuesday', 'Happy midweek',
'Almost the weekend 🙌', 'Happy Friday!', 'Happy Saturday ☀️'];
if (dayEl) dayEl.textContent = days[new Date().getDay()];
})();

good to know

The script uses the visitor's local time. A visitor in Australia will see 'Good evening' at noon in France: the greeting matches their local time, which makes it feel personalized.

Conclusion

A small personalization detail that creates an immediate connection with the visitor.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Published on

You might be interested in these tutorials

Similar tutorials

SEO / GEO

5 min read

5 views

How to Set Up a Redirect in Webflow? (2026)

Updated on 19.12.2025 by Sandro DA SILVA

SEO / GEO

5 min read

5 views

Add structured data to your Webflow site?

Updated on 21.08.2025 by Sandro DA SILVA

No-code

5 min read

5 views

How to Obfuscate a Link in Webflow

Updated on 23.04.2025 by Sandro DA SILVA

Let’s f*****G GO !!

Ready to launch
Your business?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

You'll :heart: our collaboration...