hydrationDone Event for Custom Code in Funnels

Sparkforge funnels and websites dispatch a custom hydrationDone event in the preview after hydration completes. Listening for this event lets you safely run custom JavaScript that depends on the rendered DOM.

The problem it solves

Custom code in a code element used to run before the preview finished hydrating. That timing mismatch caused scripts to fail, miss elements, or produce inconsistent results, especially when manipulating the DOM.

How to use it

1. Add a code element to the funnel or website page in the builder.
2. Attach an event listener for hydrationDone.
3. Place your custom logic inside the listener so it runs only after hydration completes.

document.addEventListener("hydrationDone", () => {
  // your custom javascript here
});

Once the preview's DOM is loaded and the event fires, your code runs without race conditions against hydration.

Optimize JavaScript and the hydration event

If the page has Optimize JavaScript enabled, hydration is deferred until user interaction. That means the hydrationDone event will not fire on initial load. If your code must run on page load, disable Optimize JavaScript for that page.

When you need this

• Reading or modifying rendered DOM nodes.
• Initializing third-party widgets that need the page fully painted.
• Reading text or attributes that the builder injects during hydration.