New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,670
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Bugherd
Add a Bugherd feedback button to the storybook UI
npm install @etchteam/storybook-addon-bugherd
Last updated almost 2 years ago
3
Downloads per week
Readme View on GitHub

Storybook Addon Bugherd

Storybook Status Addon can be used to add a Bugherd feedback button in Storybook.

React Storybook Screenshot

Installation

npm install @etchteam/storybook-addon-bugherd --save-dev

Configuration

Create a file called main.js in your storybook config.

Add the following content to it:

module.exports = {
  addons: ['@etchteam/storybook-addon-bugherd/register']
}

Next, add a file called preview-head.html in your storybook config folder and add this bugherd script to it.

<script>
  var BugHerdConfig = {
    feedback: {
      hide: true,
    }
  };
</script>
<script type="text/javascript" src="https://www.bugherd.com/sidebarv2.js?apikey=<BUGHERD_API_KEY>" async="true"></script>

Finally, in preview.js or config.js (depending on how you have set up storybook) in your storybook folder, you'll need to add a global decorator.

import { addDecorator } from '@storybook/react';
import withBugherd from '@etchteam/storybook-addon-bugherd';

addDecorator(withBugherd);

You'll get a bugherd feedback button for anonymous users injected in the top toolbar.

Made with ☕ at Etch

Join the community
6,060 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI