×

Hupspot HTML Embed Guide

/ CRM, Hubspot / By

How to Use Hubspot to Add HTML Embed Codes

Adding HTML embed codes with Hubspot lets you enrich pages and posts with videos, forms, social feeds, and interactive widgets without custom development.

This guide walks you through where to find embed codes, how to paste them into your Hubspot content, and how to keep everything secure, responsive, and on brand.

What Is an HTML Embed Code in Hubspot?

An HTML embed code is a short snippet of code you paste into a page or blog post that loads content from another platform. With Hubspot, you can safely host these snippets inside rich-text modules or dedicated embed modules.

Common examples include:

  • YouTube or Vimeo videos
  • Google Maps location embeds
  • Podcast players
  • Social media posts and feeds
  • Forms, surveys, and booking widgets

When used correctly in Hubspot, embeds help you add functionality while keeping content creation simple for marketers.

Where to Get HTML Embed Codes for Hubspot

Most third-party tools offer a built-in Embed or Share option. The exact steps differ, but the pattern is similar.

Example: Getting a YouTube Embed for Hubspot

  1. Open the video on YouTube.
  2. Click the Share button below the video.
  3. Select Embed.
  4. Copy the iframe code provided.

The code usually begins with <iframe and ends with </iframe>. This is what you will paste into Hubspot.

Example: Getting a Google Maps Embed

  1. Go to Google Maps and search for your business.
  2. Click the Share button.
  3. Select Embed a map.
  4. Choose a size if needed and copy the iframe embed code.

You can repeat a similar process for other tools such as Typeform, Calendly, and many more before pasting into your Hubspot content.

How to Add HTML Embeds to Hubspot Blog Posts

Hubspot blog editors support embeds directly inside the rich-text area, and in some cases via an HTML module, depending on the template.

Step-by-Step: Embedding in the Classic Blog Editor

  1. In your Hubspot dashboard, go to Marketing > Website > Blog.
  2. Create a new post or edit an existing one.
  3. Click into the rich-text area where you want the embed to appear.
  4. Switch from the visual editor to the HTML or Source code view (label may vary).
  5. Paste the HTML embed code you copied from the external tool.
  6. Switch back to visual mode to confirm that the preview looks correct.
  7. Update or publish the blog post.

If your Hubspot theme includes a custom HTML module, you can drag that module into your layout, then paste the code inside it for clearer separation.

Editing or Removing an Embed in Hubspot

  1. Open the blog post in edit mode.
  2. Switch to the HTML or source view.
  3. Locate the embed code block, usually starting with <iframe.
  4. Edit the attributes if necessary (for example, width or height).
  5. Delete the code entirely if you no longer need the embed.
  6. Save and update the post.

Always view the live page after changes to confirm the embed still works correctly in Hubspot.

How to Embed HTML in Hubspot Website Pages

Hubspot website pages are built with the drag-and-drop editor, which makes placing embeds within specific sections straightforward.

Using the Rich-Text Module in Hubspot Pages

  1. In Hubspot, navigate to Marketing > Website > Website Pages.
  2. Open the page you want to edit.
  3. Click the rich-text module where you want your embed.
  4. Switch to the HTML or Source code option.
  5. Paste your HTML embed code exactly where it should appear.
  6. Click Apply or Save on the module.
  7. Preview the page, then publish when satisfied.

Using a Custom HTML or Embed Module in Hubspot

Some themes or templates include a dedicated HTML or embed module. This is ideal for keeping layout and embeds organized.

  1. In the page editor sidebar, locate the Custom HTML or Embed module.
  2. Drag it to the section where you want the embedded content.
  3. Click the newly added module to configure it.
  4. Paste your embed code into the provided field.
  5. Save the module and preview the page.
  6. Publish once you confirm the embedded content loads correctly.

This method is particularly useful in Hubspot when you want to reuse similar layouts across multiple pages.

Best Practices for Safe HTML Embeds in Hubspot

Any time you paste code into Hubspot, you should follow security and performance best practices.

Only Use Trusted Sources

  • Copy embed codes only from reputable platforms.
  • Avoid scripts or widgets from unknown domains.
  • Check that the embed uses https to avoid browser security warnings.

Keep Embeds Responsive

Many default iframe snippets use fixed widths and heights, which can break mobile layouts in Hubspot.

  • Use responsive embed options when available.
  • Adjust width to 100% where possible.
  • Test embeds on multiple device sizes using Hubspot previews.

Limit the Number of Heavy Embeds

  • Too many video or script-heavy embeds can slow pages.
  • Prioritize the most valuable embeds for each Hubspot page.
  • Consider lazy-loading options when supported by the embed provider.

Troubleshooting HTML Embeds in Hubspot

Sometimes embeds will not display as expected inside Hubspot. Common issues include missing content, layout problems, or blocked scripts.

Embed Not Showing at All

  • Confirm that you pasted the full code snippet.
  • Check that you are in HTML or source mode, not visual-only mode.
  • Review whether your Hubspot template restricts certain tags or scripts.

Layout or Alignment Issues

  • Check for inline styles setting fixed widths.
  • Place the embed in its own module or section in Hubspot.
  • Use theme classes to control alignment rather than inline styling.

Scripts Being Stripped or Blocked

  • Some script tags might be sanitized for security.
  • Use iframe-based embeds whenever available in Hubspot.
  • Review the capabilities of your template and, if needed, consult a developer.

Additional Resources for Hubspot HTML Embeds

To go deeper into embed options and editor behavior, review the official guide from Hubspot here: Hubspot HTML embed tutorial.

If you want strategic help combining technical setup with organic growth and conversion-focused optimization around Hubspot, you can also explore consulting services at Consultevo.

By following these steps and best practices, you can use Hubspot to safely embed powerful third-party content, improve engagement, and maintain clean, responsive layouts across your entire site.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights