Insights and Inspiration – The Hostnicker Blog

How to Add HubSpot to Webflow for Marketing Automation

October 7, 2024

Step 1: Create Your HubSpot Account

Begin by signing up for a HubSpot account if you haven't already. Choose from various plans, including a free version with essential features. Fill in the required details on the HubSpot website and follow the setup prompts.

Step 2: Get Your HubSpot Tracking Code

Log into your HubSpot account and navigate to the Reports section on the dashboard. Click on Analytics Tools, then select Tracking Code. Copy your unique HubSpot tracking code to your clipboard.

Step 3: Add the HubSpot Tracking Code to Webflow

Log into your Webflow account and select the project you wish to integrate with HubSpot. Go to Project Settings, then click on the Custom Code tab. Paste the HubSpot tracking code in the Head Code section and save the changes.

Step 4: Setting Up HubSpot Forms in Webflow

In HubSpot, click on Marketing, then Forms. Create a form and design it as per your needs, then publish it to get an embed code. In Webflow, select the page where you want to add the form. Use the Embed element to drag onto your page and paste the form embed code, then save and publish your updates.

Step 5: Integrating HubSpot Pop-ups and Live Chat

For pop-ups, go to Marketing in HubSpot, select Lead Capture, then Pop-ups. Create your pop-up, publish it, and use the provided code in Webflow with the Embed component. For live chat, navigate to Conversations in HubSpot, select Chatflows, create your chat and publish it. Use the Embed component in Webflow to add the chat code.

Step 6: Verify the Integration

Refresh your Webflow site and use the browser’s developer tools to confirm the HubSpot tracking code is active by checking the Network tab for tracking requests. Test form, pop-up, and chat features to ensure they work as expected.

Step 7: Monitor Performance in HubSpot

Return to your HubSpot account to analyze the performance of your marketing activities using HubSpot’s analytics tools. Track various metrics like form submissions, chat interactions, and lead conversions to refine your marketing strategies.

Conclusion

By following these steps, you can effectively use HubSpot’s marketing automation tools on your Webflow website to enhance your marketing efforts and improve customer engagement.