Troubleshoot Storybook

Brienne Wong
Brienne Wong
  • Updated

Below are some potential reasons why your Story doesn't display when you paste its URL into a zeroheight Storybook block.

 

Check the X-Frame-Options header is not set

As we are embedding your storybook in an iframe - we require the X-Frame-Options header to be unset (allow all domains). You can learn more about the header here.

To check if this is the problem you are experiencing, open your browser's developer tools console and you will see the following error:

Error shown in developer tool console

To unset your X-Frame-Options header, you'll need to configure your server to not send a value for it. This will vary based on how your site is hosted, but here are some links to popular setups

 

Is your Storybook private?

Anyone viewing the styleguide will need access to the website where your Storybook is hosted. If it's an internal website, it may only work for people when they are within your company's network (VPN). If they view zeroheight from a public computer, they will just see a blank space. You will need to be on the same VPN for viewing capabilities.

To fix this, you can make your Storybook website publicly accessible or ensure that you only send your zeroheight styleguide to internal users.

You can also create a customized error message so that viewers don't just see a blank space. To do this:

1) Go to styleguide settings

three dots menu in zeroheight

2) Scroll down to the very bottom of the first tab (Appearance)

3) You will see a field where you an enter a custom message under Storybook error message

Section to write Storybook error message in the appearance section of the styleguide settings
  • Type your message, click Save and youโ€™re all set!

Here's an example of a custom error message:

Storybook error message displayed in Storybook iFrame

Does your Storybook support HTTPS?

Due to browser restrictions, zeroheight can only embed content that supports HTTPS (this is because zeroheight itself is served over HTTPS). This becomes an issue if your Storybook instance doesn't have an SSL certificate and HTTPS support.

Don't panic! There is plenty of information online on how to add HTTPS support to your Storybook server, and you can get free SSL certificates from https://letsencrypt.org/

If you need any advice on how to do this, let us know! :)

Sidebar navigation appears

If you use the Embed block to embed Storybook, the sidebar navigation will show in the iFrame. Use the Code block and select Storybook to paste the URL.

Code function hovered over in the zeroheight toolbar.

Code examples that you can add in zeroheight

 

Still not working?

Get in touch at support@zeroheight.com

Was this article helpful?