Unduh feedbackfin - feedbackfin Sumber Download

feedbackfin

Data situs web

v1.0.3

Unduh

Sirip Umpan Balik

Widget kecil untuk mengumpulkan umpan balik di mana saja di situs web Anda. Itu saja.

Situs web • Perselisihan • Twitter

Coba widget ↗

Awal yang cepat

Muat widget di halaman Anda:

 < script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >

Siapkan url webhook (baca instruksi di bagian selanjutnya) dan konfigurasikan dalam skrip. Secara opsional, tambahkan info pengguna apa pun yang ingin Anda lewati dari situs web:

 < script >
  window . feedbackfin = { config : { } , ... window . feedbackfin } ;
  window . feedbackfin . config . url = "https://rowy-hooks.run.app/wh/..." ;
  window . feedbackfin . config . user = { name : "..." , email : "..." } ;
</ script >

Atur tombol untuk membuka widget:

 < button data-feedbackfin-button > Feedback </ button >

Menyiapkan URL Webhook

Ini adalah URL untuk mengirimkan umpan balik. Widget akan membuat permintaan pos ke URL ini dengan data umpan balik sebagai badan JSON.

Hasilkan URL WebHook dengan mudah menggunakan platform kode rendah Rowy dan kelola data umpan balik pada spreadsheet kolaboratif-UI. Secara opsional, Anda dapat mengotomatiskan lebih lanjut tentang umpan balik yang masuk dengan editor kode bawaan Rowy (misalnya: memberi tahu tim Slack/Discord, email tindak lanjut dll).

Instruksi video ujung ke ujung di situs web ↗

Opsi

Opsi diatur di objek window.feedbackfin.config :

`url`

URL untuk mengirim umpan balik ke. Widget akan membuat permintaan pos ke URL ini dengan data sebagai badan JSON. Lihat Mengatur URL Webhook di atas.

`user`

Objek yang isinya akan diserahkan sebagai bagian dari formulir. Catatan: feedbackType , message , dan timestamp adalah bidang cadangan dan akan ditimpa oleh nilai formulir.

Khas:

 window . feedbackfin . config . user = {
  name : "..." ,
  email : "..." ,
} ;

`disableErrorAlert`

Secara opsional, menonaktifkan peringatan menampilkan jika tidak ada URL yang diatur atau permintaan gagal. Default: disableErrorAlert: false

Cara kerjanya

Ketika skrip dimuat, ia mencari elemen apa pun dengan atribut data-feedbackfin-button dan membuka widget ketika salah satu elemen tersebut diklik.

 < button data-feedbackfin-button > Feedback </ button >

Objek window.feedbackfin memperlihatkan metode open , close , dan submit , sehingga mereka juga dapat dipanggil secara langsung.

 < button onclick =" window.feedbackfin.open(event) " > Feedback </ button >

Widget menggunakan event.target untuk menghitung posisinya menggunakan UI mengambang.

Kustomisasi

Widget terpasang tepat sebelum tag penutupan </body> saat terbuka dan menghormati font-family halaman Anda. Gaya terpasang tepat sebelum tag <head> pembukaan sehingga kustomisasi Anda diutamakan.

Anda dapat menyesuaikan penampilan widget dengan:

Mengesampingkan variabel CSS.

Misalnya, Anda dapat mengubah warna tombol utama menggunakan:

 : root {
  --feedbackfin-primary-color : # 007aff ;
  --feedbackfin-primary-color-text : # fff ;
}

Mengesampingkan aturan CSS. Nama kelas diawali dengan feedbackfin__ .

Mode gelap

Mode gelap diaktifkan saat itu:

Pengguna mengatur tema sistem mereka menjadi gelap
yaitu @media (prefers-color-scheme: dark) benar, atau
Elemen induk mana pun memiliki atribut data-theme yang nilainya berisi dark .
Contoh: <body data-theme="dark">

Warna mode gelap diatur menggunakan variabel CSS. Anda dapat menimpanya dengan:

 @media ( prefers-color-scheme : dark) {
  : root {
    ...;
  }
}

[ data-theme *= "dark" ] {
  ...;
}

Aksesibilitas

Widget ini dibangun menggunakan elemen formulir HTML standar dengan label yang sesuai.

Fokus terperangkap di dalam widget saat terbuka menggunakan fokus-jebakan. Hati -hati saat bersarang widget ini di dalam elemen lain dengan perangkap fokus.