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存儲庫中提取請求。
