Using Tealium to inject Hubspot form into page

[alex120ft]

Currently looking at injecting a Hubspot form into a page via Tealium TMS due to the fact that the CMS can't accommodate the form embed code.

We have the Tealium sync tag in place in the head of the page, which is where the code that loads the 2 JS files lives:

   script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = '//js.hsforms.net/forms/v2-legacy.js';
document.getElementsByTagName('head')[0].appendChild(script);


script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = '//js.hsforms.net/forms/v2.js';
document.getElementsByTagName('head')[0].appendChild(script);

I then have some code that runs soon after that which checks every 200ms for the presence of the container div that the form will be replaced into and also checks that hbspt is defined. However, I'm noticing that the container div exists some time before hbspt is defined and therefore there is a noticeable amount of flicker from the time the main page loads to the point the hbspt method actually adds the form content.

Any help would be greatly appreciated.

[Derek_Gervais]

Hi @alex120ft,

I don't think I'm 100% clear on the situation here, but can you reduce the flicker by increasing the frequency with which you check for whether or not hbspt is defined? Also, is there a reason you can't put the full embed code inside of your Tealium container? You can specify an target parameter in the form embed code that will render the form in a different container, which would allow you to render the form elsewhere on your page.

[alex120ft]

When you say put the full embed code, which code is that? I have tried increasing the frequency of the hbspt defined checked but that didn't seem to help. I've also tried injecting the form html into the page, which works without any flicker but then means none of the form styling has been applied.

Perhaps also worth mentioning that I'm using the following method once hbspt is defined:
hbspt.forms.create({portalId: "2617132",formId: "2d2e08b2-9d5c-46ed-83b5-441f2490031f", target:".col-xs-10.col-xs-offset-1.text-center"});

[Derek_Gervais]

Hi @alex120ft,

I understand; I was initially looking at your post and thinking you were inserting an HTML snippet, which lead to some confusion on my part when you mentioned you couldn't use the form embed code. If increasing the frequency you check for hbspt to be defined doesn't work, you might consider tying to set the script's async attribute to false, and then insert the hbspt.forms.create method as another snippet directly afterwards. That would execute them one after the other, which would likely eliminate any flicker. Because you'd be forcing the form script to load & render synchronously, you might possibly see other issues, but it might be worth a try.

Other than that, I'm not sure what else you might try to reduce the flickering effect. Inserting the form code this way is more of a workaround than a directly supported use case, so it might be worth investigating other alternatives (like a custom form submitting to the Forms API) if this remains a problem.