嵌入式状态徽章生成器
为您的网站创建动态工作状态徽章，让访客了解您的服务可用时段
基础配置
样式配置
实时预览
预览设置
加载中...
白色背景
加载中...
深色背景
加载中...
使用说明
CSP安全策略：请确保您的网站CSP策略允许加载iframe。
Content-Security-Policy: frame-ancestors 'self' isworkingnow.com; 响应式设计：：徽章会自动适应不同屏幕尺寸
实时更新：：状态每分钟自动更新一次
时区支持：：自动显示访客本地时间
常见问题
如何使用嵌入式状态徽章？
1. 配置基础信息：设置您的工作时区、工作时间和工作日
2. 自定义样式：选择预设样式或自定义颜色、布局等
3. 生成徽章：点击"生成徽章"按钮获取嵌入代码
4. 嵌入网站：将生成的iframe代码复制到您的网站中
徽章有什么效果？
实时状态显示：根据您设置的工作时间自动显示"工作中"或"离线"状态
多样式支持：提供经典、胶囊、方形、渐变等10种预设样式
响应式设计：自动适应不同设备和屏幕尺寸
节假日识别：支持设置节假日，在节假日自动显示离线状态
时区自适应：自动根据访客所在时区显示正确的工作状态
什么情况下需要配置CSP安全策略？
当您的网站启用了CSP（内容安全策略）时：
• 如果徽章无法正常显示或加载
• 浏览器控制台出现CSP相关错误信息
• 网站有严格的安全策略要求
解决方案：在您的CSP策略中添加以下配置：
frame-src 'self' https://work-time.mchost.guru;
徽章支持哪些技术特性？
跨域支持：可嵌入任何网站，无跨域限制
轻量级：加载速度快，不影响网站性能
无依赖：纯HTML/CSS实现，无需额外JavaScript库
SEO友好：不影响搜索引擎抓取和索引
HTTPS支持：完全支持HTTPS网站
可以自定义哪些选项？
时间设置：工作时间、时区、工作日、节假日
文本内容：工作中和离线状态的显示文本
视觉样式：颜色、字体大小、内边距、圆角、布局方式
状态指示器：可选择显示彩色状态指示点
本地时间：可选择是否显示当前本地时间