feedbackfin
v1.0.3
あなたのウェブサイトのどこにでもフィードバックを収集するための小さなウィジェット。それでおしまい。
ウェブサイト•不一致•ツイッター
ウィジェットを試してください↗
ページにウィジェットをロードします。
< 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にPOSTリクエストを行います。
Rowyの低コードプラットフォームを使用してWebhook URLを簡単に生成し、共同スプレッドシートUIのフィードバックデータを管理します。オプションで、Rowyの組み込みコード編集者を使用して、着信フィードバックをさらに自動化できます（例：Team Slack/Discord、電子メールフォローアップなど）。
ウェブサイトのエンドツーエンドのビデオ手順↗
オプションはwindow.feedbackfin.configオブジェクトに設定されています。
urlフィードバックを送信するURL。ウィジェットは、JSONボディとしてデータを使用して、このURLにPOSTリクエストを行います。上記の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)真実です
親要素には、値がdarkを含むdata-theme属性があります。
例： <body data-theme="dark">
ダークモードの色は、CSS変数を使用して設定されています。あなたはそれらを上書きすることができます：
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}このウィジェットは、適切なラベルを持つ標準のHTMLフォーム要素を使用して構築されています。
フォーカスは、フォーカストラップを使用して開いている場合、ウィジェット内に閉じ込められます。フォーカストラップで別の要素内にこのウィジェットをネストするときは、注意してください。
GitHubリポジトリの問題とプルリクエストを伴うフィードバックフィンに貢献します。
