嵌入小组件

为您的网站免费提供工具和游戏 – 与您的页面风格一致

您可以通过一个小型 iframe 将我们的在线工具和游戏免费嵌入到自己的网站中。无需注册 – 作为回报，boza.info 小徽章保持可见。工具可以在颜色和风格上完全自定义；对于游戏，棋盘本身保持原样，只有周围（卡片、记分板、按钮）可以自定义。

快速开始

复制 iframe 代码片段并粘贴到您的网站中。或者：打开工具或游戏页面，在分享菜单中选择“嵌入”——代码会自动复制。

实时样式编辑器

选择一个小组件，调整颜色和选项——左侧预览会实时更新。编辑器下方就是可以直接复制的嵌入代码。

小组件

颜色

提示：点击预览中的元素以编辑其颜色。

背景

卡片

基础主题

强调色

按钮文字

按钮

按钮文字（浅色）

显示屏

边框

成功

危险

文字

文字（柔和）

徽章背景

徽章文字

选项

浅色模式选择元素紧凑无标题栏透明背景

圆角半径 (px)

宽度

语言

嵌入代码

参数参考

所有参数都直接附加到小组件 URL 上：

参数	值	效果
`theme`	`dark` / `light`	基础主题（默认：深色）
`bg`	Hex oder `transparent`	小组件背景
`card`	Hex	卡片/记分板背景
`accent`	Hex	按钮和活动元素的强调色
`accentText`	Hex	强调色按钮上的文字颜色
`btn`	Hex	标准按钮的背景
`btnText`	Hex	标准按钮上的文字颜色
`display`	Hex	显示屏/输入框背景
`border`	Hex	卡片和字段的边框颜色
`success`	Hex	成功颜色（例如等号、已复制）
`danger`	Hex	危险颜色（例如清除/重置）
`text`	Hex	主要文字颜色
`muted`	Hex	次要文字颜色
`radius`	Zahl (px)	卡片的圆角半径
`maxWidth`	`full` oder px-Zahl	小组件宽度（full = 填满页面）
`compact`	`true`	压缩标题栏
`hideHeader`	`true` / `false`	显示/隐藏标题栏
`lang`	`de/en/es/fr/hi/zh`	小组件语言
`badgeBg`	Hex	boza.info 徽章背景
`badgeFg`	Hex	boza.info 徽章文字颜色

通过 JavaScript 实时自定义

您可以在运行时自定义小组件而无需重新加载——通过向 iframe 发送 postMessage 消息：

var frame = document.getElementById('myWidget');

frame.contentWindow.postMessage({
    source: 'boza-widget-config',
    config: { accent: '#22c55e', card: '#0f172a' }
}, '*');

并非所有参数都可以实时更改：lang 和 theme 需要重新加载页面。

徽章说明

只要“boza.info”徽章保持可见，使用小组件就是免费的。您不得重命名小组件或将它们作为自己的产品展示。

常见问题

如何自定义小组件？

颜色通过十六进制值设置：accent 为按钮和活动元素着色，card 为卡片背景，text 和 muted 为文字颜色。使用 bg=transparent，小组件可无缝融入任何页面。圆角半径、紧凑性、标题栏和语言也可通过参数控制。

为什么我不能给游戏的棋盘着色？

对于游戏，活动棋盘（canvas、棋盘、单元格）有意保持原始设计。周围的一切都可以自定义：卡片、标题栏、记分板、排行榜面板和按钮。

这可以在 WordPress、Shopify 或网站构建器上使用吗？

可以——只要您能插入 HTML 块或 iframe（例如“自定义 HTML”块、“嵌入”块或代码小组件）。

这会减慢我的页面速度吗？

不会。小组件很轻量，仅在需要时加载（懒加载）。建议：使用 loading="lazy"。

我可以嵌入多个小组件吗？

可以，您可以在一个页面上嵌入任意数量的小组件。