> ## Documentation Index
> Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Evento hydrationDone para código personalizado

> Ejecuta tu JavaScript personalizado en el momento correcto escuchando el evento hydrationDone en embudos y sitios web.

Si agregas JavaScript personalizado a tus embudos o sitios web, puede que tu código se ejecute antes de que la página termine de cargarse por completo y no encuentre los elementos que quiere modificar. Para evitarlo, las páginas de Chateea emiten el evento `hydrationDone` cuando terminan su proceso de carga (hidratación). Si escuchas ese evento, tu código se ejecuta en el momento correcto.

## Qué es la hidratación

Cuando una página se abre, primero se muestra el contenido y luego se "activa" la parte interactiva: botones, formularios, animaciones y demás componentes. A ese último paso se le llama hidratación.

Si tu script se ejecuta antes de que termine, puede fallar o comportarse de forma inesperada, sobre todo si intenta leer o cambiar elementos de la página (el DOM). El evento `hydrationDone` se dispara justo cuando la hidratación termina, así eliminas ese problema de tiempos.

## Cómo usarlo

**1. Agrega un elemento de código**

En el editor de tu embudo o sitio web, arrastra un elemento de **Código** (HTML personalizado) a la página.

**2. Escucha el evento**

Envuelve tu código dentro de un listener del evento `hydrationDone`, como en el ejemplo de abajo.

**3. Guarda y prueba**

Guarda, abre la vista previa o la página publicada y comprueba que tu código se ejecuta como esperas.

Así debe verse tu código dentro del elemento:

```html theme={null}
<script>
  document.addEventListener("hydrationDone", () => {
    // Escribe aquí tu JavaScript personalizado
    // Por ejemplo, modificar un elemento de la página:
    // document.querySelector("#mi-elemento").classList.add("activo");
  });
</script>
```

Una vez que el contenido de la página está cargado y se recibe el evento, tu código se ejecuta sin conflictos de tiempo.

## La opción Optimizar JavaScript

Si tu página tiene activada la opción **Optimizar JavaScript**, la hidratación puede retrasarse hasta que el visitante interactúe con la página (por ejemplo, al hacer scroll o tocar la pantalla). En ese caso, el evento `hydrationDone` también se retrasa.

> [!WARNING]
>
> Si tu código es crítico y debe ejecutarse apenas carga la página, desactiva **Optimizar JavaScript** en la configuración del embudo o sitio web. Ten en cuenta que esto puede afectar un poco la velocidad de carga.

## Buenas prácticas

* Usa `hydrationDone` siempre que tu script lea o cambie elementos de la página.
* Prueba tu código en la página publicada, no solo en el editor.
* Revisa la consola del navegador si algo no funciona: los errores de JavaScript aparecen ahí.
* Mantén tus scripts pequeños y documentados para que tu equipo pueda entenderlos.

## Artículos relacionados

> **[Marketplace de widgets](https://help.chateea.com/docs/sitios/marketplace-de-widgets.md)**
>
> Agrega funciones sin escribir código.

> **[Parámetros de URL](https://help.chateea.com/docs/sitios/parametros-de-url.md)**
>
> Usa parámetros en los enlaces de tus páginas.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.