> ## 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.
# ウィジェットをパーソナライゼーションに関連付ける
> アクティブなウィジェットを選択して構成し、パーソナライゼーションキャンペーン内に表示します。ページの位置とコード出力方法も選択できます。
ウィジェットをパーソナライゼーションに関連付けるには:
1. パーソナライゼーション作成ページを開きます。
2. パーソナライゼーションのタイプを選択します: **In your page content** または **Above your pages**。
3. **Widgets** > **Choose a widget** をクリックします。**Add a widget** ページが開きます。
4. キャンペーンに追加するアクティブなウィジェットを選択します。
5. 右側のサイドバーでウィジェットコードの出力を選択します。
* JS with shadow DOMを使用すると、ウィジェットのCSSがウェブサイトのCSSから分離されます。
* ウィジェットでウェブサイトのCSSクラス名を使用している場合、スタイルが正しく適用されない可能性があります。
6. 選択を確定します。
キャンペーンにリダイレクトされます。[通常通り](../../../web-personalization/set-up-and-launch-a-personalization)、ウィジェットのセットアップを続行します。
**オンラインパーソナライゼーションで使用される古いウィジェットはどうなりますか？**
古いウィジェット（Widget Studio以前に作成されたもの）は廃止されています。オンラインキャンペーンでは使用できません。各ウィジェットには対応するJSとCSSコードがあり、Kameleoonがそれを抽出し、各パーソナライゼーションタイプに配置されているJSセクションとCSSセクションに永続的に追加します。