WorkTime LogoWorkTime

Embeddable Badge Generator

Embeddable Status Badge

Basic Configuration

Appearance

Holiday Exclusion

Live Preview

Preview simulates the badge on the selected date — switch to a weekend or holiday date to see the resting state.

Light Background
Working
Dark Background
Working
[![Working](http://localhost/api/badge.svg?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=Working&unavailableText=Resting&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&style=flat)](http://localhost/)
<a href="http://localhost/"><img src="http://localhost/api/badge.svg?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=Working&unavailableText=Resting&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&style=flat" alt="Working" height="20"></a>
Live previewWorking

Renders anywhere an img tag works, no CSP frame-src config needed — the badge is wrapped in a link to its country page. SVG is cached (~5 min via CDN; GitHub camo may cache for hours). Need per-minute real-time updates on your own website? Use the iframe snippet below instead.

<iframe src="http://localhost/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=Working&unavailableText=Resting&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff" width="320" height="60" frameborder="0" style="border: none; background: transparent;"></iframe>

Instructions

  • Set your work timezone, working hours, work days and status texts.
  • Copy the Markdown snippet into your GitHub / npm README.
  • Copy the HTML badge snippet (linked image) into websites or email signatures.
  • The status refreshes automatically about every 5 minutes via CDN cache.

Frequently Asked Questions

How do I use the status badge?

1. Basic Configuration: Set your work timezone, working hours, and work days.

2. Status Texts: Customize the text shown for working and resting states.

3. Copy Code: Grab the Markdown snippet for READMEs, or the HTML image snippet for websites and email signatures.

What features does the badge have?

Real-time Status: Automatically displays "Working" or "Resting" based on your set working hours.

Lightweight: A single static SVG image with no JavaScript.

Holiday Recognition: Supports holidays, automatically showing the resting state during holidays.

Preview Tools: Simulate viewer timezone and date to verify holiday and weekend behavior.

Where can the badge be used?

GitHub / npm README: Paste the Markdown snippet.

Websites and blogs: Paste the HTML image snippet.

Email signatures: Use the HTML image snippet where remote images are allowed.

Note: GitHub's image proxy may cache the badge for several hours.

What technical features does it have?

Cross-domain: Works on any website — it is a plain image.

Zero Dependencies: Pure SVG, no JavaScript required on the host page.

CDN Cached: Refreshes about every 5 minutes via cache headers.

SEO Friendly: Does not affect search engine crawling and indexing.

HTTPS: Fully works on HTTPS sites.

What can be customized?

Time Settings: Working hours, timezone, work days, holidays.

Text Content: Display text for working and resting states.

Colors: Background and text colors for both states.

Shape: Flat, flat-square or capsule.