HydrationDone Event for Funnel Customization

New Product Update – Custom Event Dispatch for Custom Code Execution in Funnels

We are excited to introduce a new feature: the hydrationDone event in our funnel and website builder preview. This update is designed to make the execution of your custom code more seamless and efficient.

Why is this Important?

Previously, users might have encountered issues where their custom scripts executed before the preview hydration was complete. This timing mismatch could lead to an incorrect execution flow and hinder the proper functionality of your custom code.

How We Solved It

By dispatching the ‘hydrationDone’ event after the complete hydration of the preview, we’ve effectively eliminated this source of contention. Now users can add an event listener to the hydrationDone event and ensure their subsequent code runs post-hydration. This is particularly useful if you are trying to manipulate DOM content immediately after the preview loads.

How to Use It

To utilize this new feature, follow these simple steps:

  1. Add a code element in the builder.
  2. Listen for the hydrationDone event using the following example code:
    document.addEventListener(
      "hydrationDone",
      () => {
        // Add custom javascript here
      }
    );
    
  3. Once the preview DOM content is loaded and the hydration event is received, the custom code will run without any issues or race conditions.

Note: If your custom code is critical on page load, you may need to disable Optimize JavaScript, as it delays the hydration event if there is no user interaction.

image (46)

More Optimization and User Benefits

This new feature aims to streamline your workflow and ensure that your custom scripts execute precisely when needed, enhancing the overall functionality and performance of your funnel or website.

Explore More Updates

In Case You Missed It:
Impressive Upgrade: Automate Your Social Media Comments with Leads 365