Time-Based Text

Show Preview
Time-Based Text

About Time-Based Text

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

  1. Drag Time-Based Text onto your canvas.

  2. Add one or more time windows (HH:MM format for start & end) and the text you want displayed for each.

  3. Set a default text for all other times.

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