Einbettbarer Badge-Generator

Einbettbarer Status-Badge

Basiskonfiguration

Arbeitszeitzone

Startzeit

Endzeit

Arbeitstage

Arbeiten

Pause

Erscheinungsbild

Voreingestelltes Theme

Feiertage ausschließen

Nationale Feiertage importieren

Datum manuell hinzufügen

Live-Vorschau

Heller Hintergrund

Dunkler Hintergrund

Direktlink (URL)

http://localhost/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&style=1&workDays=1%2C2%2C3%2C4%2C5&text=Arbeiten&unavailableText=Pause&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-Einbettungscode (Iframe)

Anleitung

Fügen Sie den generierten Iframe-Code in das HTML Ihrer Website ein.
Stellen Sie bei React/Vue-Projekten sicher, dass das Iframe-Rendering erlaubt ist.
Wenn Ihre Website CSP (Content Security Policy) aktiviert hat, fügen Sie bitte hinzu frame-src 'self' https://isworkingnow.com/
Der Badge zeigt automatisch den Arbeitsstatus basierend auf der Systemzeit des Besuchers oder der voreingestellten Zeitzone an.

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.