- Notifications
You must be signed in to change notification settings - Fork30
Open-source widget to collect feedback anywhere on your website. Lightweight and tiny. That’s it.
License
rowyio/feedbackfin
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A tiny widget to collect feedback anywhere on your website. That’s it.
Load the widget on your page:
<scriptsrc="https://unpkg.com/feedbackfin@^1"defer></script>
Setup awebhook URL (read instructions in the next section) and configure that in the script. Optionally, add anyuser info that you want to pass in from the website:
<script>window.feedbackfin={config:{}, ...window.feedbackfin};window.feedbackfin.config.url="https://rowy-hooks.run.app/wh/...";window.feedbackfin.config.user={name:"...",email:"..."};</script>
Set a button to open the widget:
<buttondata-feedbackfin-button>Feedback</button>
This is the URL to send the feedback to. The widget will make a POST request tothis URL with the feedback data as a JSON body.
Generate a webhook URL easily using Rowy's low-code platform and manage feedback data on a collaborative spreadsheet-UI. Optionally, you can further automate on incoming feedback with Rowy's built-in code-editor (eg: notify on team slack/discord, email follow up etc).
End-to-end video instructions on thewebsite ↗
Options are set in thewindow.feedbackfin.config object:
The URL to send the feedback to. The widget will make a POST request to this URLwith the data as a JSON body. SeeSetting up a webhook URL above.
An object whose contents will be submitted as part of the form. Note:feedbackType,message, andtimestamp are reserved fields and will beoverwritten by form values.
Typically:
window.feedbackfin.config.user={name:"...",email:"...",};
Optionally, disables displayingalerts if noURL is set or the request fails. Default:disableErrorAlert: false
When the script is loaded, it looks for any elements with thedata-feedbackfin-button attribute and opens the widget when any of thoseelements are clicked.
<buttondata-feedbackfin-button>Feedback</button>
Thewindow.feedbackfin object exposes theopen,close, andsubmitmethods, so they can also be called directly.
<buttononclick="window.feedbackfin.open(event)">Feedback</button>
The widget usesevent.target to compute its position usingFloating UI.
The widget is attached just before the closing</body> tag when it is open andrespects your page’sfont-family. Styles are attached just before the opening<head> tag so your customizations take precedence.
You can customize the widget’s appearance by:
Overridingthe CSS variables.
For example, you can change the primary button color using:
:root {--feedbackfin-primary-color:#007aff;--feedbackfin-primary-color-text:#fff;}
Overridingthe CSS rules.Class names are prefixed with
feedbackfin__.
Dark mode is activated when either:
the user sets their system theme to dark
i.e.@media (prefers-color-scheme: dark)is true, orany parent element has a
data-themeattribute whose value containsdark.
Example:<body data-theme="dark">
Dark mode colors are set using CSS variables. You can override them with:
@media (prefers-color-scheme: dark) {:root { ...; }}[data-theme*="dark"] { ...;}
This widget is built using standard HTML form elements with the appropriatelabels.
Focus is trapped within the widget when it is open usingfocus-trap. Be careful when nestingthis widget inside another element with a focus trap.
Contribute to Feedback Fin with issues and pull requests inthe GitHub repo.
- Join a community of developers onDiscord
- Follow us onTwitter and helpspread the word🙏
About
Open-source widget to collect feedback anywhere on your website. Lightweight and tiny. That’s it.