Run Custom Code After the Page Loads (Hydration Event)

If your custom script changes page content, it can run too early and fail because the page is not ready. A built-in event called hydrationDone tells your code exactly when the page has finished loading.

Why it helps

Scripts placed in a code element can run before the builder finishes preparing the page, leading to timing errors. Waiting for the event removes that race.

Use it

1. Open the page in the builder and add a Code element where the script should live.
2. In the code, listen for the event and put your logic inside:

document.addEventListener("hydrationDone", () => { /* your JavaScript here */ })

3. Save and preview the page to confirm the script works.

Good uses

• Changing text or classes on elements.
• Reading or moving content in the page.
• Starting widgets that depend on the finished layout.

Optimization note

If your code is critical on page load, consider turning off JavaScript optimization for that page. With it on, the event can be delayed until the visitor interacts with the page.

Troubleshooting

If nothing happens, check your browser console for errors and confirm the listener is added before the event fires. Keep scripts light so they do not slow the page.

Good to know: Test custom code in a preview window with the console open; one typo can silently stop the whole script.