Using the Hydration Event in Funnels for Custom Code

Understanding the HydrationDone Event

When you preview a funnel or website in the CRM, the system goes through a process called hydration to fully load and initialize the page. Previously, custom scripts added to the page could run before this hydration process was complete, leading to unexpected behavior or errors if the code tried to manipulate elements that weren't ready.

To solve this, the CRM now dispatches a custom event named hydrationDone once the preview has finished hydrating. You can use this event as a signal to safely execute your custom JavaScript code.

How to Implement the Event Listener

To ensure your code runs after the page is fully hydrated, follow these steps within the funnel builder:

1. Add a Code element to your funnel or website page.
2. Inside the code element, add an event listener for the hydrationDone event.
3. Place your custom JavaScript inside the event listener's function.

Your code should look like this:

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

Once the preview's DOM content is loaded and the hydrationDone event is received, your custom code will execute, avoiding any timing conflicts.

Important Note on JavaScript Optimization

If your custom code is critical and must run immediately on page load, you may need to disable the CRM's JavaScript optimization feature. When this feature is enabled and there is no user interaction, it can delay the firing of the hydration event.