> ## 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. # Associer un widget à une personnalisation > Sélectionnez et configurez un widget actif à afficher dans une campagne de personnalisation, en choisissant sa position sur la page et sa méthode de sortie de code. Pour associer un widget à une personnalisation : 1. Ouvrez la page de création de la personnalisation. 2. Choisissez le type de votre personnalisation : **Dans le contenu de votre page** ou **Au-dessus de vos pages**. 3. Cliquez sur **Widgets** > **Choisir un widget**. La page **Ajouter un widget** s'ouvrira. ![](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) 4. Sélectionnez un widget actif à ajouter à votre campagne. 5. Sélectionnez la sortie pour le code du widget dans la barre latérale de droite. * L'utilisation de JS avec shadow DOM isolera le CSS du widget du CSS de votre site web. * Si vous utilisez des noms de classes CSS de votre site web dans vos widgets, les styles peuvent ne pas s'appliquer correctement. 6. Confirmez votre sélection. Vous serez redirigé vers votre campagne. Continuez à configurer votre widget [comme d'habitude](../../../web-personalization/set-up-and-launch-a-personalization). **Qu'arrive-t-il aux anciens widgets utilisés dans les personnalisations en ligne ?** Les anciens widgets (créés avant le Widget Studio) sont obsolètes—vous ne pouvez plus les utiliser dans les campagnes en ligne. Chaque widget a un code JS et CSS correspondant que Kameleoon extraira et ajoutera de manière permanente aux sections JS et CSS situées sur chaque type de personnalisation.