Embedding a JavaScript-based Block Puzzle Helper tool on a HubSpot blog page

[a4affan]

I’m trying to embed a lightweight JavaScript-based tool into a HubSpot blog post. The tool includes a simple UI, accepts image input (via file upload), and runs a client-side script to process the image and suggest block placements.

Is it possible to include such functionality using a custom HTML module or embed code in HubSpot’s blog editor? Specifically:

• Will HubSpot support <input type="file"> and <canvas> elements inside blog content?

• Are there restrictions on inline JavaScript execution or external JS/CSS hosting (e.g., from a CDN)?

• Would embedding it via <iframe> (pointing to a self-hosted page) be more reliable?

Looking for the best approach to keep the tool interactive and usable directly within the blog post without requiring users to leave the page.

Thanks!

[Anton · Accepted solution]

Hi @a4affan, 

technically, you can embed something like this in a blog-post/website/landing page without to many issues. 

My recommendation would be to create a custom (global) module to have a reusable "thing" instead of manually creating it over and over again, if you'd like to use it in more than one place. 

(Custom) modules can be described kinda as the building-blocks of your HubSpot web experience(websites, blogs, landing pages)... So therefor: I'd build a custom module which contains all the "logic" and simply put it into the blog post via drag&drop. 

Quick explenation of terminology:

Default modules:

Default modules come with every HubSpot portal. They are designed/developed/maintained by HubSpot. You can clone and modify them

Theme modules:

Specifically designed and developed by theme providers to extend their theme. Those theme modules most likely won't work outside the theme. 

Custom modules: 

Developed by you/a developer via the design-manager or local environment. Endless possibilities and tailored to your requirements.

Global modules / custom global modules:

Same as "Custom Modules" but the content is same through-out every instance of the module. 

Except the global module all modules are designed in a way that every instance of the module can display different content.

I.e: A headline module can be used 5x on a single page and have different headlines each time.

A global version of a headline module would display 5x the same headline. If you change it in one place, it will be changed in all other instances automatically.

My recommendation would be: to create a custom module/global custom module with the input field and everything that you'll need for it like the whole JS, CSS and everything. If you're working in a child-theme or custom theme, you can optimize the code further. 

p.s:
If you need, developer support, I'll be happy to chat

best, 

Anton

[DCarter60 · Accepted solution]

Yes, HubSpot supports <input type="file"> and <canvas>, but embedding JavaScript directly inside blog content often gets blocked or stripped for security. Here’s the best approach: Use an <iframe> to embed your tool from a self-hosted page. Host your HTML, JS, and CSS externally (e.g. on your own server or GitHub Pages). In HubSpot, insert the iframe code using a custom HTML module in the blog editor. This keeps your tool interactive and avoids script restrictions, while keeping users on the same page.

[Anton · Accepted solution]

Hi @a4affan, 

technically, you can embed something like this in a blog-post/website/landing page without to many issues. 

My recommendation would be to create a custom (global) module to have a reusable "thing" instead of manually creating it over and over again, if you'd like to use it in more than one place. 

(Custom) modules can be described kinda as the building-blocks of your HubSpot web experience(websites, blogs, landing pages)... So therefor: I'd build a custom module which contains all the "logic" and simply put it into the blog post via drag&drop. 

Quick explenation of terminology:

Default modules:

Default modules come with every HubSpot portal. They are designed/developed/maintained by HubSpot. You can clone and modify them

Theme modules:

Specifically designed and developed by theme providers to extend their theme. Those theme modules most likely won't work outside the theme. 

Custom modules: 

Developed by you/a developer via the design-manager or local environment. Endless possibilities and tailored to your requirements.

Global modules / custom global modules:

Same as "Custom Modules" but the content is same through-out every instance of the module. 

Except the global module all modules are designed in a way that every instance of the module can display different content.

I.e: A headline module can be used 5x on a single page and have different headlines each time.

A global version of a headline module would display 5x the same headline. If you change it in one place, it will be changed in all other instances automatically.

My recommendation would be: to create a custom module/global custom module with the input field and everything that you'll need for it like the whole JS, CSS and everything. If you're working in a child-theme or custom theme, you can optimize the code further. 

p.s:
If you need, developer support, I'll be happy to chat

best, 

Anton