FloatyJS 是一个轻量级且可定制的悬浮按钮和窗口组件，基于 LitElement 构建。通过最小的努力，轻松将交互式覆盖层嵌入到您的网站中，提升用户体验。
- 悬浮按钮：一个时尚、可定制的按钮，浮动在网页上，任何部分都能轻松访问。
- 覆盖窗口：点击按钮切换一个悬浮窗口，可以通过 iframe 显示任何内容。
- 简易配置：使用
data-属性自定义按钮文本、主题颜色、窗口大小和目标链接。 - 响应式设计：确保悬浮元素在所有设备和屏幕尺寸上均表现出色。
- 安全消息传递：使用
postMessage在主页面和 iframe 内容之间安全通信。
查看在线演示 这里(注意右下角按钮)。
在您的 HTML 中包含 FloatyJS 脚本，通过添加以下 <script>
标签。您可以根据需要使用 data- 属性进行自定义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>FloatyJS 示例</title>
</head>
<body>
<!-- 您的页面内容 -->
<!-- FloatyJS 脚本 -->
<script
type="module"
src="https://w0fv1.github.io/FloatyJS/floaty.js"
data-theme-color="#ff5722"
data-button-text="💬"
data-tooltip-text="点击打开悬浮窗口"
data-window-width="600px"
data-window-height="500px"
data-window-title="FloatyJS"
data-target-link="https://your-iframe-content.com"
defer
></script>
</body>
</html>通过在 <script> 标签上添加 data- 属性来自定义 FloatyJS：
data-theme-color：设置悬浮按钮的主色调。(默认值：#000000)data-button-text：设置悬浮按钮上显示的文本或表情符号。(默认值：💬)data-tooltip-text: 设置悬浮按钮的提示文本。(默认值：点击这里可以打开悬浮窗)data-window-title：设置悬浮窗口的标题。(默认值：FloatyJS)data-window-theme-color：设置悬浮窗口的背景颜色。(默认值：#ffffff)data-window-width：定义悬浮窗口的宽度。(默认值：400px)data-window-height：定义悬浮窗口的高度。(默认值：300px)data-target-link：指定在悬浮窗口的 iframe 中加载的 URL。(默认值：/)
示例：
<script
type="module"
src="https://w0fv1.github.io/FloatyJS/floaty.js"
data-theme-color="#ff5722"
data-button-text="💬"
data-tooltip-text="点击打开悬浮窗口"
data-window-width="600px"
data-window-height="500px"
data-window-title="FloatyJS"
data-target-link="https://your-iframe-content.com"
defer
></script>您可以通过修改 CSS 变量或扩展组件来进一步自定义外观和行为。
在您自己的样式表中覆盖 CSS 变量，以自定义颜色、阴影和过渡效果。
floaty-button {
--main-color: #4caf50;
--hover-filter: brightness(1.2);
--active-filter: brightness(0.8);
}
floaty-window {
--window-background: #ffffff;
--window-border-radius: 10px;
}添加事件监听器或扩展组件以添加更多功能，例如集成第三方 API 或在悬浮窗口中添加额外的控件。
document.addEventListener("DOMContentLoaded", () => {
const floatyButton = document.querySelector("floaty-button");
const floatyWindow = document.querySelector("floaty-window");
floatyButton.addEventListener("click", () => {
if (floatyWindow.visible) {
floatyWindow.sendMessage({
type: "greet",
message: "Hello from the main page!",
});
}
});
});- 实时聊天支持：在悬浮窗口中嵌入聊天服务，为访客提供实时支持。
- 反馈表单：允许用户提交反馈或报告问题，无需离开当前页面。
- 产品快速查看：在覆盖层中展示产品详情、图片或视频，无需导航离开。
- 调查与投票：通过互动调查或投票与您的受众互动，直接在您的网站上。
- 语言翻译：集成翻译小部件，帮助用户以不同语言查看内容。
- 用户教程：提供分步指南或视频教程，协助用户导航您的网站。
- 电商购物车：显示一个迷你的购物车，用户添加商品时实时更新。
- 通知提醒：以非侵入性的悬浮窗口显示重要公告或通知。
- 社交媒体动态：集成实时社交媒体动态，使您的内容动态且富有吸引力。
- 内容分享：允许用户直接从悬浮窗口将内容分享至他们的社交平台。
MIT 许可证
MIT 许可证
版权所有 (c) 2024 您的名字
特此免费授予任何获得本软件及相关文档文件（以下简称“软件”）副本的人无限制地处理软件的权利，包括但不限于使用、复制、修改、合并、出版、分发、再授权及/或出售软件的副本，并允许被授权人在符合以下条件的情况下这样做：
上述版权声明和本许可声明应包含在软件的所有副本或重要部分中。
本软件按“原样”提供，不附有任何形式的明示或暗示的担保，包括但不限于适销性、特定用途适用性及非侵权的担保。在任何情况下，作者或版权持有人均不对因软件或软件的使用或其他交易而产生的任何索赔、损害或其他责任承担责任。
欢迎通过访问 GitHub 仓库 贡献代码、报告问题或提出功能建议。