Add the HubSpot Visualforce window to your Salesforce page layouts

The HubSpot Visualforce window is an iframe that displays a summary of the interactions a Salesforce lead or contact has had in HubSpot. The window shows the contact's HubSpot contact record timeline activities such as form submissions, marketing email sends, HubSpot Score, and includes a link to their HubSpot contact record. In the Visualforce window you can use the filter to filter the timeline activities that display.

You can add the HubSpot Visualforce window to your Salesforce lead and contact page layouts:

• Salesforce Classic
• Lightning Experience

Please note: to view the Visualforce window content, your Salesforce users must also be a user in HubSpot, and logged in to the latter. They can be imported directly into HubSpot using HubSpot's Create user function and will need a minimum of contacts view access in HubSpot.

The Visualforce window can be added to contact, account, and opportunity layouts in Salesforce.

For the Visualforce page to display information on a Salesforce account or opportunity, the account/opportunity must be syncing with a HubSpot company/deal and that company or deal must have an associated, syncing contact.

Timeline information from the corresponding HubSpot company or deal record will not be shown in the Visualforce window. Instead, information from the most recently synced associated contact will be displayed in the window.

Salesforce Classic

• Navigate to your Salesforce account.
• In the upper right, click Setup (or [Your Name] > Setup).
• To add the Visualforce window to your lead page layouts, in the Build section in the left sidebar menu, navigate to Customize > Leads > Page Layouts.
• Or, to add the Visualforce window to a contact page layout, in the Build section in the left sidebar menu, navigate to Customize > Contacts > Page Layouts.
• You'll see a list of page layouts. Click Edit next to a page layout's name. 

Please note: if you have multiple page layouts, you must add the Visualforce window to each page layout you want to display the window on.

• Click the Section item in the toolbar and drag and drop it into the desired location on the page layout.

• In the dialog box, enter a Section Name (e.g., HubSpot Information). Under Layout, select 1-Column. Click OK.

• In the toolbar's left sidebar menu, select Visualforce Pages.
• Click the HubSpot Lead Intelligence or HubSpot Contact Intelligence item in the toolbar and drag and drop it into the newly-created section on the page layout.

• Hover over the new HubSpot Lead Intelligence or HubSpot Contact Intelligence Visualforce window and click the wrench icon in the top right.
• In the dialog box, change the window Height to 315, then click OK.

• In the top left of the toolbar, click Save to apply your layout changes.
• Navigate to a Salesforce lead or contact record to view the HubSpot Visualforce window.

Lightning Experience

• Navigate to your Salesforce account.
• In the upper right, click the gear icon settings and select settings Setup.
• In the left sidebar menu, in the Platform Tools section, navigate to Objects and Fields > Object Manager.
• In the list of objects, click Lead or Contact.
• In the left sidebar menu, navigate to Page Layouts.
• Click the name of a page layout.

Please note: if you have multiple page layouts, you must add the Visualforce window to each page layout you want to display the window on.

• Click the Section item in the toolbar and drag and drop it into the desired location on the page layout.

• In the dialog box, enter a Section Name (e.g., HubSpot Information). Under Layout, select 1-Column. Click OK.

• In the toolbar's left sidebar menu, select Visualforce Pages.
• Click the HubSpot Lead Intelligence or HubSpot Contact Intelligence item in the toolbar and drag and drop it into the newly-created section on the page layout.

• Hover over the new HubSpot Lead Intelligence or HubSpot Contact Intelligence Visualforce window and click the wrench icon in the top right.
• In the dialog box, change the window Height to 315, then click OK.

• In the top left of the toolbar, click Save to apply your layout changes.
• Navigate to a Salesforce lead or contact record and click the Details tab to view the HubSpot Visualforce window.

Please note: the HubSpot Visualforce window can only be added as a section on the Details tab in Lightning Experience. The window cannot be added to any custom tabs or pages.

• Click Filter to view a list of filters that you can segment the contact information with.

Repeat these steps for any other lead or contact page layouts you want to add the HubSpot Visualforce window to.

Resolve Visualforce errors

You may see the following error in your Visualforce window:

No HubSpot info for this contact. This contact couldn't be found. If you think this is an error, please contact your HubSpot account administrator. 

To resolve this error:

• Ensure that the Salesforce record viewed is currently syncing with the correct HubSpot contact.
• Ensure that the user trying to view the Visualforce window has adequate permissions in HubSpot to view that particular contact record.