How to include a Javascript snippet into a custom Element's template?

How To
1

I am trying to do a Hubspot Form component which generates a form based on the Hubspot API.
Normally, the way to embed a form that way is to first create a div with an id :

<div id="form_wrapper">...</div>

And then Hubspot provides a snippet to embed a form within that div :

<script>
    hbspt.forms.create({
        region: 'na1', portalId: '1234567',
        formId: '399a0e19-ddf7-47d8-ba9b-b7bx3f47eeed',
        target: '#form_wrapper'
    });
</script>

In my HSForm element, I do this in my render() function :

$output = "<div {$this->render_attributes('_root')}><div class='form' id='form_wrapper'>";
$output .= "</div></div>";
$output .= "<script>hbspt.forms.create({region: 'na1', portalId: '1234567', formId: '399a0e19-ddf7-47d8-ba9b-b7bx3f47eeed', target: '#form_wrapper' });</script>";
echo $output;

It works fine on the page itself, the form is embedded and seems operational. But within the Bricks builder, it looks like the tag is rendered as text, not as code. I’m assuming this is done that way for security reasons, but is there a way to circumvent this ?

I don’t think I can put the script in an external JS file, because I’d need the portalId, formId and other params to be taken from within the element’s $settings.

I’ve also tried storing all the variables into attributes of the wrapper div, like

<div class='form' id='form_wrapper' data-form-id='399a0e19-ddf7-47d8-ba9b-b7bx3f47eeed'>...</div>

So that I could then use jQuery to target that div, extract its data- attributes, and reconstruct the embed script from there ; but I haven’t gotten it to work yet, and I’d rather ask if there’s a more straightforward solution.

Thank you for your help !