Add Widgets to WordPress with HubSpot

Using Hubspot with WordPress is an effective way to add powerful marketing and sales widgets to your site without complex coding. By connecting the two platforms, you can quickly embed forms, live chat, pop-ups, and analytics that improve lead generation and user engagement.

This guide walks you through how to add widgets to a WordPress page or post, following the same approach outlined in the official source tutorial, and shows you how to make the most of the integration.

Why Connect WordPress with HubSpot

Before adding any widget, you need to understand what the WordPress and HubSpot connection can do for you. Once the plugin is installed, you can place marketing tools across your site from a central dashboard.

Key benefits include:

• Embed forms and pop-ups on any page or post.
• Add live chat and chatbots to support visitors.
• Track contacts, page views, and conversions.
• Sync leads directly to your CRM without manual work.

These advantages make the integration especially useful for marketers, agencies, and businesses that want consistent tracking and better lead capture without juggling multiple tools.

Step 1: Install the HubSpot WordPress Plugin

The first step is to set up the official plugin that links WordPress with your HubSpot account.

1. Log in to your WordPress admin dashboard.

2. In the left menu, go to Plugins > Add New.

3. Search for “HubSpot – CRM, Email Marketing, Live Chat, Forms & Analytics.”

4. Click Install Now, then click Activate.

After activation, a new menu item appears in your dashboard sidebar, giving you access to your connected tools.

Step 2: Connect Your Site to Your HubSpot Account

Once the plugin is activated, you need to connect it to your existing account or create a new one. This link allows widgets and tracking tools from HubSpot to work on your WordPress site.

1. Click the new HubSpot menu item in your WordPress sidebar.

2. If you already have an account, sign in with your credentials. Otherwise, follow the prompts to create a free account.

3. Select the account you want to connect and confirm the connection.

When the connection is complete, you will see a dashboard inside WordPress with navigation to contacts, forms, email, and other tools.

Step 3: Create a Widget in HubSpot

In WordPress, widgets from this integration come from tools created in your HubSpot portal, such as forms, chat, and pop-ups. You configure these first, then place them on your pages.

Create a HubSpot Form Widget

A form is one of the most common widgets for capturing leads on key pages.

1. In the WordPress dashboard, click the HubSpot menu.

2. Open the Forms tool from the embedded interface.

3. Click Create form and choose a form type, such as embedded form, standalone page, or pop-up.

4. Select a template or start from scratch.

5. Drag and drop fields, customize text, and adjust styling options.

6. Configure follow-up options, such as email notifications or redirect URLs.

7. Save and publish the form.

When the form is published, it becomes available as a widget that you can insert into WordPress content.

Create a HubSpot Chat or Pop-Up Widget

You can also add chat or pop-up widgets to engage visitors in real time.

1. From the same HubSpot menu in WordPress, open the conversations or pop-up tools (depending on your portal layout).

2. Set up a live chat or chatbot, customize the greeting, and define targeting rules.

3. For pop-ups, choose when they appear, such as on exit intent or after a time delay.

4. Save and activate the tool so it can load on your pages.

Active tools will automatically appear on pages that match your targeting rules, acting as widgets without requiring manual code placement.

Step 4: Add a HubSpot Widget to a WordPress Page

There are two common ways to place widgets on a page or post: using Gutenberg blocks or using shortcodes or embed codes provided by HubSpot.

Use the HubSpot Gutenberg Block

If you are using the WordPress block editor, the plugin typically adds a dedicated content block that pulls in your tools.

1. Edit the page or post where you want to add the widget.

2. Click the + button to add a new block.

3. Search for the HubSpot block.

4. Select the type of widget you want to insert, such as a specific form.

5. Choose your published form or tool from the dropdown list.

6. Update or publish the page.

After saving, visit the page on the front end to confirm the widget displays as expected.

Use an Embed Code from HubSpot

Some widgets, especially forms and CTAs, provide an embed code you can paste into WordPress.

1. Open the specific tool in your HubSpot portal from the integrated menu.

2. Locate the Share or Embed option and copy the provided HTML code.

3. In WordPress, edit your page or post.

4. Add a Custom HTML block (or switch to code editor mode).

5. Paste the embed code.

6. Preview and publish the page.

This method is particularly useful if you need more granular placement within complex layouts, or if you are using a page builder that handles HTML blocks well.

Step 5: Test and Optimize Your HubSpot Widgets

After adding any widget, it is important to test its behavior and then use the analytics available through HubSpot to refine performance.

• Visit the page in an incognito window to confirm forms, chat, or pop-ups load correctly.

• Submit a test entry to verify that contact records are created in your CRM.

• Check analytics in your portal for views, submissions, and conversation volume.

• Adjust form fields, copy, colors, or display rules to improve conversions.

This ongoing optimization is where the integration shows its full value: each widget on your WordPress site feeds reliable data into your contact records and dashboards.

Best Practices for Using HubSpot Widgets in WordPress

To get the most from your setup, follow a few best practices when planning and placing widgets across your site.

• Keep forms short on high-traffic pages to reduce friction.

• Use targeted pop-ups instead of showing them on every page.

• Place chat on high-intent pages such as pricing or demo requests.

• Ensure your widgets match your site’s branding and color palette.

• Regularly clean and segment contacts that come in through these tools.

If you want advanced strategy support or implementation help, you can also work with a specialist agency such as Consultevo, which focuses on data-driven marketing setups.

Learn More About WordPress and HubSpot

For detailed, official instructions, examples, and screenshots related to adding widgets and using marketing tools, refer to the original tutorial on the HubSpot blog. It provides step-by-step visuals that complement this walkthrough.

You can read the full guide here: How to Add a Widget to a WordPress Page.

By combining the power of WordPress for content management with the marketing and CRM features available through HubSpot, you gain a flexible, scalable system for capturing and nurturing leads, all while keeping control over how widgets appear on your 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

“`