# Embedding a widget in Workshop

To embed a widget in [Workshop](../../workshop/overview/index.md), start by adding a **custom widget** component to your Workshop:

![Select custom widget renderer.](../../../assets/af2ba9be3c3c58974b58ec0dfd2e9911c252b2175cd417b569e9b3948aed1276.webp)

In the new **Widget setup** tab, find **Select** to select the widget set and version to use.

:::callout{theme="warning"}
A brand-new widget must be published at least once before the new widget appears in the widget set and version selector. After the new widget's first release, you can use [dev mode](../development/index.md) to preview unpublished changes to the widget's code, parameters, and events directly in Workshop.
:::

## Configure parameters and events

You can bind the **parameters** your widget uses to Workshop variables to allow passing data in and out of the Workshop state. For information on the different parameter types available, see [parameters and events](../parameters-and-events/index.md).

You can use **events** to allow widgets to update the parameter values. You can also bind these events to [Workshop events](../../workshop/concepts-events/index.md) such that when a widget fires an event, it will also trigger a Workshop event.

Widget parameters and events can be bound to Workshop variables and events in the **Widget setup** panel:

<img src="../../../assets/6e075f6e0fcf62f9e049cc301256c666b4fdfa6b11f67220c835de6d15417d4d.webp" alt="Events and parameters configuration." width=350 />

## Limitations

By default, custom widgets reload when they are removed from the page and later displayed again. To preserve local state across navigation, configure [widget display optimization](../../workshop/widget-display-optimization/index.md) to keep the widget mounted. You can also store custom widget data in Workshop variables passed to the widget.

## Troubleshooting

For help with browser performance issues, crashes, or unexpected behavior, see [Troubleshooting](../troubleshooting/index.md).