> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Associate a widget with a personalization

> Select and configure an active widget to display within a personalization campaign, choosing its page position and code output method.

To associate a widget with a personalization:

1. Open the personalization creation page.
2. Choose your personalization's type: **In your page content** or **Above your pages**.
3. Click **Widgets** > **Choose a widget**. The **Add a widget** page will open.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/use-widgets-in-your-campaigns/associate-a-widget-with-a-personalization/add-widget-page-1536x962.png)
</Frame>

4. Select an active widget to add to your campaign.
5. Select the output for the widget's code in the right-hand sidebar.
   * Using JS with shadow DOM will isolate the widget's CSS from your website's CSS.
   * If you use CSS class names from your website in your widgets, styles may not apply correctly.
6. Confirm your selection.

You will be redirected to your campaign. Continue setting up your widget [as usual](../../../web-personalization/set-up-and-launch-a-personalization).

<Note>
  **What happens to old widgets used in online personalizations?**

  Old widgets (created before the Widget Studio) are obsolete—you can't use them in online campaigns anymore. Each widget has a corresponding JS and CSS code that Kameleoon will extract and add permanently to the JS and CSS sections located on each personalization type.
</Note>