topic Getting hydration errors when embedding in nodejs in APIs & Integrations

topic Getting hydration errors when embedding in nodejs in APIs & Integrations https://community.hubspot.com/t5/APIs-Integrations/Getting-hydration-errors-when-embedding-in-nodejs/m-p/1097180#M79658 <P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Screenshot 2025-01-20 at 6.49.30 PM.png" style="width: 400px;"><img src="https://community.hubspot.com/t5/image/serverpage/image-id/136455i970D42F3762B383F/image-size/medium?v=v2&px=400" role="button" title="Screenshot 2025-01-20 at 6.49.30 PM.png" alt="Screenshot 2025-01-20 at 6.49.30 PM.png" /></span></P><P> <BR /><BR /></P><DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-embed hs-cta-embed-185163424674"</SPAN> <SPAN>style</SPAN><SPAN>=</SPAN><SPAN>{</SPAN><SPAN>{</SPAN><SPAN>maxWidth</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>maxHeight</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>width</SPAN><SPAN>:</SPAN> <SPAN>"502px"</SPAN><SPAN>, </SPAN><SPAN>height</SPAN><SPAN>:</SPAN> <SPAN>"520.796875px"</SPAN><SPAN>}</SPAN><SPAN>}</SPAN> <SPAN>data-hubspot-wrapper-cta-id</SPAN><SPAN>=</SPAN><SPAN>"185163424674"</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>link</SPAN> <SPAN>rel</SPAN><SPAN>=</SPAN><SPAN>"stylesheet"</SPAN> <SPAN>href</SPAN><SPAN>=</SPAN><SPAN>"<A href="https://js.hscta.com/embeddable_cta_placeholder_v1.css" target="_blank" rel="noopener">https://js.hscta.com/embeddable_cta_placeholder_v1.css</A>"</SPAN><SPAN>/></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot__container"</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-embed__skeleton"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>picture</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>source</SPAN> <SPAN>srcSet</SPAN><SPAN>=</SPAN><SPAN>"data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="</SPAN> <SPAN>media</SPAN><SPAN>=</SPAN><SPAN>"(max-width: 480px)"</SPAN> <SPAN>/></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>img</SPAN> <SPAN>alt</SPAN><SPAN>=</SPAN><SPAN>"Form CTA"</SPAN> <SPAN>loading</SPAN><SPAN>=</SPAN><SPAN>"lazy"</SPAN> <SPAN>src</SPAN><SPAN>=</SPAN><SPAN>"<A href="https://no-cache.hubspot.com/cta/default/43829156/interactive-185163424674.png" target="_blank" rel="noopener">https://no-cache.hubspot.com/cta/default/43829156/interactive-185163424674.png</A>"</SPAN> <SPAN>style</SPAN><SPAN>=</SPAN><SPAN>{</SPAN><SPAN>{</SPAN><SPAN>height</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>width</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>objectFit</SPAN><SPAN>:</SPAN> <SPAN>"fill"</SPAN><SPAN>}</SPAN><SPAN>}</SPAN> <SPAN>/></SPAN></DIV><DIV><SPAN></</SPAN><SPAN>picture</SPAN><SPAN>></SPAN></DIV><DIV><SPAN></</SPAN><SPAN>div</SPAN><SPAN>><BR /><BR /><BR /></SPAN>I added my div for embedding and it is just forever loading and gets hydration errors</DIV></DIV> Tue, 21 Jan 2025 02:51:51 GMT CFeiler 2025-01-21T02:51:51Z Getting hydration errors when embedding in nodejs https://community.hubspot.com/t5/APIs-Integrations/Getting-hydration-errors-when-embedding-in-nodejs/m-p/1097180#M79658 <P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Screenshot 2025-01-20 at 6.49.30 PM.png" style="width: 400px;"><img src="https://community.hubspot.com/t5/image/serverpage/image-id/136455i970D42F3762B383F/image-size/medium?v=v2&px=400" role="button" title="Screenshot 2025-01-20 at 6.49.30 PM.png" alt="Screenshot 2025-01-20 at 6.49.30 PM.png" /></span></P><P> <BR /><BR /></P><DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-embed hs-cta-embed-185163424674"</SPAN> <SPAN>style</SPAN><SPAN>=</SPAN><SPAN>{</SPAN><SPAN>{</SPAN><SPAN>maxWidth</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>maxHeight</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>width</SPAN><SPAN>:</SPAN> <SPAN>"502px"</SPAN><SPAN>, </SPAN><SPAN>height</SPAN><SPAN>:</SPAN> <SPAN>"520.796875px"</SPAN><SPAN>}</SPAN><SPAN>}</SPAN> <SPAN>data-hubspot-wrapper-cta-id</SPAN><SPAN>=</SPAN><SPAN>"185163424674"</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>link</SPAN> <SPAN>rel</SPAN><SPAN>=</SPAN><SPAN>"stylesheet"</SPAN> <SPAN>href</SPAN><SPAN>=</SPAN><SPAN>"<A href="https://js.hscta.com/embeddable_cta_placeholder_v1.css" target="_blank" rel="noopener">https://js.hscta.com/embeddable_cta_placeholder_v1.css</A>"</SPAN><SPAN>/></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot__container"</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-loading-dot"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>div</SPAN> <SPAN>className</SPAN><SPAN>=</SPAN><SPAN>"hs-cta-embed__skeleton"</SPAN><SPAN>></</SPAN><SPAN>div</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>picture</SPAN><SPAN>></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>source</SPAN> <SPAN>srcSet</SPAN><SPAN>=</SPAN><SPAN>"data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="</SPAN> <SPAN>media</SPAN><SPAN>=</SPAN><SPAN>"(max-width: 480px)"</SPAN> <SPAN>/></SPAN></DIV><DIV><SPAN><</SPAN><SPAN>img</SPAN> <SPAN>alt</SPAN><SPAN>=</SPAN><SPAN>"Form CTA"</SPAN> <SPAN>loading</SPAN><SPAN>=</SPAN><SPAN>"lazy"</SPAN> <SPAN>src</SPAN><SPAN>=</SPAN><SPAN>"<A href="https://no-cache.hubspot.com/cta/default/43829156/interactive-185163424674.png" target="_blank" rel="noopener">https://no-cache.hubspot.com/cta/default/43829156/interactive-185163424674.png</A>"</SPAN> <SPAN>style</SPAN><SPAN>=</SPAN><SPAN>{</SPAN><SPAN>{</SPAN><SPAN>height</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>width</SPAN><SPAN>:</SPAN> <SPAN>"100%"</SPAN><SPAN>, </SPAN><SPAN>objectFit</SPAN><SPAN>:</SPAN> <SPAN>"fill"</SPAN><SPAN>}</SPAN><SPAN>}</SPAN> <SPAN>/></SPAN></DIV><DIV><SPAN></</SPAN><SPAN>picture</SPAN><SPAN>></SPAN></DIV><DIV><SPAN></</SPAN><SPAN>div</SPAN><SPAN>><BR /><BR /><BR /></SPAN>I added my div for embedding and it is just forever loading and gets hydration errors</DIV></DIV> Tue, 21 Jan 2025 02:51:51 GMT https://community.hubspot.com/t5/APIs-Integrations/Getting-hydration-errors-when-embedding-in-nodejs/m-p/1097180#M79658 CFeiler 2025-01-21T02:51:51Z Re: Getting hydration errors when embedding in nodejs https://community.hubspot.com/t5/APIs-Integrations/Getting-hydration-errors-when-embedding-in-nodejs/m-p/1097484#M79671 <P>Hi, <SPAN style="background: var(--ck-color-mention-background); color: var(--ck-color-mention-text);"><a href="https://community.hubspot.com/t5/user/viewprofilepage/user-id/655746">@CFeiler</a></SPAN> <span class="lia-unicode-emoji" title=":waving_hand:">👋</span> Thanks for your question. I think our community members may need additional information to help you troubleshoot. Have you tried:</P> <UL> <LI>Making sure the HS tracking code loads <I>before</I> your CTA?</LI> <LI>Using a container div with a unique ID?</LI> <LI>Initializing the CTA <I>after</I> the component is mounted?</LI> </UL> <P>Thank you for the additional information. — Jaycee</P> Tue, 21 Jan 2025 15:38:53 GMT https://community.hubspot.com/t5/APIs-Integrations/Getting-hydration-errors-when-embedding-in-nodejs/m-p/1097484#M79671 Jaycee_Lewis 2025-01-21T15:38:53Z