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

# ウィジェットをキャンペーンに関連付ける

> アクティブなウィジェットを実験またはパーソナライゼーションキャンペーンにリンクして、対象となる訪問者に表示します。

ウィジェットをキャンペーンに関連付ける前に、ウィジェットを[作成](../create-a-widget-with-the-widget-studio/create-a-widget)して有効化する必要があります。

<Tip>
  ウィジェットのCSSとウェブサイトで使用されているCSSとの非互換性を避けるため、プロジェクトのConfigurationページで **Generate the code of all graphic widgets using JS with shadow DOM** オプションを有効にすることができます。

  このオプションを有効にすると、キャンペーンですでに使用されているウィジェットは、キャンペーンステータスが変更されると自動的に更新されます。ウィジェットでウェブサイトのCSSクラス名を使用している場合、スタイルが正しく適用されない可能性があります。
</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>

## ウィジェットを実験に関連付ける

A/Bグラフィックエディタで実験にウィジェットを追加する方法については、[こちらの記事](./ab-test-your-widgets)をご覧ください。

## ウィジェットをパーソナライゼーションに関連付ける

パーソナライゼーションにウィジェットを追加する方法については、[こちらの記事](./ab-test-your-widgets#グラフィックエディタを使用してバリエーションにウィジェットを追加する)をご覧ください。

<Note>
  アクティブなウィジェットに変更を加えると、リンクされているすべてのキャンペーンがウィジェットの最新バージョンで更新されます。
</Note>