Embeddable Badge Generator

Embeddable Status Badge

Basic Configuration

Work Timezone

Start Time

End Time

Work Days

Working

Resting

Appearance

Preset Theme

Holiday Exclusion

Quick Import National Holidays

Manually Add Date

Live Preview

Light Background

Dark Background

Direct Link (URL)

https://isworkingnow.com/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&style=1&workDays=1%2C2%2C3%2C4%2C5&text=Working&unavailableText=Resting&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&fontSize=14&padding=8&borderRadius=4&layout=horizontal&textAlign=center&showLocalTime=true&showStatusIndicator=true&workingIndicatorColor=%23ffffff&unavailableIndicatorColor=%23ffffff&boxShadow=none

HTML Embed Code (Iframe)

Instructions

Paste the generated iframe code into your website HTML.
For React/Vue projects, ensure iframe rendering is allowed.
If your website has CSP (Content Security Policy) enabled, please add frame-src 'self' https://isworkingnow.com/
The badge automatically displays the working status based on the visitor's system time or preset timezone.

Frequently Asked Questions

How do I use the embeddable status badge?

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

2. Customize Style: Choose preset styles or customize colors, layouts, etc.

3. Generate Badge: Click the "Generate Badge" button to get the embed code.

4. Embed in Website: Copy the generated iframe code into your website.

What features does the badge have?

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

Multiple Styles: Provides 10 preset styles like classic, capsule, square, gradient, etc.

Responsive Design: Automatically adapts to different devices and screen sizes.

Holiday Recognition: Supports setting holidays, automatically displaying offline status during holidays.

Timezone Adaptive: Automatically shows the correct work status based on the visitor's timezone.

When do I need to configure CSP security policies?

When your website has CSP (Content Security Policy) enabled:

• If the badge fails to display or load properly

• If CSP-related error messages appear in the browser console

• If your website has strict security policy requirements

Solution: Add the following configuration to your CSP policy:

frame-src 'self' https://isworkingnow.com/

What technical features does the badge support?

Cross-domain Support: Can be embedded in any website without cross-domain restrictions.

Lightweight: Fast loading speed, does not affect website performance.

Zero Dependencies: Pure HTML/CSS implementation, no extra JavaScript libraries required.

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

HTTPS Support: Fully supports HTTPS websites.

What options can be customized?

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

Text Content: Display text for working and offline statuses.

Visual Style: Colors, font size, padding, border radius, layout.

Status Indicator: Optional colored status indicator dots.

Local Time: Option to display current local time.