unfeed
v1.0.12
Published
<h1 align=center>Unfeed</h1> <p align=center>A fork of <a href="https://github.com/rowyio/feedbackfin">Feedback Fin</a> with more customization. Refer to <a href="https://github.com/wzulfikar/unfeed/pull/1">PR #1</a> (and subsequent PRs) to see what chang
Downloads
809
Readme
A tiny widget to collect feedback anywhere on your website. That’s it.
Quick Start
Load the widget on your page:
<script src="https://unpkg.com/unfeed@^1" defer></script>
Setup a webhook URL (read instructions in the next section) and configure that in the script. Optionally, add any user info that you want to pass in from the website:
<script> window.unfeed = { config: {}, ...window.unfeed }; window.unfeed.config.url = "https://rowy-hooks.run.app/wh/..."; window.unfeed.config.user = { name: "...", email: "..." }; </script>
Set a button to open the widget:
<button data-unfeed-button>Feedback</button>
Setting up a webhook URL
This is the URL to send the feedback to. The widget will make a POST request to this 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 the website ↗
Options
Options are set in the window.unfeed.config
object:
url
The URL to send the feedback to. The widget will make a POST request to this URL with the data as a JSON body. See Setting up a webhook URL above.
user
An object whose contents will be submitted as part of the form. Note:
feedbackType
, message
, and timestamp
are reserved fields and will be
overwritten by form values.
Typically:
window.unfeed.config.user = {
name: "...",
email: "...",
};
disableErrorAlert
Optionally, disables displaying
alerts if no
URL is set or the request fails. Default: disableErrorAlert: false
How it works
When the script is loaded, it looks for any elements with the
data-unfeed-button
attribute and opens the widget when any of those elements
are clicked.
<button data-unfeed-button>Feedback</button>
The window.unfeed
object exposes the open
, close
, and submit
methods, so
they can also be called directly.
<button onclick="window.unfeed.open(event)">Feedback</button>
The widget uses event.target
to compute its position using
Floating UI.
Customization
The widget is attached just before the closing </body>
tag when it is open and
respects your page’s font-family
. Styles are attached just before the opening
<head>
tag so your customizations take precedence.
You can customize the widget’s appearance by:
Overriding the CSS variables.
For example, you can change the primary button color using:
:root { --unfeed-primary-color: #007aff; --unfeed-primary-color-text: #fff; }
Overriding the CSS rules. Class names are prefixed with
unfeed__
.
Dark mode
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-theme
attribute 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"] {
...;
}
Accessibility
This widget is built using standard HTML form elements with the appropriate labels.
Focus is trapped within the widget when it is open using focus-trap. Be careful when nesting this widget inside another element with a focus trap.
Contributing
Contribute to Feedback Fin with issues and pull requests in the GitHub repo.
Support
- Join a community of developers on Discord
- Follow us on Twitter and help spread the word 🙏