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

# Ein Widget mit einer Personalisierung verknüpfen

> Wählen und konfigurieren Sie ein aktives Widget zur Anzeige in einer Personalisierungskampagne, wobei Sie die Position auf der Seite und die Code-Ausgabemethode wählen.

So verknüpfen Sie ein Widget mit einer Personalisierung:

1. Öffnen Sie die Erstellungsseite der Personalisierung.
2. Wählen Sie den Typ Ihrer Personalisierung: **Im Inhalt Ihrer Seite** oder **Über Ihren Seiten**.
3. Klicken Sie auf **Widgets** > **Ein Widget auswählen**. Die Seite **Widget hinzufügen** wird geöffnet.

<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. Wählen Sie ein aktives Widget aus, das Sie Ihrer Kampagne hinzufügen möchten.
5. Wählen Sie die Ausgabe für den Code des Widgets in der rechten Seitenleiste.
   * Die Verwendung von JS mit Shadow DOM isoliert das CSS des Widgets vom CSS Ihrer Website.
   * Wenn Sie CSS-Klassennamen von Ihrer Website in Ihren Widgets verwenden, werden Stile möglicherweise nicht korrekt angewendet.
6. Bestätigen Sie Ihre Auswahl.

Sie werden zu Ihrer Kampagne weitergeleitet. Setzen Sie die Einrichtung Ihres Widgets [wie gewohnt](../../../web-personalization/set-up-and-launch-a-personalization) fort.

<Note>
  **Was passiert mit alten Widgets, die in Online-Personalisierungen verwendet werden?**

  Alte Widgets (vor dem Widget Studio erstellt) sind veraltet – Sie können sie nicht mehr in Online-Kampagnen verwenden. Jedes Widget hat einen entsprechenden JS- und CSS-Code, den Kameleoon extrahiert und dauerhaft zu den JS- und CSS-Abschnitten hinzufügt, die sich auf jedem Personalisierungstyp befinden.
</Note>