{"id":13471106,"url":"https://github.com/rowyio/feedbackfin","last_synced_at":"2025-06-12T17:11:03.698Z","repository":{"id":38360543,"uuid":"472978869","full_name":"rowyio/feedbackfin","owner":"rowyio","description":"Open-source widget to collect feedback anywhere on your website. Lightweight and tiny. That’s it.","archived":false,"fork":false,"pushed_at":"2022-12-22T21:00:34.000Z","size":174,"stargazers_count":301,"open_issues_count":9,"forks_count":30,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-31T18:29:36.355Z","etag":null,"topics":["feedback","plugin","webhook","website","widget"],"latest_commit_sha":null,"homepage":"https://feedbackfin.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rowyio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-23T00:09:59.000Z","updated_at":"2025-04-16T22:11:00.000Z","dependencies_parsed_at":"2023-01-30T17:01:08.642Z","dependency_job_id":null,"html_url":"https://github.com/rowyio/feedbackfin","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/rowyio/feedbackfin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowyio%2Ffeedbackfin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowyio%2Ffeedbackfin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowyio%2Ffeedbackfin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowyio%2Ffeedbackfin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rowyio","download_url":"https://codeload.github.com/rowyio/feedbackfin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowyio%2Ffeedbackfin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259509474,"owners_count":22868837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feedback","plugin","webhook","website","widget"],"created_at":"2024-07-31T16:00:39.843Z","updated_at":"2025-06-12T17:11:03.672Z","avatar_url":"https://github.com/rowyio.png","language":"CSS","readme":"# Feedback Fin\n\n**A tiny widget to collect feedback anywhere on your website. That’s it.**\n\n\u003cp\u003e\n    \u003ca target=\"_blank\" rel=\"noopener\" href=\"http://www.feedbackfin.com\"\u003e\u003cb\u003eWebsite\u003c/b\u003e\u003c/a\u003e •\n    \u003ca target=\"_blank\" rel=\"noopener\" href=\"https://discord.gg/fjBugmvzZP\"\u003e\u003cb\u003eDiscord\u003c/b\u003e\u003c/a\u003e • \n    \u003ca target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/rowyio\"\u003e\u003cb\u003eTwitter\u003c/b\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[![npm version](https://badgen.net/npm/v/feedbackfin)](https://www.npmjs.com/package/feedbackfin)\n[![Package size](https://badgen.net/bundlephobia/minzip/feedbackfin)](https://bundlephobia.com/result?p=feedbackfin)\n\n\u003ca href=\"https://feedbackfin.com\" target=\"_blank\" rel=\"noopener\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/27017118/160980505-edf2c161-730d-4ba1-9ae2-2a0a01454954.gif\" width=\"420\" height=\"380\" alt=\"Demo GIF\" /\u003e\n\u003c/a\u003e\n\n[Try the widget\u0026nbsp;\u0026UpperRightArrow;](https://feedbackfin.com)\n\n## Quick Start\n\n1. Load the widget on your page:\n\n   ```html\n   \u003cscript src=\"https://unpkg.com/feedbackfin@^1\" defer\u003e\u003c/script\u003e\n   ```\n\n2. Setup a [webhook URL](#setting-up-a-webhook-url) (read instructions in the next section) and configure that in the script. Optionally, add any [user info](#user) that you want to pass in from the website:\n\n   ```html\n   \u003cscript\u003e\n     window.feedbackfin = { config: {}, ...window.feedbackfin };\n     window.feedbackfin.config.url = \"https://rowy-hooks.run.app/wh/...\";\n     window.feedbackfin.config.user = { name: \"...\", email: \"...\" };\n   \u003c/script\u003e\n   ```\n\n3. Set a button to open the widget:\n   ```html\n   \u003cbutton data-feedbackfin-button\u003eFeedback\u003c/button\u003e\n   ```\n\n## Setting up a webhook URL\n\nThis is the URL to send the feedback to. The widget will make a POST request to\nthis URL with the feedback data as a JSON body.\n\nGenerate 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).\n\nEnd-to-end video instructions on the [website\u0026nbsp;\u0026UpperRightArrow;](https://feedbackfin.com/setup)\n\n## Options\n\nOptions are set in the `window.feedbackfin.config` object:\n\n### `url`\n\nThe URL to send the feedback to. The widget will make a POST request to this URL\nwith the data as a JSON body. See\n[Setting up a webhook URL](#setting-up-a-webhook-url) above.\n\n### `user`\n\nAn object whose contents will be submitted as part of the form. Note:\n`feedbackType`, `message`, and `timestamp` are reserved fields and will be\noverwritten by form values.\n\nTypically:\n\n```js\nwindow.feedbackfin.config.user = {\n  name: \"...\",\n  email: \"...\",\n};\n```\n\n### `disableErrorAlert`\n\nOptionally, disables displaying\n[alerts](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) if no\nURL is set or the request fails. Default: `disableErrorAlert: false`\n\n## How it works\n\nWhen the script is loaded, it looks for any elements with the\n`data-feedbackfin-button` attribute and opens the widget when any of those\nelements are clicked.\n\n```html\n\u003cbutton data-feedbackfin-button\u003eFeedback\u003c/button\u003e\n```\n\nThe `window.feedbackfin` object exposes the `open`, `close`, and `submit`\nmethods, so they can also be called directly.\n\n```html\n\u003cbutton onclick=\"window.feedbackfin.open(event)\"\u003eFeedback\u003c/button\u003e\n```\n\nThe widget uses `event.target` to compute its position using\n[Floating UI](https://floating-ui.com/).\n\n## Customization\n\nThe widget is attached just before the closing `\u003c/body\u003e` tag when it is open and\nrespects your page’s `font-family`. Styles are attached just before the opening\n`\u003chead\u003e` tag so your customizations take precedence.\n\nYou can customize the widget’s appearance by:\n\n- Overriding\n  [the CSS variables](https://github.com/rowyio/feedbackfin/blob/main/src/form.css).\n\n  For example, you can change the primary button color using:\n\n  ```css\n  :root {\n    --feedbackfin-primary-color: #007aff;\n    --feedbackfin-primary-color-text: #fff;\n  }\n  ```\n\n- Overriding\n  [the CSS rules](https://github.com/rowyio/feedbackfin/blob/main/src/form.css).\n  Class names are prefixed with `feedbackfin__`.\n\n## Dark mode\n\nDark mode is activated when either:\n\n- the user sets their system theme to dark  \n  i.e. `@media (prefers-color-scheme: dark)` is true, or\n\n- any parent element has a `data-theme` attribute whose value contains `dark`.  \n  Example: `\u003cbody data-theme=\"dark\"\u003e`\n\nDark mode colors are set using CSS variables. You can override them with:\n\n```css\n@media (prefers-color-scheme: dark) {\n  :root {\n    ...;\n  }\n}\n\n[data-theme*=\"dark\"] {\n  ...;\n}\n```\n\n## Accessibility\n\nThis widget is built using standard HTML form elements with the appropriate\nlabels.\n\nFocus is trapped within the widget when it is open using\n[focus-trap](https://github.com/focus-trap/focus-trap). Be careful when nesting\nthis widget inside another element with a focus trap.\n\n## Contributing\n\nContribute to Feedback Fin with issues and pull requests in\n[the GitHub repo](https://github.com/rowyio/feedbackfin).\n\n## Support\n\n- Join a community of developers on [Discord](https://discord.gg/fjBugmvzZP)\n- Follow us on [Twitter](https://twitter.com/rowyio) and help\n  [spread the word](https://twitter.com/intent/tweet?text=Came%20across%20this%20cute,%20tiny%20widget%20to%20collect%20feedback%20anywhere%20on%20your%20website.%0a%0aOpen-source,%20free,%20and%20fully%20customizable.%0a%0ahttp://www.feedbackfin.com/)\n  🙏\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frowyio%2Ffeedbackfin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frowyio%2Ffeedbackfin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frowyio%2Ffeedbackfin/lists"}