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.
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.
