> ## 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 campaign

> Link an activated widget to an experiment or personalization campaign to display it to targeted visitors.

You must [create](../create-a-widget-with-the-widget-studio/create-a-widget) and activate a widget before you can associate it with a campaign.

<Tip>
  To avoid incompatibility between the widget’s CSS and the one used on your website, you can activate the **Generate the code of all graphic widgets using JS with shadow DOM** option in your project's Configuration page.

  If you activate this option, widgets already used in a campaign will automatically update when the campaign status changes. If you use CSS class names from your website in your widgets, styles may not apply correctly.
</Tip>

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/use-widgets-in-your-campaigns/associate-a-widget-with-a-campaign/advanced-settings-768x168.png)
</Frame>

## Associate a widget with an experiment

To learn how to add a widget to an experiment in the A/B Graphic editor, read [this article](./ab-test-your-widgets).

## Associate a widget with a personalization

To learn how to add a widget to a personalization, read [this article](./ab-test-your-widgets#add-a-widget-to-a-variation-via-the-graphic-editor).

<Note>
  If you make changes to an active widget, all linked campaigns will be updated with the widget's latest version.
</Note>