Hydration event in custom code in Funnels
A new custom event hydrationDone has been introduced in the preview. This event will be dispatched when the funnel/website preview has completed its…
1 min read216 words1 explained image
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
A new custom event
hydrationDone has been introduced in the preview. This event will be dispatched when the funnel/website preview has completed its hydration so a user can run specific custom code post hydration.Why this is needed?
Previously, users might have faced issues where their custom scripts would execute before our preview hydration had completed. This timing mismatch could lead to incorrect execution flow and hinder the intended functionality of their custom code.
Previously, users might have faced issues where their custom scripts would execute before our preview hydration had completed. This timing mismatch could lead to incorrect execution flow and hinder the intended functionality of their custom code.
How did we solve this?
- By dispatching the 'hydrationDone' event after complete hydration of the preview is completed, we've effectively eliminated this source of contention.
- Users can add an event listener on the
hydrationDoneevent and execute their following code. This is especially useful if they are trying to manipulate DOM content.
How to use?
- Add a code element in the builder
- Listen the
hydrationDoneevent like below
document.addEventListener( "hydrationDone", () => { // Add custom javascript here })
- Once the preview DOM content is loaded and hydration event is received, the custom code will run without any issue or race condition.
Note: Optimise javascript may need to be disabled if user's custom code is critical on page load, as it delays the hydration event if there is no user interaction.
This is how your custom Javascript/ HTML should look like:
Fields in this part of the guide
Listen the hydrationDone event like below
Buttons and menus referenced
Note
All 2 steps in this procedure
- By dispatching the 'hydrationDone' event after complete hydration of the preview is completed, we've effectively eliminated this source of contention.
- Users can add an event listener on the hydrationDone event and execute their following code. This is especially useful if they are trying to manipulate DOM content.
Was this guide helpful?