{"id":18302990,"url":"https://github.com/etchteam/storybook-addon-marker","last_synced_at":"2025-04-05T14:31:47.852Z","repository":{"id":57112101,"uuid":"386617654","full_name":"etchteam/storybook-addon-marker","owner":"etchteam","description":"A Storybook Addon to add a Marker.io feedback button in Storybook","archived":false,"fork":false,"pushed_at":"2025-01-15T19:05:40.000Z","size":1476,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-20T12:16:24.580Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/etchteam.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2021-07-16T11:45:40.000Z","updated_at":"2025-01-15T19:05:41.000Z","dependencies_parsed_at":"2024-02-08T18:45:10.912Z","dependency_job_id":"7a5e2c2f-b9cc-4678-8bdb-04a9e0614248","html_url":"https://github.com/etchteam/storybook-addon-marker","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etchteam","download_url":"https://codeload.github.com/etchteam/storybook-addon-marker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247352655,"owners_count":20925309,"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":[],"created_at":"2024-11-05T15:23:33.882Z","updated_at":"2025-04-05T14:31:47.843Z","avatar_url":"https://github.com/etchteam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Marker\n\nA Storybook Addon to add a [Marker.io](https://marker.io/) feedback button in [Storybook](https://storybook.js.org).\n\n![React Storybook Screenshot](https://raw.githubusercontent.com/etchteam/storybook-addon-marker/master/screenshot.png)\n\n## Installation\n\n```sh\nnpm install @etchteam/storybook-addon-marker --save-dev\n```\n\n## Configuring Storybook\n\nCreate a file called `main.js` in your `.storybook` config folder.\n\nAdd the following content to it:\n\n```js\nexport default {\n  addons: ['@etchteam/storybook-addon-marker']\n}\n```\n\nThen create a file called `preview.js` in the same folder and add your [Marker project ID](https://marker.io/blog/integrate-web-app-browser-sdk) in the [initalGlobals](https://storybook.js.org/docs/essentials/toolbars-and-globals).\n\n```js\nexport default {\n  initialGlobals: {\n    marker: {\n      project: 'abcd1234567890', // Your unique project ID\n    },\n  },\n}\n```\n\nOnly `project` is required, the [rest of the marker widget params](https://github.com/marker-io/browser-sdk/blob/b5b3b9b19c7525be7dfa3f92b745f74f8e305303/src/index.ts#L7) are accepted and will be passed down to [the `loadWidget` method](https://github.com/marker-io/browser-sdk?tab=readme-ov-file#method-1-passing-custom-metadata-while-loading-your-widget).\n\nAdditionally, the `mode` option of [the browser SDK `capture` method](https://github.com/marker-io/browser-sdk?tab=readme-ov-file#widgetcapturemode) can be added to this config:\n\n```js\nexport default {\n  initialGlobals: {\n    marker: {\n      project: 'abcd1234567890', // \u003c- Your unique project ID\n      mode: 'fullscreen', // fullscreen | advanced\n    },\n  },\n}\n```\n\n## Configuring Marker\n\nGuidance on how to locate your Marker project and other Marker configuration options can be found on the [Marker website](https://help.marker.io/en/collections/3646812-configuration).\n\n### Hiding the Marker widget button\n\nThis addon places a feedback button in the Storybook toolbar and automatically hides the default Marker button.\n\nIf you're finding the duplicate button still appears, there is a Marker setting under Widget \u003e Button \u003e Button visibility that can be set to \"hidden\".\n\n### Screenshot rendering\n\nIf screenshots aren’t rendering correctly check [Markers tips and limitations](https://help.marker.io/en/articles/6282853-widget-screenshot-tips-limitations#h_96fa6c657e).\n\n---\n\nMade with ☕ at [Etch](https://etch.co)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fstorybook-addon-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetchteam%2Fstorybook-addon-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fstorybook-addon-marker/lists"}