{"id":21721039,"url":"https://github.com/BetaHuhn/feedback-js","last_synced_at":"2025-07-18T17:30:36.222Z","repository":{"id":38211329,"uuid":"305488475","full_name":"BetaHuhn/feedback-js","owner":"BetaHuhn","description":"📝Simple modern feedback modal for any website","archived":false,"fork":false,"pushed_at":"2024-02-07T19:53:23.000Z","size":650,"stargazers_count":100,"open_issues_count":7,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-09T10:17:05.237Z","etag":null,"topics":["feedback","feedback-modal","feedback-module","javascript","javascript-library","npm","npm-package"],"latest_commit_sha":null,"homepage":"https://codepen.io/BetaHuhn/pen/MWebeXp","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BetaHuhn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"betahuhn","github":"betahuhn"}},"created_at":"2020-10-19T19:12:08.000Z","updated_at":"2025-06-30T12:26:42.000Z","dependencies_parsed_at":"2023-10-17T06:20:47.756Z","dependency_job_id":"3158cc05-1e47-4b63-86ea-b2dce5c0231f","html_url":"https://github.com/BetaHuhn/feedback-js","commit_stats":{"total_commits":196,"total_committers":6,"mean_commits":"32.666666666666664","dds":0.5612244897959184,"last_synced_commit":"bf343c1b85e83e78b6eaed4f523c19156914381b"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"purl":"pkg:github/BetaHuhn/feedback-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaHuhn%2Ffeedback-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaHuhn%2Ffeedback-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaHuhn%2Ffeedback-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaHuhn%2Ffeedback-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BetaHuhn","download_url":"https://codeload.github.com/BetaHuhn/feedback-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaHuhn%2Ffeedback-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265801581,"owners_count":23830438,"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","feedback-modal","feedback-module","javascript","javascript-library","npm","npm-package"],"created_at":"2024-11-26T02:02:13.389Z","updated_at":"2025-07-18T17:30:35.879Z","avatar_url":"https://github.com/BetaHuhn.png","language":"JavaScript","funding_links":["https://ko-fi.com/betahuhn","https://github.com/sponsors/betahuhn","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=394RTSBEEEFEE"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# feedback-js\n\n[![Build](https://github.com/BetaHuhn/feedback-js/workflows/Build/badge.svg)](https://github.com/BetaHuhn/feedback-js/actions?query=workflow%3ABuild) [![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/BetaHuhn/feedback-js/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/@betahuhn/feedback-js)](https://www.npmjs.com/package/@betahuhn/feedback-js) [![npm bundle size](https://img.badgesize.io/betahuhn/feedback-js/master/dist/feedback-js.min.js?compression=gzip)](https://github.com/BetaHuhn/feedback-js)\n\nSimple feedback modal for any website\n\n![preview](https://cdn.mxis.ch/assets/feedback-js/preview.gif)\n\n[🔮 Live Demo](https://codepen.io/BetaHuhn/pen/MWebeXp)\n\u003cbr/\u003e\n\n\u003c/div\u003e\n\n## ⚡ Features\n\n- Easy to integrate with any site (via [script tag](#script-tag) or [NPM](#npm))\n- Simple and modern design\n- Customize feedback types and text\n- Works with any backend (self-hosted or form providers)\n- Use the default feedback button or trigger the modal from any HTML element\n\n## 🚀 Get started\n\n### Via CDN\n\nAdd this to your HTML page:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@betahuhn/feedback-js/dist/feedback-js.min.js\" data-feedback-endpoint=\"https://your-custom-endpoint\"\u003e\u003c/script\u003e\n```\n\n### Via NPM\n\nInstall [feedback-js](https://github.com/BetaHuhn/feedback-js) using NPM:\n\n```sh\nnpm install @betahuhn/feedback-js\n```\n\nThen add the following JavaScript code:\n\n```javascript\nimport Feedback from '@betahuhn/feedback-js'\n\nnew Feedback({ endpoint: 'https://example.com/feedback' }).renderButton()\n```\n\nBy default [feedback-js](https://github.com/BetaHuhn/feedback-js) will add a feedback button to the bottom right corner of your page with the default colors and text. This can be configured using the [options](https://github.com/BetaHuhn/feedback-js#options) object.\n\n## 📚 Setup\n\nThere are multiple ways to use [feedback-js](https://github.com/BetaHuhn/feedback-js). The easiest is to include the provided script tag in your HTML file and specify the form endpoint with `data-feedback-endpoint`:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@betahuhn/feedback-js/dist/feedback-js.min.js\" data-feedback-endpoint=\"https://your-custom-endpoint\"\u003e\u003c/script\u003e\n```\n\nIf you want to customize [feedback-js](https://github.com/BetaHuhn/feedback-js) further, you can use the `data-feedback-opts` attribute:\n\n```html\n\u003cscript data-feedback-opts='{ \"endpoint\": \"http://172.21.52.196:6600/form/feedback\", \"id\": \"example\", \"emailField\": true }'\u003e\u003c/script\u003e\n```\n\nYou can add the attributes to any HTML element, not just the `script` tag e.g. `\u003cdiv data-feedback-opts=\"\"\u003e\u003c/div\u003e`. \n\nYou can also set it up manually with JavaScript:\n\n```javascript\nimport Feedback from '@betahuhn/feedback-js'\n\nconst options = {\n    endpoint: 'https://example.com/feedback',\n    id: 'example',\n    emailField: true\n}\n\nnew Feedback(options).renderButton()\n```\n\nThey both achieve the same result.\n\n### Feedback Button\n\nBy default if you specify a `data-feedback-endpoint` or `data-feedback-opts` attribute or call `.renderButton()` the default feedback button will be rendered. \n\nYou can also trigger the modal from any element by adding `data-feedback-trigger` to it:\n\n```html\n\u003cbutton data-feedback-trigger\u003eGive Feedback\u003c/button\u003e\n```\n\nThis will open the modal and the user can give his feedback.\n\n### Backend\n\nOnce the user submits the form, the data will be sent to the specified endpoint. \n\nYou will have to handle the submission on the backend yourself. [feedback-js](https://github.com/BetaHuhn/feedback-js) will make a POST request to your specified endpoint with the following body:\n\n```json\n{\n    \"id\": \"example\",\n    \"email\": \"hello@mxis.ch\",\n    \"feedbackType\": \"issue\",\n    \"url\": \"https://example.com\",\n    \"message\": \"When I click x nothing happens.\"\n}\n```\n\n\u003cdetails\u003e\n \u003csummary\u003eSee Node.js example\u003c/summary\u003e\n\t\n```js\nconst express = require('express')\nconst app = express()\nconst port = 3000\n\napp.post('/feedback', async (req, res) =\u003e {\n\tconst { id, feedbackType, message, email, url } = req.body\n\n\tconsole.log(`New ${ feedbackType } feedback for form ${ id } from user ${ email } on page ${ url }: ${ message }`)\n\t// do something with feedback\n\n\tres.send('ok')\n})\n\napp.listen(port, () =\u003e {\n\tconsole.log(`Listening at http://localhost:${ port }`)\n})\n```\n\t\n\u003c/details\u003e\n\n## ⚙️ Options\n\nYou can customize [feedback-js](https://github.com/BetaHuhn/feedback-js) by passing a options object to `new Feedback()` or use the `data-feedback-opts` attribute.\n\n\u003cdetails\u003e\n\u003csummary\u003eAll available options:\u003c/summary\u003e\n\n```js\nconst options = {\n    id: 'feedback', // id to identify the form on the backend\n    endpoint: 'https://example.com/feedback', // enpoint of your backend to handle the submission\n    emailField: true, // show email input field, default: false\n    events: false, // Emit feedback-submit event instead of sending data to endpoint\n    forceShowButton: false, // Show the default button even if you use `data-feedback-trigger`\n    types: { // Feedback types\n        general: {\n            text: 'General Feedback',\n            icon: '😁'\n        },\n        idea: {\n            text: 'I have an idea',\n            icon: '💡'\n        },\n        bug: {\n            text: 'I found an issue',\n            icon: '🐞'\n        }\n    },\n    btnTitle: 'Feedback', // title of button\n    title: 'Company Feedback', // text at the top\n    inputPlaceholder: 'Your feedback goes here!',\n    emailPlaceholder: 'Email address (optional)',\n    submitText: 'Submit', // text for submit button\n\tbackText: 'Back', // text for back button\n    contactText: 'Or send an email!', // text for other contact option\n    contactLink: 'mailto:hello@mxis.ch', // link for other contact option\n    typeMessage: 'What feedback do you have?', // message for selecting feedback type\n    success: 'Thanks! 👊', // message displayed on successfull submission\n    failedTitle: 'Oops, an error ocurred!', // title displayed on error\n    failedMessage: 'Please try again. If this keeps happening, try to send an email instead.', // default error message if backend doesn't return one\n    position: 'right', // position of button left/right\n    primary: 'rgb(53, 222, 118)', // primary color\n    background: '#fff', // background color\n    color: '#000' // font color\n}\n\nconst feedback = new Feedback(options)\nfeedback.renderButton()\n```\n\n\u003c/details\u003e\n\n## Email field\n\nBy default the email field will be hidden, you can enable it with the `emailField` option.\n\n### Custom submission method\n\nIf you want to handle the form submission yourself, you can enable `events` and listen for the `feedback-submit` event:\n\n```js\nimport Feedback from '@betahuhn/feedback-js'\n\nconst options = {\n    events: true\n}\n\nnew Feedback(options).renderButton()\n\nwindow.addEventListener('feedback-submit', (event) =\u003e {\n    console.log(event.detail) // will contain the feedback data which would have been sent to the endpoint\n})\n```\n\n### Custom feedback types\n\nBy default there are 3 feedback types, general, idea and bug. You can modify their text/icons or even add your own with the `types` option:\n\n```js\nimport Feedback from '@betahuhn/feedback-js'\n\nconst options = {\n    endpoint: 'https://example.com/feedback',\n    types: {\n        general: {\n            text: 'General Feedback',\n            icon: '⚠️'\n        },\n        idea: {\n            text: 'I have an idea',\n            icon: '💡'\n        },\n        love: {\n            text: 'Send love',\n            icon: '💖'\n        }\n    }\n}\n\nnew Feedback(options).renderButton()\n```\n\n## 💻 Development\n\nIssues and PRs are very welcome!\n\nThe actual source code of this library is in the `feedback.js` file in the `src` folder.\n\n- run `yarn lint` or `npm run lint` to run eslint.\n- run `yarn watch` or `npm run watch` to watch for changes and build to the `dist` folder.\n- run `yarn build` or `npm run build` to produce a production version of [feedback-js](https://github.com/BetaHuhn/feedback-js) in the `dist` folder.\n\n## ❔ About\n\nThis library was developed by me ([@betahuhn](https://github.com/BetaHuhn)) in my free time. If you want to support me:\n\n[![Donate via PayPal](https://img.shields.io/badge/paypal-donate-009cde.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=394RTSBEEEFEE)\n\n### Credits\n\nThe design of the feedback form was inspired by [@kangabru's](https://github.com/kangabru/) feedback form on the [Panda Snap](https://pandasnap.io/) dashboard.\n\n### License\n\nCopyright 2021 Maximilian Schiller\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetaHuhn%2Ffeedback-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBetaHuhn%2Ffeedback-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetaHuhn%2Ffeedback-js/lists"}