https://github.com/etchteam/storybook-addon-marker
A Storybook Addon to add a Marker.io feedback button in Storybook
https://github.com/etchteam/storybook-addon-marker
Last synced: about 1 year ago
JSON representation
A Storybook Addon to add a Marker.io feedback button in Storybook
- Host: GitHub
- URL: https://github.com/etchteam/storybook-addon-marker
- Owner: etchteam
- License: mit
- Created: 2021-07-16T11:45:40.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-15T19:05:40.000Z (over 1 year ago)
- Last Synced: 2025-03-20T12:16:24.580Z (over 1 year ago)
- Language: JavaScript
- Size: 1.41 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon Marker
A Storybook Addon to add a [Marker.io](https://marker.io/) feedback button in [Storybook](https://storybook.js.org).
## Installation
```sh
npm install @etchteam/storybook-addon-marker --save-dev
```
## Configuring Storybook
Create a file called `main.js` in your `.storybook` config folder.
Add the following content to it:
```js
export default {
addons: ['@etchteam/storybook-addon-marker']
}
```
Then 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).
```js
export default {
initialGlobals: {
marker: {
project: 'abcd1234567890', // Your unique project ID
},
},
}
```
Only `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).
Additionally, 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:
```js
export default {
initialGlobals: {
marker: {
project: 'abcd1234567890', // <- Your unique project ID
mode: 'fullscreen', // fullscreen | advanced
},
},
}
```
## Configuring Marker
Guidance 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).
### Hiding the Marker widget button
This addon places a feedback button in the Storybook toolbar and automatically hides the default Marker button.
If you're finding the duplicate button still appears, there is a Marker setting under Widget > Button > Button visibility that can be set to "hidden".
### Screenshot rendering
If screenshots aren’t rendering correctly check [Markers tips and limitations](https://help.marker.io/en/articles/6282853-widget-screenshot-tips-limitations#h_96fa6c657e).
---
Made with ☕ at [Etch](https://etch.co)