{"id":1838,"date":"2026-04-01T13:11:19","date_gmt":"2026-04-01T13:11:19","guid":{"rendered":"https:\/\/onesystemcrm.com\/help\/?post_type=docs&#038;p=1838"},"modified":"2026-04-01T13:11:19","modified_gmt":"2026-04-01T13:11:19","password":"","slug":"hydration-event-in-custom-code-in-funnels","status":"publish","type":"docs","link":"https:\/\/onesystemcrm.com\/help\/Supports\/hydration-event-in-custom-code-in-funnels\/","title":{"rendered":"Hydration event in custom code in Funnels"},"content":{"rendered":"<div class=\"p-rich_text_section\" dir=\"ltr\"><span dir=\"ltr\">A new custom event\u00a0<code class=\"c-mrkdwn__code\" data-stringify-type=\"code\">hydrationDone<\/code>\u00a0has 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.<\/span><\/div>\n<div class=\"p-rich_text_section\" dir=\"ltr\"><\/div>\n<div class=\"p-rich_text_section\" dir=\"ltr\"><strong dir=\"ltr\">Why this is needed?<\/strong><br \/>\n<span dir=\"ltr\">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.\u00a0<\/span><\/div>\n<div class=\"p-rich_text_section\" dir=\"ltr\"><\/div>\n<div class=\"p-rich_text_section\" dir=\"ltr\"><strong>How did we solve this?<\/strong><\/div>\n<ol>\n<li>By dispatching the &#8216;hydrationDone&#8217; event after complete hydration of the preview is completed, we&#8217;ve effectively eliminated this source of contention.<\/li>\n<li><span dir=\"ltr\">Users can add an event listener on the\u00a0<code class=\"c-mrkdwn__code\" data-stringify-type=\"code\">hydrationDone<\/code>\u00a0event and execute their following code. This is especially useful if they are trying to manipulate DOM content.<\/span><\/li>\n<\/ol>\n<div class=\"p-rich_text_section\" dir=\"ltr\"><strong>How to use?<\/strong><\/div>\n<ul class=\"p-rich_text_list p-rich_text_list__bullet\" data-border=\"0\" data-indent=\"0\" data-stringify-type=\"unordered-list\">\n<li dir=\"ltr\" data-stringify-border=\"0\" data-stringify-indent=\"0\">Add a code element in the builder<\/li>\n<li dir=\"ltr\" data-stringify-border=\"0\" data-stringify-indent=\"0\">Listen the\u00a0<code class=\"c-mrkdwn__code\" data-stringify-type=\"code\">hydrationDone<\/code>\u00a0event like below<\/li>\n<\/ul>\n<div class=\"p-rich_text_block--no-overflow\" dir=\"ltr\">document.addEventListener( &#8220;hydrationDone&#8221;, () =&gt; { \/\/ Add custom javascript here })<\/div>\n<ul class=\"p-rich_text_list p-rich_text_list__bullet\" data-border=\"0\" data-indent=\"0\" data-stringify-type=\"unordered-list\">\n<li dir=\"ltr\" data-stringify-border=\"0\" data-stringify-indent=\"0\">Once the preview DOM content is loaded and hydration event is received, the custom code will run without any issue or race condition.<\/li>\n<\/ul>\n<div class=\"p-rich_text_section\"><b data-stringify-type=\"bold\"><i dir=\"ltr\" data-stringify-type=\"italic\">Note<\/i><\/b><i dir=\"ltr\" data-stringify-type=\"italic\">: Optimise javascript may need to be disabled if user&#8217;s custom code is critical on page load, as it delays the hydration event if there is no user interaction.<\/i><\/div>\n<p><i dir=\"ltr\" data-stringify-type=\"italic\">This is how your custom Javascript\/ HTML should look like:<img decoding=\"async\" class=\"fr-fil fr-dib fw-lightbox-img\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/155026075581\/original\/JUAS8WOxjL8rYexXLNPsz4ITdqJTBToK8A.png?1715782328\" data-id=\"155026075581\" data-attachment=\"[object Object]\" data-index=\"0\" \/><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A new custom event\u00a0hydrationDone\u00a0has been introduced in the preview. This event will be dispatched when the funnel\/website preview has completed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[86],"doc_tag":[],"class_list":["post-1838","docs","type-docs","status-publish","hentry","doc_category-funnels-and-websites"],"year_month":"2026-07","word_count":213,"total_views":"11","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"usamasaeed219","author_nicename":"usamasaeed219","author_url":"https:\/\/onesystemcrm.com\/help\/author\/usamasaeed219\/"},"doc_category_info":[{"term_name":"Funnels and Websites","term_url":"https:\/\/onesystemcrm.com\/help\/Supports-category\/funnels-and-websites\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/comments?post=1838"}],"version-history":[{"count":1,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1838\/revisions"}],"predecessor-version":[{"id":1839,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1838\/revisions\/1839"}],"wp:attachment":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/media?parent=1838"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_category?post=1838"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_tag?post=1838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}