How to Embed the HubSpot Meeting Widget on a Page

Embedding a Hubspot meeting widget on your website lets visitors instantly book time with you without leaving the page. This guide explains how to generate the embed code, add it to your site, and adjust how the widget appears so your scheduling experience feels seamless and professional.

Follow the steps below to place your meeting link on landing pages, blog posts, or any external page that supports HTML embeds.

Before You Embed a HubSpot Meeting Widget

Before adding the widget to your site, make sure you have a meeting link already created in your HubSpot account. You must also have access to edit the page where you want to place the widget.

A published meeting link in your meetings tool.
Permission to edit your CMS, website, or landing page HTML.
Any tracking settings or cookies banners configured in your HubSpot portal if required.

The embedding process is similar whether you place the widget on a HubSpot-hosted page or on an external site built with another platform.

How to Get the HubSpot Meeting Embed Code

First, you need the embed code for your specific meeting link. This code is generated in your meetings tool and can then be pasted anywhere that supports custom HTML.

Step 1: Open the Meeting in HubSpot

Sign in to your HubSpot account.
Navigate to your Sales or Meetings area (depending on your portal layout).
Open the meetings dashboard to see your list of available links.
Locate the meeting link you want to embed on your site.

Step 2: Copy the Widget Embed Code

In the meetings dashboard, click the name of the meeting.
In the meeting details panel, find the option to Share or Embed the link.
Select the Embed option to display the HTML snippet.
Copy the full embed code provided by HubSpot.

The code usually appears as an HTML <iframe> or script snippet that loads your booking page directly inside your website.

Embed HubSpot Meeting Widget on HubSpot Pages

If your site or landing pages are hosted in HubSpot, you can add the meeting widget using the page editor. This keeps the experience consistent across your marketing assets.

Step 3: Add the Embed Code to a HubSpot Page

In your HubSpot account, go to Marketing > Website > Website Pages or Landing Pages.
Open the page where you want the meeting widget to appear.
In the drag-and-drop editor, add a Rich text or Custom HTML module to the desired section.
If you use a rich text module, switch to the HTML or Source code view.
Paste the meeting embed code into the module.
Click Apply or Save, then Update or Publish the page.

After publishing, preview the page to confirm the booking widget loads correctly and is visible on both desktop and mobile.

Embed HubSpot Meeting Widget on External Websites

You can also place the same widget on external pages built with WordPress, Webflow, Wix, or any CMS that permits custom HTML snippets.

Step 4: Insert the Code in an External CMS

Open your website editor or CMS.
Navigate to the page where you want visitors to book a meeting.
Add a new HTML or Code block in the layout.
Paste the HubSpot meeting embed code you copied earlier.
Save and publish the page.

Most builders display a live preview once the page is updated. If your platform caches pages, clear cache to ensure the latest widget version appears.

Customize How the HubSpot Meeting Widget Displays

The default embed settings typically work well, but you may want to adjust the widget appearance to match your layout or design standards.

Control Size and Alignment

You can often change the width, height, or alignment of the widget with simple HTML or CSS adjustments:

Set a fixed width or use percentage width for responsive layouts.
Center the widget with your page builder tools or custom styles.
Place the widget in a column layout alongside explanatory text or an image.

If you use the original HubSpot meeting code, avoid removing required script references, as they are needed for proper loading.

Adjust Placement on the Page

Placement can strongly influence conversions. Consider placing the widget:

Near the top of a contact or pricing page.
At the end of a blog post where readers are ready to talk.
On a dedicated scheduling page linked from your main navigation.

Experiment with placements and measure booking rates in your HubSpot reports to determine which spots perform best.

Troubleshooting HubSpot Meeting Widget Embeds

If your widget does not appear or behaves unexpectedly, a few common issues are worth checking.

Widget Not Loading

Confirm you copied the full embed code from HubSpot without edits.
Check for JavaScript errors in your browser console.
Ensure your CMS or builder does not strip iframe or script tags.
Turn off ad blockers or privacy extensions temporarily to test.

Layout or Styling Issues

If the widget looks narrow or cut off, adjust the container width.
Use responsive columns so the widget displays correctly on mobile.
Avoid placing the embed inside elements that hide overflow unless intentional.

Best Practices for Using HubSpot Meeting Widgets

Once the widget is embedded, a few best practices will help you get more meetings booked and ensure the experience feels smooth.

Use clear copy above the widget to set expectations.
Keep your meeting duration options simple and limited.
Connect your calendar correctly inside HubSpot so availability is accurate.
Test the entire booking flow as a visitor to confirm reminders and confirmation emails work.

Embedding the widget on high-intent pages such as product demos, pricing, or contact pages can significantly increase booked meetings.

Where to Learn More About HubSpot Meetings

For detailed, step-by-step reference instructions directly from the platform, review the official documentation on how to embed the meeting widget on a page provided by HubSpot. You can access the source guide at this HubSpot knowledge base article.

If you need help with implementation strategy, conversion optimization, or broader CRM setup, you can also consult specialists. A good starting point is Consultevo, which focuses on modern marketing operations and implementation support.

Once your HubSpot meeting widget is live, monitor bookings, adjust your layout, and continue refining the experience so visitors can schedule time with your team in just a few clicks.

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

“`