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

# Editor de código personalizado del Widget Studio

> Escriba CSS y JavaScript personalizados en el editor de código del Widget Studio para aplicar estilos a los elementos del widget y ejecutar scripts a demanda.

Puede crear código CSS o JS personalizado en el Widget Studio y aplicar sus estilos personalizados a cualquier elemento del widget o ejecutar sus scripts bajo demanda.

En este artículo, aprenderá a:

* Añadir CSS personalizado
* Aplicar su código CSS a elementos del widget
* Añadir código JS
* Cambiar la vista del código

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/insert-html-code-in-your-widget/widget-studio-custom-code-editor/0.png)
</Frame>

## Ejemplo de caso de uso

Un caso de uso común del código personalizado es aplicar el mismo estilo a varios elementos del widget, en lugar de configurar manualmente las propiedades de estilo en cada elemento. Si no es un usuario técnico, pida a uno de sus desarrolladores que cree clases CSS predefinidas para usted.

## Añadir código CSS personalizado

1. Haga clic en **Código personalizado** en el menú izquierdo. La página se abre con la opción **CSS personalizado** seleccionada.
2. Añada su código CSS en el editor de código.

## Aplicar código CSS a los elementos del widget

1. Abra la sección **Diseño**.
2. Seleccione un elemento. Este elemento tendrá el estilo correspondiente a una de las clases que ha creado en el editor de código.
3. Desplácese hacia abajo y despliegue la sección **CSS y clases**.
4. Añada el nombre de su clase en el campo **ClassName del elemento**, o en **ClassName del contenedor** si desea aplicar esta clase al elemento padre.

<Note>
  Su elemento seleccionado con el estilo de su código personalizado no aparecerá en el área de vista previa de la derecha. Debe hacer clic en el **icono de cámara** para ver sus cambios.
</Note>

## Añadir código JS

Añadir código JS le permite ejecutar un script personalizado a demanda en su widget.

1. Haga clic en **Código personalizado** en la barra lateral izquierda.
2. Haga clic en **JS personalizado**.
3. Añada su código JS en el editor de código.

<Note>
  Para comprobar la ejecución de su script, haga clic en el **icono de cámara**.
</Note>

## Cambiar la vista del código

Si trabaja con código CSS y JS, es posible que desee leer ambos códigos al mismo tiempo. Para añadir varios editores de código:

1. Haga clic en el icono **Añadir panel** en la esquina superior derecha encima del editor de código.
2. Redimensione manualmente cada panel para que se ajuste a sus necesidades.

Para cerrar un panel, haga clic en la **X** a la derecha del marcador de código (JS o CSS).