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

# Simular sus widgets

> Previsualice y pruebe su widget en condiciones reales antes de activarlo ejecutando una simulación directamente desde el Widget Studio.

Recomendamos simular su widget antes de activarlo y asociarlo a una de sus campañas de Kameleoon.

Haga clic en **Simular** en el encabezado del Widget Studio para simular su widget.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/simulate-your-widgets/widget-studio.png)
</Frame>

Puede comprobar los cambios realizados en su widget y verificar su configuración (si se han configurado eventos, por ejemplo).

## Configuración

Puede elegir posicionar su widget **fijo en la página** o **sobre la página**. Esta selección afecta a los ajustes que estarán disponibles.

### Fijo en la página

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/simulate-your-widgets/fixed-in-page.png)
</Frame>

* **Posición:** Si selecciona **Fijo en la página**, su widget aparecerá fijo, entre el contenido de la página.
* **Elemento de anclaje:** Introduzca el CSS del elemento utilizado como referencia para la posición de su widget.
* **Posición del anclaje:** Seleccione la posición del widget en relación con el elemento de anclaje: **Antes**, **Reemplazar** o **Después**.
* **Dispositivos:** Elija los dispositivos en los que aparecerá el widget.
* **Salida de código:**
  * **JS y CSS:** El widget se inserta en el DOM principal con JavaScript y sus estilos se aplican utilizando CSS normal.
    * Esta opción es la mejor para widgets que deben integrarse con el diseño de su sitio o casos de uso en los que desee cambiar el estilo o adaptar el widget.
  * **JS con Shadow DOM:** El widget se inyecta con JavaScript, pero su HTML y CSS viven dentro de un [Shadow DOM](../../../experimentation/web-experimentation/advanced-experiment-features/using-shadow-dom-elements-in-the-graphic-editor) (un subárbol aislado del DOM).
    * Esta opción es la mejor para widgets complejos y autónomos que deben comportarse igual en todas partes o escenarios en los que la estabilidad es más importante que la personalización.
    * Su widget estará esencialmente protegido (en el Shadow DOM) frente a CSS externos u otras reglas de estilo.

### Sobre la página

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/simulate-your-widgets/above-the-page.png)
</Frame>

* **Posición:** Si selecciona **Sobre la página**, su widget aparecerá sobre el contenido de su página.
* * **Dispositivos:** Elija los dispositivos en los que aparecerá el widget.
* **Salida de código:**
  * **JS y CSS:** El widget se inserta en el DOM principal con JavaScript y sus estilos se aplican utilizando CSS normal.
    * Esta opción es la mejor para widgets que deben integrarse con el diseño de su sitio o casos de uso en los que desee cambiar el estilo o adaptar el widget.
  * **JS con Shadow DOM:** El widget se inyecta con JavaScript, pero su HTML y CSS viven dentro de un [Shadow DOM](../../../experimentation/web-experimentation/advanced-experiment-features/using-shadow-dom-elements-in-the-graphic-editor) (un subárbol aislado del DOM).
    * Esta opción es la mejor para widgets complejos y autónomos que deben comportarse igual en todas partes o escenarios en los que la estabilidad es más importante que la personalización.
    * Su widget estará esencialmente protegido (en el Shadow DOM) frente a CSS externos u otras reglas de estilo.

## Iniciar la simulación

Haga clic en **Simular** para iniciar la simulación en la URL que introdujo al crear su widget. Puede probar su widget en condiciones reales y verificar su comportamiento (por ejemplo, asegurarse de que las animaciones funcionan correctamente si se han configurado).