How to Embed External Content in HubSpot Pages and WordPress

Using HubSpot to embed external content lets you enhance your website with videos, forms, calendars, and interactive widgets without custom development. This guide walks you through the practical steps to add embed codes in both HubSpot pages and WordPress sites connected to HubSpot tools.

Understanding Embed Codes in HubSpot

An embed code is a snippet of HTML or JavaScript that displays content hosted on another platform inside your site. In HubSpot, you can place that code in page editors, templates, or custom modules to show content such as:

• Video players from platforms like YouTube or Vimeo
• External forms, surveys, and quizzes
• Calendars, chat widgets, and booking tools
• Maps and interactive visualizations

Before adding any embed code to HubSpot, review it for security and compatibility. Only use code from trusted providers and confirm that it supports HTTPS so it loads correctly on secure pages.

Where You Can Embed Content in HubSpot

You can embed external content in several areas of your HubSpot hosted site:

• Website pages and landing pages built with the drag-and-drop editor
• Blog posts created in the content editor
• Custom modules used in themes and page templates
• HubL templates where you manage HTML directly

The options you use depend on whether your site uses drag-and-drop areas, coded templates, or a combination of both.

How to Embed Content in HubSpot Pages

Follow these steps to add an external embed code directly to a page in HubSpot using the editor.

Step 1: Open Your HubSpot Page Editor

1. In your HubSpot account, navigate to Marketing > Website > Website pages or Landing pages.
2. Locate the page where you want to add embedded content.
3. Click the page name, then select Edit to open the page in the content editor.

Step 2: Add a Rich Text or Embed Module

In many HubSpot drag-and-drop templates, you can place external content using a standard rich text module or a dedicated embed module.

1. In the left sidebar, click Add to view available modules.
2. Drag a Rich text module or a module labeled for embeds into your page layout.
3. Select the newly added module to adjust its content.

Step 3: Paste Your Embed Code in HubSpot

Most external tools provide a copy-ready HTML or JavaScript snippet. Use that code inside the HubSpot editor:

1. In the rich text toolbar, click the Insert dropdown or the icon for Source code / <>.
2. In the source code window, paste the full embed code from your external service.
3. Click Save or Insert, then review the module preview on the page.

If the content does not render properly in the preview, publish to a test URL and confirm it displays correctly in a browser. Some scripts load only on the live page, not in the editor preview.

Using HubSpot Custom Modules for Embeds

When you need to reuse the same type of embedded content across multiple pages, building a custom module in HubSpot can save time and keep your layout consistent.

Why Use a Custom Embed Module in HubSpot

• Centralized control over styling and layout
• Easy fields for marketers to paste or configure embed codes
• Reusable across pages, blogs, and templates
• Version control and updates in the design manager

Creating a Custom Module for Embeds

1. In your HubSpot account, go to Marketing > Files and Templates > Design Tools.
2. Click File > New file, choose Module, then select the appropriate type (e.g., Page or Global).
3. Name your module clearly, such as External Embed or Video Embed.
4. Add a Rich text or Code field where users will paste the embed code.
5. Use the module editor to control default padding, width, and alignment.
6. Save, then publish the module so it becomes available in your page editor.

Once published, content editors can drag the custom module into HubSpot pages and paste their embed code into the defined field.

Embedding Content with HubL in HubSpot Templates

For developers working with coded themes, HubL tags enable more advanced embed handling in HubSpot templates.

General HubL Approach to Embeds

Within an HTML + HubL template, you can define module fields that accept raw HTML or embed codes. For example, you might use a text or rich text field and then render it directly inside the template markup so that the external content appears exactly where needed.

This method is helpful when you want to standardize the placement of embedded content and still allow marketers to manage the code from the content editor, rather than editing templates.

How to Embed Content in WordPress with HubSpot

Many teams run their website on WordPress while using HubSpot tools for forms, tracking, and lead capture. In this case, you still embed most third-party content directly within WordPress, but you can also combine it with HubSpot forms or CTAs.

Embedding in WordPress Blocks

1. Log in to your WordPress dashboard and open the page or post where the embed should appear.
2. In the block editor, click the + icon to add a new block.
3. Select a block that supports HTML, such as Custom HTML.
4. Paste your external embed code into that block.
5. Preview or update the page to confirm that the external content displays correctly.

If you are also using the official HubSpot plugin, you can add HubSpot forms or chat widgets on the same page, alongside embedded third-party tools.

Combining WordPress and HubSpot Content

To create a seamless experience, you might embed a video or webinar player in WordPress and place a HubSpot form or CTA directly below it. This approach lets you capture leads in HubSpot while hosting the primary content on another platform.

Best Practices for Secure Embeds in HubSpot

Whether you embed in HubSpot or WordPress, always follow security and performance best practices.

• Use only trusted providers that support HTTPS.
• Avoid embed codes that load excessive tracking scripts or large libraries.
• Test embeds on mobile devices to ensure responsive behavior.
• Limit the number of heavy embeds per page to keep load times fast.
• Review cookies and privacy implications for each provider.

These practices improve user experience and help your HubSpot tracking code collect accurate analytics.

Additional Resources for HubSpot Embeds

For detailed reference instructions directly from the platform, review the official documentation on how to embed content in HubSpot and WordPress here: HubSpot embed content article.

If you need strategic implementation help that combines technical setup, design, and optimization, you can also consult specialists at Consultevo for advanced guidance.

By using embed codes carefully in HubSpot and WordPress, you can extend your site with powerful third-party experiences while keeping content management centralized and efficient.