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 range | Message | ID to use |
|---|---|---|
| 5am - 12pm | ☀️ Good morning | time-greeting |
| 12pm - 2pm | 🍽️ Enjoy your meal | time-greeting |
| 6pm - 10pm | 🌙 Good evening | time-greeting |
| Based on the day | Happy 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()];
})();Conclusion
A small personalization detail that creates an immediate connection with the visitor.
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.














