HubSpot Forms Script Fails when loading in angular at the run time

Hello,

we are working on the project where we need to load the differnent plugins in the Video, one from them is to laod the hubspot form in the video

So now my problem is if i load the hubspot script from the index.html in angular then script is successfully loaded, but if i try to load the script after angular is loaded then i am getting the following error

Cannot read property 'prototype' of undefined

This demo code is available here

when i diagnose this problem i was able to know that this problem occurs becuase promise is being added in the global variables and angualr does not support that

so if i remove the promise from global variables then every this works fine.

so my question is, is it possible to remove Promise from the shell.js hosted on cdn so i dont have to manually remove it.

Welcome, @Fahad.

Thank you for sharing such a detailed post!

It won’t be possible for us to remove "Promise" from the globals array in the shell.js script, but perhaps I can help you find an alternative solution.

Would the workaround described at the end of this thread help in your use case?

Alternatively, if shell.js is not viable, you could custom code a form and submit it to HubSpot using the Forms API. This endpoint is supported by Marketing Free.

Would the workaround described at the end of this thread help in your use case?

No this does not help, as in this exmple the script is laoded at the start of angular which is in index.html and in my case i wanted to load that at the run time.

Ok now i have only signle workaround left which is modify the shell.js and load it from my local sources.

Now my only concern is that is there will be any time when loading the form from my local shell.js file stop loading?

Hi, @Fahad.

Thanks for clarifying.

I can’t endorse modifying and loading your own version of shell.js.

If you need to load a form in a video, I think your best bet is to create a custom form and send submissions to this Forms API endpoint.

Using the Forms API instead of relying on an embedded HubSpot form will allow you to launch and format the form however you want (e.g. if you use the shell.js embed code, the form will have HubSpot branding). You can still send tracking data through the Forms API using the context object.