Embedding
Preview Mode
If you want to embed Widgetbook in your documentation, but you want to hide Widgetbook's UI, you can do so by adding the preview query parameter to the URL of your hosted Widgetbook.
https://widgetbook.acme.com/#/?path=my/use-case/path/default&preview
For example here's an embedding of our demo app:
https://demo.widgetbook.io/#/?path=features/about/aboutscreen/default
https://demo.widgetbook.io/#/?path=features/about/aboutscreen/default&preview
You can host your Widgetbook using Widgetbook Cloud Builds.
Customizing Panels
You may want to show or hide certain panels in the embedded Widgetbook. You can do this by adding the panels query parameter to the URL of your hosted Widgetbook.
The panels query parameter is not compatible with the preview query
parameter. If you use both, the panels parameter will be ignored.
# Knobs panel only
https://widgetbook.acme.com/#/?path=my/use-case/path/default&panels=knobs
# Knobs and Addons panels
https://widgetbook.acme.com/#/?path=my/use-case/path/default&panels=knobs,addons
# Navigation panel only
https://widgetbook.acme.com/#/?path=my/use-case/path/default&panels=navigation