HTML custom module ignoring inner content

[MAmbrogi]

hello, HTML custom module, seems to be bugged as it is not showing any content inside.
find a demo page here: https://content.welcometothearkage.com/demo
there should be an HTML element with a simple div inside, id=‘hubspot_support’ but it is not shown, it seems like the entire component is ignored

any hint?

ty

[Anton]

Hi @MAmbrogi,

thank you for the preview link but since the whole module is - as you’ve said - ignored/not shown it’s hard to provide more information.

Could you please provide the source code of the module?

best,

Anton

[MAmbrogi]

sure, the issue raised when I tried to embed an external form, then switched to an easier version, with a sample silly code

<div id='hubspot_support' style='min-height: 500px;'>ciao</div>

[Anton]

hmm.

How do you work with this module? Is the html code embedded in the module.html or do you use a rich-text to have something like a HTML editor option while building pages?

Also does the console (bottom left) show something like this?

How do you embed the module into the page? Simply by drag&drop or via template?

Also something that might be causing an error(never experienced that but you never know):
Replace the quotes with double quotes like this:

<div id="hubspot_support" style="min-height: 500px;">ciao</div>

best

[MAmbrogi]

Hello again,

it’s a common HTML module:

the real code has double “quotes”

[Anton]

Hi @MAmbrogi,

seems to be the old HTML module that was available for download before the marketplace revamp last year(or the year before). If it’s the old HTML module it isn’t available anymore because HubSpot dropped the support of it for many reasons like security.

Therefore it might not work properly.

If you want to use this module often and have some sort of flexibility like showing different embeds based on your page you can create a custom module like this:

<div id="my_fillout" class="drop some CSS classes here" data-fillout-id="{{ module.fillout_id }}" ... ></div>

add a simple text(not rich-text) called “Fillout ID” as a function to the module and you’re good. The one thing that you’ll need to add to this module in the future would be just something like “32XsHk8Euhus” and it should work.

Also make sure that your embed code doesn’t require a JavaScript. Becuase if it requires a script it has to be placed somewhere in the page like

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
{# ^ this is the script that is required so that the code below works properly #}

<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "XXXXXXXXX",
 formId: "xxx-xxx-xxx-xxx"
 });
</script>

If your embed requires a JavaScript put it in the HTML or custom module like this

<script src="PATH-TO-SCRIPT" type="text/javascript"></script>

<div id="my_fillout" class="drop some CSS classes here" data-fillout-id="{{ module.fillout_id }}" ... ></div>

If this works I’d recommend to put it into a required_js function to improve page-performance like this

{% require_js %}
 <script src="PATH-TO-SCRIPT" type="text/javascript"></script>
{% end_require_js %}

<div id="my_fillout" class="drop some CSS classes here" data-fillout-id="{{ module.fillout_id }}" ... ></div>

This will put the script before the closing body tag AND HubSpot will check if this script is getting loaded already and won’t put it twice/multiple times into your page if you’re using the module several times on the page.

best,

Anton

[MAmbrogi]

ok, not an intuitive solution, but working

QUESTION:

<div
data-fillout-id=“{{module.fillout_id}}”
data-fillout-embed-type=“standard”
data-fillout-inherit-parameters
data-fillout-dynamic-resize>
</div>
<script src=“https://server.fillout.com/embed/v1/”></script>

in interesting, at least we can dyamize form ids, BUT…

cannot understand how to make it editable from the dragNdrop editor

I can only see the icon

[Anton]

Hey @MAmbrogi,

you have to add the function to the module like this:

Simply click on “add fields” and select “text”(not rich-text) since this is a plain text input.

If you have multiple forms that you just want to choose from you can select the choice field and put the IDs into the value fields

If you’d like to have a combination of both you can do it like this:

Here’s the whole code and the corresponding json file(if you’re working with local development/VS Code)

module.html

{% if module.fillout_type == "predefined" %}
 {% set fillout_id = module.predefined_fillout_id %}
{% elif module.fillout_type == "custom" %}
 {% set fillout_id = module.custom_fillout_id %}
{% endif %}

<div
data-fillout-id="{{ fillout_id }}"
data-fillout-embed-type="standard"
data-fillout-inherit-parameters
data-fillout-dynamic-resize>
</div>

fields.json

[
 {
 "type": "choice",
 "id": "63940e4e-388d-4a88-d465-7dcc8b872af5",
 "display": "radio",
 "choices": [
 [
 "predefined",
 "Predefined"
 ],
 [
 "custom",
 "Custom"
 ]
 ],
 "label": "Fillout type",
 "name": "fillout_type"
 },
 {
 "type": "text",
 "id": "a018a600-a693-63ce-0ffe-062dc1efab2a",
 "validation_regex": "",
 "label": "Custom fillout ID",
 "name": "custom_fillout_id",
 "visibility": {
 "controlling_field_path": "fillout_type",
 "operator": "EQUAL",
 "controlling_value_regex": "custom"
 }
 },
 {
 "type": "choice",
 "id": "f17eb7fa-9dbd-3413-09da-b3167e90ab75",
 "display": "radio",
 "choices": [
 [
 "XYZ123zyx",
 "Form A"
 ],
 [
 "ABC321cba",
 "Form B"
 ]
 ],
 "label": "Predefined fillout ID",
 "name": "predefined_fillout_id",
 "visibility": {
 "controlling_field_path": "fillout_type",
 "operator": "EQUAL",
 "controlling_value_regex": "predefined"
 }
 }
]

hope that helps

best,

Anton