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

# Asociar un widget a una personalización

> Seleccione y configure un widget activo para mostrarlo dentro de una campaña de personalización, eligiendo su posición en la página y el método de salida del código.

Para asociar un widget a una personalización:

1. Abra la página de creación de personalización.
2. Elija el tipo de personalización: **En el contenido de su página** o **Sobre sus páginas**.
3. Haga clic en **Widgets** > **Elegir un widget**. Se abrirá la página **Añadir un widget**.

<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. Seleccione un widget activo para añadirlo a su campaña.
5. Seleccione la salida del código del widget en la barra lateral derecha.
   * El uso de JS con shadow DOM aislará el CSS del widget del CSS de su sitio web.
   * Si utiliza nombres de clases CSS de su sitio web en sus widgets, los estilos podrían no aplicarse correctamente.
6. Confirme su selección.

Será redirigido a su campaña. Continúe configurando su widget [como de costumbre](../../../web-personalization/set-up-and-launch-a-personalization).

<Note>
  **¿Qué pasa con los widgets antiguos utilizados en personalizaciones en línea?**

  Los widgets antiguos (creados antes del Widget Studio) están obsoletos: ya no puede utilizarlos en campañas en línea. Cada widget tiene un código JS y CSS correspondiente que Kameleoon extraerá y añadirá permanentemente a las secciones JS y CSS situadas en cada tipo de personalización.
</Note>