- 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.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.