Are you looking to supercharge your website with the power of HubSpot? With the Webflow update, integrating HubSpot into your website has never been easier. Say goodbye to the days of relying on third-party automation tools or custom code tricks. Now, you can seamlessly connect HubSpot to your Webflow site with just a few clicks, thanks to the new "Apps" feature.

In this tutorial, we'll guide you through the step-by-step process of integrating HubSpot with Webflow using Webflow Apps.

Webflow Apps: The Key to Integration

Webflow Apps is the game-changer when it comes to integrating HubSpot and other tolls with your Webflow site. With just three easy steps, you'll have HubSpot up and running on your site. Let's take a closer look at the integration process.

Webflow Apps

Why Integrate HubSpot with Webflow?

Before we dive into the integration process, let's take a moment to understand the benefits of combining HubSpot and Webflow. HubSpot offers robust lead management and tracking features, while Webflow provides unparalleled design flexibility. By integrating these two powerful tools, you can leverage the centralized lead management of HubSpot and the customizable design options of Webflow. This integration allows you to seamlessly incorporate HubSpot forms, assets, chatbots, and even enable site tracking on your Webflow site. The result? A website that not only looks great but also efficiently manages leads and drives conversions.

Step 1: Install the App

The first step is to install the HubSpot App on your Webflow site or workspace. Head over to the Webflow Designer interface and navigate to the "Apps" tab. From there, select the HubSpot App and click on the install button. This will initiate the installation process for the App on your Webflow site.

Installing Webflow Apps inside the Designer

Step 2: Connect to HubSpot

Once you've installed the HubSpot App, it's time to connect it to your desired HubSpot account. Simply follow the prompts to authenticate your HubSpot account with Webflow. This step ensures that the integration is secure and allows for seamless data transfer between the two platforms.

Adding HubSpot App to Webflow site

Step 3: Launch the HubSpot App

Now that you've installed and connected the HubSpot App, it's time to bring it to life. Head back to the Webflow Designer interface and navigate to the "Apps" panel. From there, locate the HubSpot App and launch it. This will open up a world of possibilities for integrating HubSpot features into your Webflow site.

Launching the HubSpot App

Integrating and Customizing HubSpot Forms with Webflow Apps

One of the most powerful features of this integration is the ability to integrate and customize HubSpot forms on your Webflow site. While HubSpot forms offer centralized lead management, they might not always align with your website's design. With Webflow Apps, you can now integrate a HubSpot form into your Webflow site and fully customize it using Webflow's CSS styling options. Let's walk through the process step by step.

Add your HubSpot form to your site

Step 2: Access the HubSpot App in Webflow

Open your Webflow project and navigate to the "Apps" panel. Locate the HubSpot App and select it. This will open up the App, giving you access to all the HubSpot forms you have created.

Select your the form you want to add

Step 3: Integrate and Customize

Once you're in the HubSpot App, choose the form you wish to integrate into your Webflow site. With Webflow's intuitive interface, you can easily customize the form to match your website's design. Use Webflow's CSS styling options to tweak the form's appearance, ensuring a seamless integration with your site.

You can start styling the form in Webflow

Step 4: Styling a thank you message

Unfortunately, the Webflow designer does not provide an option to style the thank you message of the HubSpot form directly. Upon inspecting the form's code, you'll notice that the thank you message lacks a specific class. However, there is a way to style and target it by utilizing a small snippet of code.

      
<style>

.hubspot-form p {
color: #282855;
text-align: center;
}

</style>
      
    

Copy

To target specific text inside the HubSpot form, you need to add a class to the form. This allows you to make changes to the targeted paragraph without affecting other paragraphs on the page.

Add a HTML Embed to the HubSpot form to style the thank you message

Other Possibilities with Connecting HubSpot to Webflow

The integration between HubSpot and Webflow doesn't stop at forms. Webflow's new Apps functionality opens up a wide range of possibilities for integrating HubSpot features into your website. Here are just a few examples:

2. Incorporating HubSpot Assets into Your Webflow Site

HubSpot offers a wide range of assets, such as images and documents, that you can leverage on your website. With Webflow Apps, you can easily incorporate these assets into your Webflow site, enhancing its visual appeal and providing valuable resources for your visitors.

3. Integrating HubSpot Chatbots

Want to provide real-time support and engage with your website visitors? Webflow Apps allows you to integrate HubSpot chatbots seamlessly into your site. This enables you to deliver personalized customer experiences and capture leads directly through chat interactions.

4. Enabling Site Tracking

HubSpot's site tracking capabilities provide valuable insights into visitor behavior and help you better understand your audience. With Webflow Apps, you can enable site tracking on your Webflow site, giving you access to valuable data to optimize your marketing strategies.

Conclusion

Integrating HubSpot with Webflow has never been easier, thanks to the new Webflow Apps feature. With just a few clicks, you can seamlessly connect HubSpot to your Webflow site and unlock a world of possibilities for lead management, design customization, and more. Whether you want to add HubSpot forms, incorporate HubSpot assets, or enable site tracking, Webflow Apps has you covered. Take advantage of this powerful integration and supercharge your website with the combined power of HubSpot and Webflow.