Integrate the HubSpot App

You can integrate HubSpot on your site using the Certified HubSpot App available through the Webflow Marketplace. The App lets you embed and style HubSpot forms, map your existing Webflow forms to your HubSpot instance, add HubSpot assets and chatbots to your Webflow site, and set up site tracking.

If you are looking for information about the legacy, Enterprise-only, HubSpot forms integration, please visit our lesson on HubSpot forms.

In this lesson, you’ll learn:

1. How to install and authorize the HubSpot App
2. HubSpot App features and functionality   
3. How to uninstall the HubSpot App
4. FAQ and troubleshooting tips

How to install and authorize the HubSpot App

To use the HubSpot App, you’ll first need to create a HubSpot account. Then, you can install and configure the App:

1. Visit the HubSpot App detail page
2. Click Add to site
3. Choose the Webflow site you’d like to connect to the HubSpot App
4. Review the requested scopes 
5. Click Authorize App
6. Select your HubSpot account
7. Click Choose account
8. Click Connect App — this will redirect you to your Dashboard

Important: You cannot connect the HubSpot App to an entire Workspace. Please be sure to select the individual sites you wish to connect the App to when installing and authorizing the App. 

Once you’ve successfully installed the App, you can launch it in the Designer:

1. Open the Apps panel 
2. Hover over the HubSpot App
3. Click Launch

Learn more about using Apps in the Designer.

HubSpot App features and functionality

The HubSpot App makes it possible for marketers and site owners to connect their Webflow site directly to HubSpot and includes five key pieces of functionality:

1. Embed and style HubSpot forms in Webflow
2. Connect your Webflow forms to HubSpot
3. Add HubSpot assets to your Webflow site
4. Manage site tracking
5. Add a HubSpot chatbot to your Webflow site

Embed and style HubSpot forms in Webflow

The HubSpot App lets you embed any supported HubSpot forms on the Designer canvas so you can style your forms to match your site and design. To embed a form: 

1. Launch the HubSpot App
2. Click Add existing HubSpot form to your page 
3. Select the element where you wish to embed the form on the canvas
4. Choose the HubSpot form you wish to embed (if supported)
5. Choose whether to inherit the form styling from HubSpot or use an unstyled version of the form
6. Click Add Form to Page
7. (Optional) Style the form however you like

Learn more about managing HubSpot forms. 

Important: Certain HubSpot form fields, such as reCAPTCHA fields, are not yet supported due to limitations of the HubSpot developer platform. If the App alerts you that it is unable to embed your form, or if you prefer to use an iframe, you can paste the form’s Share URL (available in HubSpot) into the HubSpot Share URL field in the App to embed the form as an iframe. While you won’t be able to style the iframe embedded form, this form will automatically reflect any changes made on the Hubspot side.

Connect your Webflow forms to HubSpot

You can also connect existing Webflow forms to your HubSpot account using the HubSpot App. To connect an existing form: 

1. Launch the HubSpot App
2. Click Map Webflow form to HubSpot form 
3. Select the form you wish to map from on the Webflow canvas
4. Check to ensure the form you selected has form labels present
5. Select the matching HubSpot form field for each corresponding Webflow form field
6. Click Save

Below is an overview of the compatible form field types across Webflow and HubSpot. For each Webflow form input type listed, you’ll find the corresponding HubSpot input types that ensure seamless data integration. Use this guide as a tool to streamline your form mapping process:

Note: The App does not support mapping to password fields in HubSpot.

How to manage connected forms

You can update the connections or remove mapping from any form on the page by opening the App menu and selecting Connected forms. 

Learn more about managing HubSpot forms. 

Note: For the Webflow form to appear under Connected Webflow forms, you must view the page where the form is located. If you don’t find your form under Connected Webflow forms, make sure you’re on the right page in Webflow. 

Add HubSpot assets to your Webflow site

The HubSpot App lets you view and add any assets from your HubSpot account to your Webflow site. To get started: 

1. Launch the HubSpot App
2. Click Import HubSpot assets to your site 
3. Search and select the asset you which to import
4. Select the element on your canvas into which you’d like to add the asset
5. Click Add to page
   

Learn more about managing HubSpot assets.

Note: Assets added to your Webflow site from your HubSpot assets using the App are not added to the Webflow Assets panel.

Manage site tracking

The HubSpot tracking code is unique to each HubSpot account and allows HubSpot to monitor your website traffic. To manage site tracking:

1. Launch the HubSpot App
2. Click Manage site tracking
3. Toggle Enable HubSpot site tracking code to On
4. Click Save
   

In order to ensure tracking is active, you will need to publish your site.‍

Learn more about HubSpot’s tracking code.

Note: Once your HubSpot tracking code is enabled, HubSpot will automatically track all form submissions across your site (whether the form has been mapped to HubSpot or not), and will store them in a new form using the Webflow Form ID. If you don’t want this to happen, you can disable this functionality in your HubSpot account settings.

Add a HubSpot chatbot to your Webflow site

The App also provides step by step instructions for adding a HubSpot chatbot to your Webflow site using custom code. 

Note: Custom code capabilities are available on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.

To get started:

1. Launch the HubSpot App
2. Click Add a HubSpot chatbot to your site
3. Click View HubSpot chatbot library to view and modify your library of HubSpot chatbots
4. Ensure that your HubSpot tracking code is enabled
5. Publish your site 

Learn more about setting up and configuring HubSpot chatbots.

How to uninstall the HubSpot App

There are two ways you can uninstall the HubSpot App from your Webflow site: from Site settings, or from the Designer.

To uninstall the App via Site Settings:

1. Go to Site settings > Apps & Integrations tab > Connected Apps
2. Find HubSpot
3. Click View Details 
4. Click Uninstall App

To uninstall the App via the Designer:

1. Open the Apps panel
2. Click HubSpot
3. Click Remove app 

FAQ and troubleshooting tips

The HubSpot App is open, but nothing is loading.

Open Site settings > Apps & Integrations tab and check that the HubSpot App is listed as an installed app.If the HubSpot App is not listed, visit the HubSpot App detail page and reinstall the App on your site. If HubSpot is listed, open the Apps panel, launch the HubSpot App, and click Manage connections to view all of your HubSpot accounts connected to Webflow sites.

I embedded a HubSpot form using the App, but submissions aren’t coming through to HubSpot correctly.

Paste the form’s Share URL (available in HubSpot) into the HubSpot Share URL field in the App to embed the form as an iframe and see if the issue persists. If it does, please contact Webflow’s customer support team for further assistance.

I made changes to my HubSpot form, but they aren’t automatically updating on my Webflow site.

After making changes to your HubSpot form, you can launch the App in the Designer and replace the existing HubSpot form with the new one. If you need your changes instantly synced between HubSpot and Webflow, we recommend using the Share URL for your form to embed as an iframe.

I mapped my Webflow form to HubSpot using the App, but don’t see submissions.

Please ensure your Webflow form fields have field labels. If labels are present, please contact Webflow’s customer support team for further assistance.

How can I check which HubSpot accounts are connected to each Webflow site?

Open Site settings > Apps & Integrations tab and check that the HubSpot App is listed as an installed app. If the HubSpot App is not listed, visit the HubSpot App detail page and reinstall the App onto your site. If HubSpot is listed, open the Apps panel, launch the HubSpot App, and click Manage connections to view all of your HubSpot accounts connected to Webflow sites. 

I embedded a HubSpot form using the App but certain fields or logic don’t carry over.

We recommend you either enter the Share URL for the form and embed it as an iframe using the App, or embed the form as a custom code embed element.

I added an asset from my HubSpot assets to my site, but the image isn’t showing up in my Webflow Assets panel.

Assets added to your Webflow site from your HubSpot assets using the App will not also be automatically added to your Webflow Assets panel.

If you’re still experiencing issues with the HubSpot App, please contact Webflow’s customer support team.