microfeedback-button
v1.1.0
Published
A simple feedback button/widget. Use together with a microfeedback backend.
Downloads
288
Maintainers
Readme
microfeedback-button
A simple widget for capturing user feedback. Use together with a microfeedback backend such as microfeedback-github.
Uses sweetalert2 under the hood to display responsive, customizable, and accessible input dialogs.
Documentation (with demos)
https://microfeedback.js.org/ui-components/microfeedback-button/
API
microfeedback([elem], [options])
elem
: TheHTMLElement
to bind to. If not given, the default button will be rendered.options
url
: URL for your microfeedback backend. Ifnull
, feedback will be logged to the console. May also be a function that receivesbtn
andresult
(the user input) as arguments and returns a URL. Default:null
buttonText
: Text to display in the default button. Default:'Feedback'
buttonAriaLabel
:aria-label
for the default button. Default:'Send feedback'
title
: Title to display in the dialog. Default:'Send feedback'
placeholder
: Placeholder text in the dialog input. Default:'Describe your issue or share your ideas'
backgroundColor
: Background color for the default button. Default:'#3085d6'
color
: Color for the default button text. Default:'#fff'
animation
: Enable animations. Default:true
showDialog
: Function that displays a sweetalert2 dialog. Returns aPromise
that resolves to the input result. Usereturn btn.alert(...)
to display the dialog.getPayload
: Function that receivesbtn
(theMicroFeedbackButton
instance) and input result and returns the request payload to send to the microfeedback backend.preSend
: Function that receivesbtn
(theMicroFeedbackButton
instance) and input result. This is called before sending the request to the microfeedback backend. Useful for displaying a "Thank you" message withreturn btn.alert(...)
.optimistic
: Iftrue
, display success message immediately after user submits input (don't wait for request to finish). Iffalse
, wait until request finishes to show message (use together withonSuccess
to customize message). Default:true
showSuccessDialog
: Function that receivesbtn
(theMicroFeedbackButton
instance) and input result and displays a dialog usingreturn btn.alert(...)
.onSuccess
: Function called when request succeeds. Receivesbtn
(theMicroFeedbackButton
instance) and input result. By default, callsoptions.showSuccessDialog(btn, input)
ifoptimistic
isfalse
, otherwise noop.onFailure
: Function called when request fails. Receivesbtn
(theMicroFeedbackButton
instance). Default:noop
Additionally, any valid sweetalert2 option may be passed to configure the input dialog.
Methods
btn.alert(...args)
Display a sweetalert2 dialog. This is equivalent to the swal
function
from sweetalert2.
Developing
npm install
- To run tests:
npm test
- To run tests in watch mode:
npm test -- --watch
- To run the example:
npm run dev
License
MIT Licensed.