如何使用嵌入式状态徽章？
1. 配置基础信息：设置您的工作时区、工作时间和工作日
2. 自定义样式：选择预设样式或自定义颜色、布局等
3. 生成徽章：点击“生成徽章”按钮获取嵌入代码
4. 嵌入网站：将生成的iframe代码复制到您的网站中
嵌入式徽章生成器
嵌入式状态徽章
基础配置
外观样式
节假日排除
实时预览
浅色背景
深色背景
https://isworkingnow.com/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&style=1&workDays=1%2C2%2C3%2C4%2C5&text=%E5%B7%A5%E4%BD%9C%E4%B8%AD&unavailableText=%E4%BC%91%E6%81%AF%E4%B8%AD&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
<iframe src="https://isworkingnow.com/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&style=1&workDays=1%2C2%2C3%2C4%2C5&text=%E5%B7%A5%E4%BD%9C%E4%B8%AD&unavailableText=%E4%BC%91%E6%81%AF%E4%B8%AD&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" width="380" height="60" frameborder="0" style="border: none;"></iframe>
使用说明
- 将生成的 iframe 代码粘贴到您的网站 HTML 中即可。
- 如果是 React/Vue 项目，请确保允许 iframe 渲染。
- 如果您的网站启用了 CSP (Content Security Policy)，请添加
frame-src 'self' https://isworkingnow.com/ - 徽章会自动根据访问者的系统时间或预设时区显示工作状态。
常见问题
徽章有什么效果？
实时状态显示：根据您设置的工作时间自动显示“工作中”或“离线”状态
多样式支持：提供经典、胶囊、方形、渐变等10种预设样式
响应式设计：自动适应不同设备和屏幕尺寸
节假日识别：支持设置节假日，在节假日自动显示离线状态
时区自适应：自动根据访客所在时区显示正确的工作状态
什么情况下需要配置CSP安全策略？
当您的网站启用了CSP（内容安全策略）时：
• 如果徽章无法正常显示或加载
• 浏览器控制台出现CSP相关错误信息
• 网站有严格的安全策略要求
解决方案：在您的CSP策略中添加以下配置：
frame-src 'self' https://isworkingnow.com/
徽章支持哪些技术特性？
跨域支持：可嵌入任何网站，无跨域限制
轻量级：加载速度快，不影响网站性能
无依赖：纯HTML/CSS实现，无需额外JavaScript库
SEO友好：不影响搜索引擎抓取和索引
HTTPS支持：完全支持HTTPS网站
可以自定义哪些选项？
时间设置：工作时间、时区、工作日、节假日
文本内容：工作中和离线状态的显示文本
视觉样式：颜色、字体大小、内边距、圆角、布局方式
状态指示器：可选择显示彩色状态指示点
本地时间：可选择是否显示当前本地时间