Time-Based Text
Display different text based on the current time of day. Perfect for dynamic CTAs, service hours, or contextual messages.
Make it with Workshop
Build your own component with AI
About this Component
Time-Based Text automatically changes its content depending on the visitor’s local time. You can define up to three time windows and set a default text for all other times.
Typical use cases
Show service hours (“We’re available now”)
Time-sensitive CTAs (“Order before 11:45”)
Night messages (“Responses may be delayed”)
Event reminders (“Next show today at 8:15 PM”)
How to use
Drag Time-Based Text onto your canvas.
Define your 3 time windows in HH:MM format.
Enter the text you want displayed for each window.
Set a default text for all other times.
Adjust typography, colors, alignment, padding, and radius to match your design.
Tips
Keep time windows non-overlapping for clarity.
Use multiple instances (e.g., header CTA + footer notice) with different schedules.
Text updates automatically on load and every minute.
Accessibility
Outputs plain text inside a <div>. Combine with ARIA labels or semantic containers if needed.
Performance
Lightweight: runs a time check once per minute.
