How to Add the Hubspot Visualforce Window in Salesforce

Integrating Hubspot with Salesforce allows your team to see marketing and sales insights in one place. By adding the Hubspot Visualforce window to Salesforce page layouts, users can access contact timelines, engagement data, and sync details without leaving their CRM workflow.

Why Add the Hubspot Visualforce Window to Salesforce

When you connect Salesforce with your marketing automation tools, the Visualforce window becomes a key part of your daily process. The embedded Hubspot window shows essential contact and company information pulled directly from your connected account.

Adding this panel helps you:

• Give sales and support teams full visibility into engagement history.
• Reduce tab switching between systems.
• Ensure records stay aligned between platforms.
• Highlight key activities such as form submissions, email interactions, or lifecycle changes.

Before you begin, confirm that your integration is fully installed and that your Salesforce user profile has permission to edit page layouts.

Prerequisites for the Hubspot Visualforce Panel

Before inserting the Hubspot Visualforce window on your layouts, you should verify several configuration steps inside Salesforce.

Confirm the Hubspot Integration Package

Make sure the integration package that adds the Visualforce components is installed in your Salesforce org. This usually happens during initial setup of the connector.

• Check the Installed Packages list in Salesforce Setup.
• Look for the integration package name related to your marketing platform.
• Verify that the package status is active and not deprecated.

Check Salesforce Permissions and Profiles

Your user must be able to view and edit page layouts to add the Hubspot panel. If you do not see required options, contact your Salesforce administrator.

• Confirm you have the right profile or a permission set that allows layout editing.
• Make note of which objects (Contact, Lead, Account, or Opportunity) should display the embedded window.

Once these basics are ready, you can begin adding the Visualforce component to each relevant layout.

Step-by-Step: Add the Hubspot Visualforce Window to a Layout

Follow these steps to place the Visualforce window on an object layout inside Salesforce Classic. The steps can also guide you conceptually when working with Lightning, depending on your configuration.

1. Navigate to Salesforce Setup

1. In Salesforce, click the Setup link in the top navigation bar.
2. Under Build, expand Customize to see your standard objects.
3. Select the object you want to update, such as Contacts or Leads.

2. Open the Desired Page Layout

1. Within the object menu, click Page Layouts.
2. Find the specific layout you want to edit (for example, Contact Layout or a custom layout).
3. Click Edit next to that layout.

The layout editor lets you drag and drop fields, related lists, and Visualforce components onto the page.

3. Locate the Hubspot Visualforce Component

1. In the layout editor palette, click the Visualforce Pages section.
2. Look for the Visualforce page that corresponds to your integration. It typically references Hubspot in its name or description.
3. Select this Visualforce page component to prepare for placement on the layout.

4. Drag the Panel onto the Layout

1. Drag the Hubspot Visualforce component from the palette to the desired section on the layout.
2. Common placements include the main detail area or a separate section labeled “Marketing Insights” or “Hubspot Activity”.
3. Drop the component where it will be most visible to your users.

You can create a new section before dropping the component if you prefer a dedicated area for marketing data.

5. Configure the Hubspot Panel Properties

1. After placing the component, click the wrench or properties icon on the Visualforce window.
2. Set an appropriate height in pixels to ensure the Hubspot data is easy to read, for example 300–500 pixels.
3. Adjust the width and show scrollbars options as needed for your layout.
4. Confirm that the component is set to display on the correct profiles if your org uses profile-specific layouts.

When you are satisfied with the configuration, click OK to save the component properties.

6. Save and Test the Updated Layout

1. Click Save in the page layout editor.
2. Navigate to a record of the object type you updated (for example, a single contact or lead).
3. Confirm that the Hubspot Visualforce panel appears and displays data.
4. If the panel is blank or shows an error message, check user permissions and the integration configuration.

Repeat these steps for each object where you want to surface the data, such as Contacts, Leads, Accounts, or Opportunities.

Managing the Hubspot Visualforce Window After Setup

Once the panel is live, you may need to adjust settings based on feedback from your team.

Reposition or Resize the Hubspot Panel

If users report that the panel appears too low on the page or is difficult to view, you can revise the layout at any time.

• Return to Setup > Customize > [Object] > Page Layouts.
• Edit the layout and drag the Hubspot Visualforce panel to a new section.
• Adjust height and width in the component properties for optimal visibility.

Ensure Hubspot Data Appears Correctly

The Visualforce window should show activity and property data for matching records. If information is missing, consider these checks:

• Verify that the Salesforce record is properly associated with a record in your marketing database.
• Confirm that sync rules are correctly configured between systems.
• Check the integration status for any recent sync errors.

For advanced troubleshooting or additional configuration options, review the official help documentation.

Official Documentation and Further Help

For the most accurate and detailed instructions, refer to the official Salesforce integration documentation. You can find the original help article on adding the Visualforce window here: Add the Visualforce window to Salesforce page layouts.

If you need consulting or implementation support for your CRM and marketing stack, including optimization of your Hubspot integration, consider working with a specialist partner such as Consultevo.

Summary: Making the Most of the Hubspot Visualforce Window

By adding the Hubspot Visualforce window to Salesforce page layouts, you bring key engagement insights directly into your CRM. The process involves installing the integration package, editing object page layouts, dragging the Visualforce component into place, and configuring its display settings.

With the panel properly configured, your team can view contact timelines, recent interactions, and essential metrics while working in Salesforce, enabling faster, more informed decisions without leaving their primary workspace.