Time-Based Text automatically changes its content depending on the visitor’s local time. You can define any number of 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.
Add one or more time windows (HH:MM format for start & end) and the text you want displayed for each.
Set a default text for all other times.
Adjust typography, colors, alignment, padding, and radius to match your design.

Editor live preview

In the Canvas you immediately see the text that matches the current time and your defined windows.

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 after initial render.

Suggested for you