×

Embed Content in HubSpot Pages

/ CRM, Hubspot / By

How to Embed Content in HubSpot Pages and Blogs

Embedding third-party content into your HubSpot pages and blog posts lets you add videos, forms, calendars, and interactive widgets without custom development. This guide walks you through the exact steps, supported content types, and troubleshooting tips so your embeds display correctly across your site.

What You Can Embed in HubSpot

You can use embed codes from many external tools and platforms, as long as they provide HTML or script snippets. Typical examples include:

  • Video players (YouTube, Vimeo, Wistia)
  • Social feeds or posts
  • Event calendars and booking widgets
  • Surveys and quizzes
  • Forms or chat tools from other providers

These embeds can be placed on website pages, landing pages, and blog posts built with HubSpot tools.

Where HubSpot Embed Codes Can Be Used

Before adding any snippet, confirm where it is supported inside your HubSpot content tools.

Supported HubSpot Content Types

  • Website pages created in the content editor
  • Landing pages published on HubSpot-hosted domains
  • Blog posts using the drag-and-drop editor or classic editor
  • Custom modules built in the design tools

Embed codes are not supported in plain text email content or other fields that strip HTML for security reasons.

Prepare Your Embed Code for HubSpot

Most providers give you a block of HTML or JavaScript to paste. Check the following before using it with HubSpot:

  • Copy the full embed code without editing it.
  • Confirm the code starts with <iframe>, <script>, <div> with inline script, or similar HTML.
  • Make sure the embed provider supports loading content over HTTPS.

If the code looks incomplete or is missing opening or closing tags, regenerate it from the tool that provided it.

How to Embed Content on a HubSpot Page

Use these steps to place an embed code onto a single website or landing page in HubSpot.

Step 1: Open Your HubSpot Page Editor

  1. In your HubSpot account, navigate to Marketing > Website > Website Pages or Landing Pages.
  2. Find the page where you want to add the embedded content.
  3. Click Edit to open the drag-and-drop editor.

Step 2: Add a Rich Text or Embed Module

  1. In the left sidebar, click the Add tab if it is not already active.
  2. Drag a Rich text module or a dedicated Embed / Custom HTML module onto your layout.
  3. Place the module exactly where you want the embedded content to appear.

Step 3: Insert the Embed Code in HubSpot

Once your module is in place, add the actual embed code.

  • Using a Rich Text module:
    1. Click inside the module to open the rich text toolbar.
    2. Click the Insert dropdown.
    3. Select Embed or Insert > Embed depending on your editor view.
    4. Paste your embed code snippet into the popup field.
    5. Confirm and apply the changes.
  • Using an Embed / Custom HTML module:
    1. Select the module in the editor.
    2. Paste the embed code directly into the module’s HTML field.
    3. Apply or save the module changes.

After inserting the snippet, use the page preview to verify that the embed displays correctly on desktop and mobile.

How to Embed Content in a HubSpot Blog Post

You can embed third-party content inside blog posts built with the HubSpot blog tool using a very similar process.

Step 1: Edit Your Blog Post

  1. Go to Marketing > Website > Blog in HubSpot.
  2. Select your blog and locate the post you want to update.
  3. Click Edit to open the blog editor.

Step 2: Add the Embed Code

Depending on your blog editor version, use one of the following methods:

  • Drag-and-drop blog editor:
    1. Drag a Rich text or Custom HTML module into the blog post layout.
    2. Use the same embed insertion steps as for a standard HubSpot page.
  • Classic blog editor:
    1. Place your cursor in the body where the embed should appear.
    2. Click the Insert menu in the toolbar.
    3. Choose Embed and paste the embed code.
    4. Update the post to save your changes.

Preview the post to ensure the embed loads properly in the live blog design.

Using Embed Codes Inside HubSpot Modules

For reusable layouts and theme-based pages, you can place your embed code directly into modules created in the design tools.

Create a HubSpot Custom HTML Module

  1. Navigate to Marketing > Files and Templates > Design Tools in HubSpot.
  2. In your theme or folder, create a new Custom module.
  3. Choose a Rich text or Custom HTML field inside the module.
  4. Paste the embed code into that field or set it as a default value.
  5. Save and publish the module so it becomes available in the page editor.

This approach is ideal when you want the same embed to appear in multiple HubSpot pages or blogs, such as a global video, booking widget, or social feed.

HubSpot Domain and Security Considerations

Embed behavior can depend on where your content is hosted and how your domain is configured.

  • Ensure your HubSpot pages are served over HTTPS so mixed-content warnings do not block embeds.
  • Some providers restrict embedding to allowed domains; add your HubSpot domain in their settings as needed.
  • Ad blockers or browser privacy settings can interfere with some marketing widgets or tracking scripts.

Review your provider documentation if the embed requires domain whitelisting or special configuration for secure sites.

Troubleshooting HubSpot Embed Issues

If your embed does not appear or behaves unexpectedly in HubSpot, use this checklist.

Common Issues and Fixes

  • Nothing appears on the page:
    • Verify you pasted the entire embed code.
    • Confirm the module is visible and not hidden in the layout.
    • Check that the external service is online and publicly accessible.
  • Embed appears in the editor but not on the live page:
    • Clear your browser cache and refresh.
    • Confirm the page has been updated and published from HubSpot.
    • Test in a different browser or an incognito window.
  • Responsive or sizing problems:
    • Check if the provider offers responsive embed options.
    • Adjust the width and height attributes in the embed code only if the provider allows it.
    • Wrap the embed in a container with responsive CSS if you manage theme code in HubSpot.
  • Security or mixed-content warnings:
    • Ensure the embed URL uses https:// instead of http://.
    • Update the source code from the provider if they now offer secure embeds.

For detailed, product-specific notes, review the original HubSpot knowledge base article on using embed codes: embed content using an embed code in HubSpot.

Best Practices for Managing Embeds in HubSpot

Follow these recommendations to keep your embeds stable and easy to maintain across all HubSpot content.

  • Use reusable modules for embeds that appear on many pages.
  • Document which external tools are embedded and where they are used.
  • Regularly review embeds to confirm the external service is still active.
  • Test embeds after major theme or template changes in HubSpot.

When building a larger content strategy around embedded tools and integrations, you may also want structured guidance for SEO and performance. For strategic consulting and technical implementation help, visit Consultevo for additional resources and services.

By following these steps and best practices, you can reliably embed third-party content in HubSpot pages and blogs while maintaining security, performance, and a consistent visitor experience.

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