feedbackfin
v1.0.3
一个很小的小部件，可以收集网站上任何地方的反馈。就是这样。
网站• Discord • Twitter
尝试小部件↗
在您的页面上加载小部件：
< script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >设置Webhook URL（在下一节中读取说明），并在脚本中进行配置。可选，添加您要从网站传递的任何用户信息：
< script >
window . feedbackfin = { config : { } , ... window . feedbackfin } ;
window . feedbackfin . config . url = "https://rowy-hooks.run.app/wh/..." ;
window . feedbackfin . config . user = { name : "..." , email : "..." } ;
</ script >设置一个按钮打开小部件：
< button data-feedbackfin-button > Feedback </ button > 这是将反馈发送到的URL。小部件将以反馈数据作为JSON主体向此URL提出帖子请求。
使用Rowy的低代码平台轻松地生成Webhook URL，并在协作电子表格-UI上管理反馈数据。可选地，您可以使用Rowy的内置代码编辑器进一步自动化反馈（例如：在Slack/Discord上通知团队，电子邮件跟进等）。
网站上的端到端视频说明↗
选项在window.feedbackfin.config中设置。feedbackfin.config对象：
url将反馈发送到的URL。小部件将用数据作为JSON主体向该URL提出发布请求。请参阅上面设置Webhook URL。
user将内容作为表格的一部分提交的对象。注意： feedbackType ， message和timestamp是保留的字段，并将被表单值覆盖。
通常：
window . feedbackfin . config . user = {
name : "..." ,
email : "..." ,
} ;disableErrorAlert可选地，如果未设置URL或请求失败，则禁用显示警报。默认值： disableErrorAlert: false
加载脚本后，它会查找具有data-feedbackfin-button属性的任何元素，并在单击任何这些元素时打开小部件。
< button data-feedbackfin-button > Feedback </ button > window.feedbackfin对象会暴露open ， close和submit方法，因此也可以直接调用它们。
< button onclick =" window.feedbackfin.open(event) " > Feedback </ button >小部件使用event.target使用浮动UI来计算其位置。
小部件在打开时就附加在关闭</body>标签之前，并尊重页面的font-family 。样式是在开口<head>标签之前附加的，因此您的自定义优先。
您可以通过以下方式自定义小部件的外观
覆盖CSS变量。
例如，您可以使用以下方式更改主按钮颜色
: root {
--feedbackfin-primary-color : # 007aff ;
--feedbackfin-primary-color-text : # fff ;
}覆盖CSS规则。班级名称以feedbackfin__
两者都会激活黑暗模式：
用户将其系统主题设置为黑暗
ie @media (prefers-color-scheme: dark)是真的，或者
任何父元素都有一个data-theme属性，其值包含dark 。
示例： <body data-theme="dark">
使用CSS变量设置深色模式颜色。您可以覆盖它们：
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}该小部件是使用标准HTML表单元素和适当标签构建的。
使用焦点陷阱打开时，焦点被困在小部件中。将此小部件嵌套在另一个元素中时要小心。
通过问题为反馈鳍做出贡献，并在GitHub存储库中提取请求。
