feedbackfin
v1.0.3
Un petit widget pour recueillir des commentaires n'importe où sur votre site Web. C'est ça.
Site Web • Discord • Twitter
Essayez le widget ↗
Chargez le widget sur votre page:
< script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >Configurez une URL WebHook (lecture des instructions dans la section suivante) et configurez-le dans le script. Ajout des informations utilisateur que vous souhaitez transmettre sur le site Web:
< script >
window . feedbackfin = { config : { } , ... window . feedbackfin } ;
window . feedbackfin . config . url = "https://rowy-hooks.run.app/wh/..." ;
window . feedbackfin . config . user = { name : "..." , email : "..." } ;
</ script >Définissez un bouton pour ouvrir le widget:
< button data-feedbackfin-button > Feedback </ button > Il s'agit de l'URL pour envoyer les commentaires. Le widget fera une demande de poste à cette URL avec les données de rétroaction en tant que corps JSON.
Générez facilement une URL WebHook à l'aide de la plate-forme à faible code de Rowy et gérez les données de rétroaction sur une feuille de calcul collaborative-UI. Facultativement, vous pouvez automatiser davantage sur les commentaires entrants avec le rédacteur de code intégré de Rowy (par exemple: notifier sur l'équipe Slack / Discord, suivi des e-mails, etc.).
Instructions vidéo de bout en bout sur le site Web ↗
Les options sont définies dans la window.feedbackfin.config objet:
urlL'URL pour envoyer les commentaires. Le widget fera une demande de poste à cette URL avec les données en tant que corps JSON. Voir la configuration d'une URL de webhook ci-dessus.
user Un objet dont le contenu sera soumis dans le cadre du formulaire. Remarque: feedbackType , message et timestamp sont des champs réservés et seront écrasés par les valeurs de formulaire.
Typiquement:
window . feedbackfin . config . user = {
name : "..." ,
email : "..." ,
} ;disableErrorAlert Facultativement, désactive l'affichage des alertes si aucune URL n'est définie ou si la demande échoue. Par défaut: disableErrorAlert: false
Lorsque le script est chargé, il recherche tous les éléments avec l'attribut data-feedbackfin-button et ouvre le widget lorsque l'un de ces éléments est cliqué.
< button data-feedbackfin-button > Feedback </ button > L'objet window.feedbackfin expose les méthodes open , close et submit , afin qu'elles puissent également être appelées directement.
< button onclick =" window.feedbackfin.open(event) " > Feedback </ button > Le widget utilise event.target pour calculer sa position à l'aide de l'interface utilisateur flottante.
Le widget est attaché juste avant la balise de fermeture </body> lorsqu'elle est ouverte et respecte font-family de votre page. Les styles sont attachés juste avant la balise d'ouverture <head> afin que vos personnalisations aient la priorité.
Vous pouvez personnaliser l'apparence du widget en:
Remplir les variables CSS.
Par exemple, vous pouvez modifier la couleur du bouton primaire en utilisant:
: root {
--feedbackfin-primary-color : # 007aff ;
--feedbackfin-primary-color-text : # fff ;
} Remplir les règles CSS. Les noms de classe sont préfixés avec feedbackfin__ .
Le mode sombre est activé lorsque soit:
L'utilisateur définit son thème système dans l'obscurité
c'est-à-dire @media (prefers-color-scheme: dark) est vrai, ou
Tout élément parent a un attribut de data-theme dont la valeur contient dark .
Exemple: <body data-theme="dark">
Les couleurs en mode foncé sont définies à l'aide de variables CSS. Vous pouvez les remplacer avec:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}Ce widget est construit en utilisant des éléments de formulaire HTML standard avec les étiquettes appropriées.
La mise au point est piégée dans le widget lorsqu'elle est ouverte à l'aide de Focus-Trap. Soyez prudent lorsque vous nichez ce widget à l'intérieur d'un autre élément avec un piège de mise au point.
Contribuez à Feedback Fin avec des problèmes et tirez les demandes dans le dépôt GitHub.
