Embed Badge Generator

Create dynamic work status badges for your website to let visitors know your service availability

Basic Configuration

Timezone

Start Time

End Time

Work Days

Working Text

Offline Text

Style Configuration

Preset Style

Live Preview

Preview Settings

Preview Timezone

Preview Date

White Background

Dark Background

Usage Instructions

CSP Security Policy:Please ensure your website CSP policy allows iframe loading. Content-Security-Policy: frame-ancestors 'self' isworkingnow.com;

Responsive Design:：Badge automatically adapts to different screen sizes

Real-time Update:：Status updates automatically every minute

Timezone Support:：Automatically displays visitor local time

Frequently Asked Questions

How to use the embed status badge?

1. Configure basic information: Set your work timezone, working hours, and work days

2. Customize style: Choose preset styles or customize colors, layout, etc.

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

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

What effects does the badge have?

Real-time status display: Automatically shows "Working" or "Offline" status based on your set working hours

Multiple style support: Provides 10 preset styles including classic, pill, square, gradient, etc.

Responsive design: Automatically adapts to different devices and screen sizes

Holiday recognition: Supports setting holidays to automatically show offline status on holidays

Timezone adaptive: Automatically displays correct work status based on visitor's timezone

When do I need to configure CSP security policy?

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

• If the badge cannot display or load properly

• Browser console shows CSP-related error messages

• Website has strict security policy requirements

Solution: Add the following configuration to your CSP policy:

frame-src 'self' https://work-time.mchost.guru;

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

No dependencies: Pure HTML/CSS implementation, no additional 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 status

Visual style: Colors, font size, padding, border radius, layout

Status indicator: Option to display colored status indicator dots

Local time: Option to show current local time