{"id":19979236,"url":"https://github.com/bharathvaj-ganesan/shotify","last_synced_at":"2026-05-06T19:41:14.282Z","repository":{"id":40733044,"uuid":"213133615","full_name":"bharathvaj-ganesan/shotify","owner":"bharathvaj-ganesan","description":"This library helps you build a feedback form similar to Google.","archived":false,"fork":false,"pushed_at":"2022-12-10T05:00:20.000Z","size":868,"stargazers_count":2,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T08:21:37.147Z","etag":null,"topics":["feedback-screenshot","hacktoberfest","html2canvas","javascript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bharathvaj-ganesan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-06T08:32:21.000Z","updated_at":"2024-04-25T08:21:37.148Z","dependencies_parsed_at":"2023-01-26T02:31:59.436Z","dependency_job_id":null,"html_url":"https://github.com/bharathvaj-ganesan/shotify","commit_stats":null,"previous_names":["bharathvaj1995/shotify"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bharathvaj-ganesan%2Fshotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bharathvaj-ganesan%2Fshotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bharathvaj-ganesan%2Fshotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bharathvaj-ganesan%2Fshotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bharathvaj-ganesan","download_url":"https://codeload.github.com/bharathvaj-ganesan/shotify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241412718,"owners_count":19958973,"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-screenshot","hacktoberfest","html2canvas","javascript"],"created_at":"2024-11-13T03:37:16.476Z","updated_at":"2025-11-25T20:02:12.125Z","avatar_url":"https://github.com/bharathvaj-ganesan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shotify\n\nThis library helps you build a feedback form similar to [Google](https://www.google.com/tools/feedback/intl/en/learnmore.html). \n\n## Working\n\nThis library uses [html2canvas](https://html2canvas.hertzen.com/) built by [Niklas von Hertzen himself. The entire screenshot is created on the client side using vanilla Javascript.\nThe rendered image may not be 100% accurate but should be fine for sending feedback.\n\n## Installation\n\n\u003e Supports almost all ECMAScript 5 compliant browsers.\n\n### CDN\n\n```js\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/shotify/lib/index.min.js\"\u003e\u003c/script\u003e\n```\n\n\n### NPM\n\n```js\n\nnpm install shotify\n\n// or\n\nyarn add shotify\n\n```\n\n## API\n\n### Usage\n\n```js\n  import Shotify from 'shotify';\n\n  const shotify = new Shotify({\n    previewContainer: this.$refs.previewContainer as HTMLElement\n  });\n  shotify.init();\n\n```\n\n### Options\n\nBelow are the options you can pass during booting up of Shotify.\n\n**Option**|**Type**|**Required**|**Description**\n-----|-----|-----|-----\npreviewContainer|HTMLDivElement| Yes | HTML Div element that act has placeholder for preview canvas \ndialogContainer|HTMLElement| No | Modal container that holds your feedback form\nupdate|Function | No | Callback event listeners\nclasses|Object | No | Class names to be applied for elements controlled by shotify\nhtml2canvasOptions| Object | No | html2canvas library options\n\n\n#### Classes\n\nBelow are the classes that points maps to the UI elements controlled by Shotify\n\n  * **highlight** - Highlighted sections\n  * **blackout** - Blackouted sections\n  * **toolbar** - Wrapper class for toolbar containing highlight and blackout options\n  * **toolbar_action** - Wrapper class for actions used inside toolbar\n  * **toolbar_action_highlight** - Highlight toolbar action class\n  * **toolbar_action_blackout** - Blackout toolbar action class\n  * **toolbar_action_done** - Done toolbar action class\n  * **grippy** - Class used for grippy section of the toolbar\n  * **grippy_icon** - Grippy icon for the toolbar\n  * **remove_action** - Wrapper class for remove action\n  * **remove_icon** - Class for remove icon of the user marked sections\n  * **alert** - Alert Info class used for showing toolbar alert message\n\n\n#### Events\n\nBelow are the events that are emitted during the life cycle of the Shotify\n\n* **processing**\n  - Shotify is preparing the feedback screenshot\n  - You can use this event to show loaders as this may take a while. Depends on the complexity of the page\n* **drawing**\n  - User has selected to highlight/blackout areas of the page\n  - You can use this event to hide the feedback modal for example.\n* **processed**\n  - Feedback image is ready to be used.\n  - You can use the payload image data being passed to be sent to the server.\n\n### Methods\n\n* init()\n\n  Mounts the Shotify. Shotify will create DOMs needed to capture the user feedback screenshot.\n\n* destroy()\n\n  Will destroy Shotify instance. Though modern browsers will remove listeners attached to deleted DOMs it is a best practice to call this method when your feedback component is being destroyed so that there is no memory leak\n\n\n## TypeScript\n\nShotify includes [Typescript](http://typescriptlang.org/) definitions.\n\n## Credits\n\nInspired by [Niklas von Hertzen](https://experiments.hertzen.com/jsfeedback/)\n\n\n## License\n\nMIT © [Bharathvaj Ganesan](https://github.com/bharathvaj1995)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbharathvaj-ganesan%2Fshotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbharathvaj-ganesan%2Fshotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbharathvaj-ganesan%2Fshotify/lists"}