From 6f8aa32c508d94fb936a840e6cdd9721f2804d35 Mon Sep 17 00:00:00 2001 From: Dan Webb Date: Fri, 26 Jan 2024 07:26:41 +0000 Subject: [PATCH] docs: readme updates --- README.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index eb61f40..fdcbd82 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ npm install @etchteam/storybook-addon-marker --save-dev ## Configuration +### Storybook + Create a file called `main.js` in your `.storybook` config folder. Add the following content to it: @@ -25,16 +27,15 @@ module.exports = { Then create a file called `preview.js` in the same folder and add your [Marker destination](https://marker.io/blog/integrate-web-app-browser-sdk) as a [parameter](https://storybook.js.org/docs/react/writing-stories/parameters) as well as the `withMarker` [decorator](https://storybook.js.org/docs/react/writing-stories/decorators): ```js -import { addDecorator } from '@storybook/react'; import withMarker from '@etchteam/storybook-addon-marker/with-marker'; -addDecorator(withMarker); - export const parameters = { marker: { destination: 'abcd1234567890', // <- Your unique destination ID } } + +export const decorators = [withMarker]; ``` To set the type of capture to trigger, the optional `mode` property can be added to the marker options: @@ -64,6 +65,12 @@ export default { }; ``` -Where to find your Marker destination and other Marker configuration options can be found on the [Marker SDK documentation](https://marker.io/blog/integrate-web-app-browser-sdk). +### Marker + +Your Marker destination and other Marker configuration options can be found on the [Marker SDK documentation](https://marker.io/blog/integrate-web-app-browser-sdk). + +The Widget > Button > Button visibility setting should be set to "hidden" as this addon adds a custom feedback button to the Storybook toolbar. + +--- Made with ☕ at [Etch](https://etch.co) \ No newline at end of file