Incorporate the HubSpot Application

You have the option to embed HubSpot on your website utilizing the Verified HubSpot Application accessible via the Webflow Marketplace. The Application allows you to insert and design HubSpot forms, link your current Webflow forms to your HubSpot instance, introduce HubSpot elements and chatbots to your Webflow website, and configure site monitoring.

If you seek details concerning the traditional, exclusive-to-Enterprise HubSpot forms integration, please consult our tutorial on HubSpot forms.

Within this guide, you will discover:

1. Instructions for installing and permitting the HubSpot Application
2. The features and functionality of the HubSpot Application   
3. A guide on how to uninstall the HubSpot Application
4. FAQs and tips for troubleshooting

Guide for installing and permitting the HubSpot Application

To operate the HubSpot Application, you must initially establish a HubSpot profile. Then, you can set up and customize the Application:

1. Visit the details page for the HubSpot Application
2. Press Add to site
3. Select the Webflow site you intend to link to the HubSpot Application
4. Review the permissions requested 
5. Tap Authorize App
6. Select your HubSpot account
7. Tap Choose account
8. Tap Connect App —you will be redirected to your Dashboard

Crucial: You are unable to connect the HubSpot Application to an entire Workspace. Be certain to select the specific sites you wish to integrate with the Application when installing and permitting it. 

Upon successful installation of the Application, you can access it in the Designer:

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

Find out more regarding utilizing Applications in the Designer.

Features and capabilities of the HubSpot Application

The HubSpot Application enables marketers and site proprietors to establish a direct connection between their Webflow site and HubSpot, encompassing five essential functionalities:

1. Embed and style HubSpot forms on Webflow
2. Link your Webflow forms to HubSpot
3. Incorporate HubSpot elements in your Webflow site
4. Handle site monitoring
5. Integrate a HubSpot chatbot into your Webflow site

Embed and customize HubSpot forms on Webflow

The HubSpot Application allows you to insert any supported HubSpot forms on the Designer canvas to tailor your forms according to your site’s appearance and style. To embed a form: 

1. Launch the HubSpot Application
2. Click Add existing HubSpot form to your page 
3. Select the location on the canvas where you want to embed the form
4. Choose the desired HubSpot form to embed (if supported)
5. Select whether to adopt the form’s styling from HubSpot or utilize an unstyled version
6. Click Add Form to Page
7. (Optional) Customize the form to your preferences

Find out more about managing HubSpot forms. 

Vital: Some HubSpot form fields, like reCAPTCHA fields, are currently unsupported due to limitations of the HubSpot developer platform. If the Application notifies you that embedding your form is not feasible, or if you opt for an iframe solution, you can paste the form’s Share URL (obtainable in HubSpot) into the HubSpot Share URL field in the Application to embed the form as an iframe. While you will lose the ability to style the embedded form via iframe, it will automatically update to reflect any alterations made on the Hubspot end.

Connect your Webflow forms to HubSpot

You also have the capacity to link existing Webflow forms to your HubSpot account using the HubSpot Application. To establish the connection: 

1. Launch the HubSpot Application
2. Click Map Webflow form to HubSpot form 
3. Select the form on the Webflow canvas that you wish to map
4. Ensure that the selected form contains form labels
5. Match the HubSpot form field with each corresponding Webflow form field
6. Click Save

Below is a summary of compatible form field types across Webflow and HubSpot. For each Webflow form input type mentioned, you will find the relevant HubSpot input types for seamless data correspondence. Use this guide as a resource to streamline your form mapping procedure:

Reminder: The Application does not facilitate mapping to password fields in HubSpot.

Techniques for managing linked forms

You can modify the connections or detach the mapping from any form on the page by launching the Application menu and choosing Connected forms. 

Find out more about managing HubSpot forms. 

Please Note: To have the Webflow form appear under Connected Webflow forms, you must access the page containing the form.If you fail to discover your form under Associated Webflow forms, ensure you are positioned correctly on the Webflow page.

Include HubSpot resources to your Webflow site

The HubSpot Application enables you to explore and integrate any resources from your HubSpot account into your Webflow site. To commence: 

1. Commence the HubSpot Application
2. Press Integrate HubSpot resources into your site
3. Inquire and opt for the resource you wish to bring in
4. Select the component on your canvas where you want to include the resource
5. Press Include on the page

Find out more about managing HubSpot assets.

Note: The assets introduced to your Webflow site from your HubSpot assets through the Application are not appended to the Webflow Assets section.

Supervise website tracking

The unique HubSpot tracking code is specific to each HubSpot account and enables HubSpot to observe your website traffic. To control website tracking:

1. Commence the HubSpot Application
2. Press Supervise website tracking
3. Switch Enable HubSpot site tracking code to On
4. Press Save

To make sure the tracking is operational, you must publish your site.‍

Get more insights on HubSpot’s tracking code.

Note: Once the HubSpot tracking code is activated, HubSpot will automatically monitor all form submissions across your site (even if the form is not linked to HubSpot), and will store them in a new form using the Webflow Form ID. If this is not desired, you are able to turn off this feature in your HubSpot account settings.

Incorporate a HubSpot chatbot to your Webflow site

The Application also gives systematic instructions for adding a HubSpot chatbot to your Webflow site using custom code. 

Note: The capacity for custom code is accessible on any premium Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.

To begin:

1. Commence the HubSpot Application
2. Press Add a HubSpot chatbot to your site
3. Press View HubSpot chatbot library to inspect and modify your assortment of HubSpot chatbots
4. Ensure your HubSpot tracking code is activated
5. Publish your site 

Discover more about setting up and configuring HubSpot chatbots.

How to erase the HubSpot Application

There are two methods to remove the HubSpot Application from your Webflow site: from Site settings, or from the Designer.

To remove the Application via Site Settings:

1. Go to Site settings > Apps &Integrations tab > Linked Apps
2. Locate HubSpot
3. Press View Details 
4. Press Erase App

To uninstall via the Designer:

1. Open the Applications panel
2. Press HubSpot
3. Press Delete app 

FAQ and resolution hints

The HubSpot Application is open, but there is no data loading.

Access Site settings > Applications & Integrations tab and confirm that the HubSpot Application is listed as an installed app. If it is absent, visit the HubSpot Application detail page and reinstall the Application on your site. If HubSpot is present, open the Applications panel, launch the HubSpot Application, and click Manage connections to view all your HubSpot accounts connected to Webflow sites.

I embedded a HubSpot form through the Application, but the submissions are not transferring accurately to HubSpot.

Insert the form’s Share URL (accessible in HubSpot) into the HubSpot Share URL field in the Application to embed the form as an iframe and validate if the issue continues. If it does, please reach out to Webflow’s customer support team for further guidance.

I modified my HubSpot form, however, the updates are not automatically reflecting on my Webflow site.

After revising your HubSpot form, you can commence the Application in the Designer and substitute the existing HubSpot form with the revised one. For instantaneous synchronization of changes between HubSpot and Webflow, we advocate using the Share URL for your form to embed as an iframe.

I connected my Webflow form to HubSpot using the Application, yet I do not see submissions.

Verify that your Webflow form fields contain field designations. If designations are included, please contact Webflow’s customer support team for further assistance.

How can I validate which HubSpot accounts are linked to each Webflow site?

Access Site settings > Applications & Integrations tab and confirm that the HubSpot Application is recognized as an installed app. If it is missing, visit the HubSpot Application detail page and reinstall the Application on your site. If HubSpot is included, open the Applications panel, launch the HubSpot Application, and press Manage connections to view all your HubSpot accounts linked to Webflow sites. 

I embedded a HubSpot form through the Application but certain fields or logic are not carried over.

We suggest either entering the Share URL for the form and embedding it as an iframe using the Application, or embed the form as a custom code embed element.

I incorporated an asset from my HubSpot resources into my site, but the image does not appear in my Webflow Assets panel.

Assets introduced to your Webflow site from your HubSpot resources using the Application will not automatically populate your Webflow Assets panel.

If you are still encountering challenges with the HubSpot Application, please get in touch with Webflow’s customer support team.