HubSpot

How to integrate HubSpot with Webflow

HubSpot offers several ways to connect with Webflow, from the HubSpot app for quick setup to code embeds for specific components, and API integrations for custom workflows.

The official app handles most marketing needs like form embedding and tracking, while code embeds work well for chatbots and meeting schedulers. For advanced data sync and personalization, API integrations provide maximum flexibility.

Use the HubSpot app

The official HubSpot app provides the most streamlined integration experience, certified by both platforms for reliability. This marketplace app gives you instant connectivity between your design and marketing systems without any custom code.

Installing the HubSpot app enables these key capabilities:

• Style HubSpot forms natively in Webflow while preserving submission tracking
• Map Webflow forms to HubSpot without custom code or middleware
• Deploy chatbots with one-click embedding that matches your site design
• Access HubSpot assets directly in Webflow's asset manager
• Enable site-wide tracking automatically across all pages

For form integration specifically, the app excels at maintaining design consistency. Select any HubSpot form through a dropdown menu, then apply CSS styling using Webflow's visual tools — no iframe limitations or style conflicts. This preserves HubSpot's backend processing while giving you pixel-perfect control over appearance.

The app also simplifies asset management by creating a bridge between HubSpot's file library and Webflow. Search and insert approved marketing materials without leaving your design environment, ensuring brand consistency across campaigns.

Use code embeds and HTML components

Webflow's Custom Code Embed lets you add HubSpot components to your site when you need specific features or custom implementations beyond the app's capabilities.

Adding the HubSpot tracking code enables analytics and form capture across your entire site. The tracking script monitors page views, form submissions, and user journeys to give HubSpot complete visibility into visitor behavior.

Note: HubSpot tracking uses cookies to identify visitors and track behavior. Ensure your site includes appropriate cookie consent notices and privacy policy updates to comply with GDPR, CCPA, and other privacy regulations.

To install HubSpot's tracking code:

1. Copy your tracking code from HubSpot's Settings > Tracking & Analytics
2. In Webflow, go to Site Settings > Custom Code
3. Paste the tracking script in the Head Code section
4. Publish your site to activate tracking

Once installed, enable "Capture non-HubSpot forms" in HubSpot's settings to automatically collect submissions from Webflow Forms.

Note: Non-HubSpot form capture has a limit of 10,000 forms and provides basic field mapping without validation controls.

Embedding HubSpot forms through HTML gives you granular control over complex forms with conditional logic or progressive profiling features.

To embed a HubSpot form:

1. In HubSpot, navigate to Marketing > Forms and select your form
2. Click Embed and copy the provided HTML code
3. In Webflow, add an Embed element to your page
4. Paste the HubSpot embed code and style the container as needed

Deploying chatbots and meeting schedulers follows a similar pattern. The chat widget appears on all pages, with targeting rules controlled from HubSpot's interface.

To add a HubSpot chatbot:

1. Create your chatflow in HubSpot's Conversations > Chatflows
2. Generate the embed code from the chatflow settings
3. In Webflow, add the code to Site Settings > Custom Code > Footer Code
4. Configure chat appearance and triggers within HubSpot

Meeting schedulers embed directly into pages using HubSpot's calendar widget code, letting visitors book appointments that sync to your HubSpot CRM automatically.

Build with Webflow and HubSpot APIs

Webflow API integration lets you create custom workflows, such as real-time data synchronization and advanced personalization. This approach requires server-side development but delivers maximum flexibility for complex business requirements.

Both platforms provide comprehensive APIs:

• HubSpot's CRM API manages contacts, deals, and custom objects
• Webflow's Data API handles CMS collections and form submissions
• Webhooks enable real-time event triggers between systems

Implement bi-directional data sync

Create seamless data flow between Webflow CMS and HubSpot CRM for dynamic content experiences. Configure webhooks in Webflow to trigger on form submissions, process the data in your server-side function, then update HubSpot contacts via the Contacts API.

To implement basic data sync:

1. Configure webhooks in Webflow to trigger on form submissions using POST /sites/{site_id}/webhooks with triggerType set to form_submission
2. Process webhook payloads in your serverless function, transforming Webflow's JSON structure to match HubSpot's contact properties
3. Update HubSpot records via POST /crm/v3/objects/contacts with the Contacts API, creating or updating contacts based on email matching
4. Sync data back to Webflow using PATCH /collections/{collection_id}/items/{item_id} to update member profiles or display personalized content

Note: API integrations have rate limits of 190 requests per 10 seconds for Professional and Enterprise accounts. Implement exponential backoff for 429 errors and batch operations when possible.

Building visitor identification and personalization

Use HubSpot tracking cookies to match anonymous traffic with known contacts, then fetch contact properties to modify Webflow content dynamically. This creates experiences where returning visitors see content relevant to their industry, company size, or previous interactions.

To implement personalization:

1. Identify visitors using HubSpot tracking cookies to match traffic with known contacts
2. Fetch contact properties via GET /crm/v3/objects/contacts/{contactId} including industry or lifecycle stage
3. Modify Webflow content dynamically using JavaScript based on visitor attributes
4. Track engagement by sending events back to HubSpot for reporting

What you can build

Integrating HubSpot with Webflow enables powerful marketing experiences that combine beautiful design with intelligent automation.

• Marketing agencies scaling client campaigns: Use the integration to deliver personalized web experiences while reducing manual data entry, allowing agencies to manage more clients efficiently
• SaaS companies optimizing conversion funnels: Implement progressive profiling where each form submission enriches the contact record, enabling increasingly targeted messaging throughout the customer journey
• E-commerce brands automating post-purchase engagement: Sync order data to trigger HubSpot workflows for review requests, replenishment reminders, and loyalty programs based on purchase history
• B2B services personalizing proposals: Create dynamic landing pages that adapt content based on the prospect's industry and company size, pulled from HubSpot