Problem integrating a script

Hello @auslandszeit ,

Thank you for reaching out.

I checked your site, and currently, the form seems to load every time, regardless of whether the cookies are accepted or not. I assume you’ve temporarily disabled the integration.

To troubleshoot this, you could try not inserting the div class inside the ingration, it’s worth a try. Additionally, it’s possible that the div class="iaz-wayers-form" is being preloaded by Autoptimize (please check this screenshot https://prnt.sc/loXvZHB-FtuN), which might prevent the actual changes from showing. I suggest temporarily disabling Autoptimize while you test this. Once done, clear the cache and re-enable Autoptimize.

Keep me updated.

re. Autoptimize; you can generally disable Autoptimize on a per-request basis by adding ?ao_noptirocket=1 to the URL for testing purposes.

if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ (you can try disabling CSS optimization or you can try excluding /wp-content/themes/generatepress_child_theme/style.css from being optimized).

Hi there,
thanks for your response. I’m a colleague of auslandszeit.
What we were trying to achieve: Integrate the Hubspot contact form with Complianz, displaying a visible placeholder for customers to easily opt-in and load the script and the form only after opt-in.

The problem we have: It is not an iframe (easy to add with a placeholder) but a JS script, that loads the form into the content. What we have is an external script URL and the short code snippet, that calls a function of that external script to embed the form. Now if I add the URL of the external script in Complianz to be automatically blocked and only unblocked when the user consents the placeholder, the script is loaded but the code snippet was already executed on page load (not finding the script) and not at the point of consent and loading.
What I also tried: Add the code snippet as a third-party script (and created the div to have something Complianz can use for placeholder): When consenting on the placeholder the function is successfully executed. To make the form work, the external JS script must obviously already been loaded before (so that the function from the snippet is available). But the external script should be blocked as well, only loaded on consent.

Now: How do we block the external script and load it plus execute the code snippet only after loading when the customer consents on the placeholder?

Right now I have both integrations in the script center deactivated again. A hint on how to combine the two would maybe help that I can try again and get it work!

@optimizingmatters Thank you for the hint! Does not seem to be the problem for now ??

Thanks,
Jan

Hello @rumpel2116 ,

I have performed some tests to find a workaround for this issue, and I believe I have found a simple solution that doesn’t involve adding any scripts but instead uses the hubspot form shortcode (I used their form from Elementor as an example).

I used the “Block a script, iframe, or plugin” feature in the Script Center enabling only the placeholder check and adding the class “hbspt-form.” This allows Complianz to apply a placeholder directly to the class blocking it. Please take a look at this video where I demonstrate this issue: https://www.dropbox.com/scl/fi/y49kqc2vazwvo33ejfsjb/Screen-Recording-2024-09-05-12-06-31.mp4?rlkey=shbvfzefaht5zi1knos5ag6y2&st=121104bf&dl=0.

Please let me know how it goes.

Thank you for experimenting and letting me know! Sorry for getting back a little late…

I assume you installed the Hubspot plugin to integrate the form with Elementor?
We do not use the Hubspot plugin as it would track all user visits and slow down the website quite a lot and we’re using the forms on a few pages only. Also, Elementor is not used.

So all we have is this, in Gutenberg:

<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/embed/v2.js"></script>
<script>
	hbspt.forms.create({
		region: "na1",
		portalId: "6249792",
		formId: "c9f039ce-2a0c-4524-867d-da512a7ae389"
	});
</script>

Any idea how to block those two scripts with one placeholder?

Thanks again!
Jan