3 Steps to Connect HubSpot to Your Website, CMS Recipes & API Guidance

Connecting HubSpot to your website comes down to three moves: install the tracking code so HubSpot sees your visitors, add your domain to HubSpot so it trusts your pages, and embed HubSpot forms (or call the Forms and Contacts APIs for custom builds). Use embeds for standard lead capture and reach for the API only when you need server-side control over submissions. You’ll know it worked when pageviews show up in HubSpot’s traffic reports and test submissions create a contact record with the right fields.

---

TL;DR:

• Use the HubSpot tracking code on all pages, ensure it loads only once, and verify it loads correctly to avoid inflated pageview data.
• Add your website domain to HubSpot’s settings before embedding forms to prevent submission filtering issues.
• For WordPress, Webflow, Wix, Squarespace, or Shopify, use platform-specific methods like plugins or custom code to embed scripts and forms efficiently.
• When hosting your site on HubSpot, complete DNS setup with proper A or CNAME records, starting with subdomains for lower risk and easier propagation.
• Rely on embeds for most lead capture, only switch to API use if server-side validation or complex submission workflows are required.

---

Table of Contents

• How Do You Install the HubSpot Tracking Code?
• How Do You Embed a HubSpot Form on an External Page?
• Quick Setup Recipes by Platform
• Should You Host Your Site on HubSpot or Just Connect a Domain?
• When Should You Use the HubSpot API Instead of Embeds?
• Pre-Launch Checklist: Confirm Everything Actually Works
• Setting Up HubSpot Live Chat or Chatbots on Your Site
• Configuring HubSpot CRM to Capture and Manage Website Leads
• Data Privacy and Compliance Best Practices for Tracking
• Triggering Email Workflows from Website Interactions
• Syncing E-Commerce Data with HubSpot for Sales Tracking
• What We See Go Wrong (and What Actually Works)
• Deploy HubSpot-Ready Pages Without the Manual Setup Work
• FAQ

How Do You Install the HubSpot Tracking Code?

Every HubSpot connection starts with the tracking code, a small JavaScript snippet tied to your HubSpot account. Without it, HubSpot can’t see your visitors, log page views, or activate other tools tied to your site.

Here’s how to find and place it correctly:

1. In HubSpot, go to Settings > Tracking & Analytics > Tracking Code. Copy the unique snippet HubSpot generates for your account.
2. Paste that code right before the closing </body> tag on every page you want tracked, or add it once through your site’s global header/footer or code injection settings if your platform supports site-wide script insertion.
3. Add each externally hosted domain and subdomain to HubSpot’s tracking settings. This step also lets HubSpot merge visitor profiles across domains when automatic cross-domain linking is switched on.
4. Verify the install: check HubSpot’s tracking status indicator, then open your browser’s developer tools and confirm the script loads without errors on a live page.

The single biggest mistake we see is a duplicate install, usually a plugin adding the snippet while someone also pastes it manually into the theme. That doubles your event data and skews every report downstream. Install the tracking code once, confirm it’s live, and resist the urge to add a “backup” copy just in case.

Pro Tip: Check your page source for two copies of the same tracking ID before you assume HubSpot’s analytics are broken. Duplicate snippets are the most common cause of inflated pageview counts.

How Do You Embed a HubSpot Form on an External Page?

Building the form is the easy part. Getting the embed to actually create contacts is where most setups break.

Start in HubSpot’s Marketing > Forms tool, build or edit the form you want, then grab its embed code. Paste that code directly into your page’s HTML or into whatever embed/code block your builder provides.

A few things determine whether that form actually works once it’s live:

• Domain registration matters more than the code itself. If the page’s exact domain isn’t added to HubSpot’s tracking settings, submissions risk landing in spam instead of your contacts list.
• Standard embed vs. developer embed (V3/V4) changes your styling control. The standard version inherits HubSpot’s default styles; the developer embed gives you finer CSS control but needs more testing.
• Style overrides should be tested in devtools first, since HubSpot’s default form CSS can conflict with your theme’s stylesheet in ways that only show up on the live page, not in preview.
• When a form “works” locally but nothing shows in HubSpot, compare your live embed code line by line against the current code in the Forms tool. Old cached embed code is a frequent culprit.

Pro Tip: If a form submits without errors but no contact appears, check the domain settings before touching the code. Nine times out of ten, it’s a missing domain, not a broken form.

Quick Setup Recipes by Platform

Every CMS handles script and form embedding a little differently. Here’s the fastest path for each:

• WordPress: Install the HubSpot All-in-One Marketing plugin, which auto-installs your tracking code and connects your forms without manual embedding. If you skip the plugin, paste the tracking snippet into your theme’s header/footer settings instead, but never do both.
• Webflow: Install the HubSpot app from Webflow’s App Marketplace, or paste the tracking code into your site’s custom code settings and drop form embeds into custom code embed blocks on individual pages.
• Wix: Paste the tracking code into Wix’s tracking and analytics settings, or use a native integration if one’s available for your account. Watch for iframe helper domains that can interfere with form rendering.
• Squarespace: Add the tracking code through code injection in header or footer settings. AJAX-loaded page templates sometimes block scripts from re-initializing on page transitions, so test navigation between pages, not just a single load.
• Shopify: Insert the tracking code into theme.liquid, or deploy it through a tag manager if you’re already using one. Always test on a published page, not the theme preview, since preview mode can behave differently.

Should You Host Your Site on HubSpot or Just Connect a Domain?

Tracking your site and hosting your site on HubSpot are two different decisions, and mixing them up is where a lot of setups go sideways. Adding a tracking code works on any external site, no matter where it’s hosted. Connecting a domain means HubSpot actually serves the content, which requires DNS changes.

If you decide to host on HubSpot, here’s the sequence:

1. Go to Settings > Content > Domains & URLs > Web Hosting and choose “Connect hosting domain.”
2. Decide between a root domain (hosts your entire site) or a subdomain (hosts specific content like landing pages or a blog) — subdomains typically use CNAME records while root domains need A records.
3. Copy the exact DNS values HubSpot provides and add them at your domain registrar or DNS provider.
4. Confirm you have Super Admin or Domain Settings permission plus DNS access before starting, since connecting a domain requires both.

Propagation usually takes minutes but can stretch to 24 hours. If you’re not sure which approach fits, start with a subdomain for landing pages. It’s the lowest-risk way to test the connection without touching your main site’s DNS.

When Should You Use the HubSpot API Instead of Embeds?

Embeds cover most lead capture needs. The API makes sense when you need server-side validation, you’re collecting submissions from something that isn’t a browser form, or your field mapping is too complex for a standard embed to handle cleanly.

For submissions, HubSpot’s Forms API accepts programmatic form data, including different embed types like V3/V4 and advanced field configurations. For managing the actual contact records afterward, the Contacts API handles single-record and batch operations.

Whichever endpoint you use, plan for authentication tokens, retry logic for failed requests, and idempotency so a network hiccup doesn’t create duplicate contacts. Map consent fields explicitly to HubSpot’s legal basis properties rather than assuming they’ll sync automatically. The general rule: choose the least complex option that still protects your data quality. Most sites never need the API at all.

Pre-Launch Checklist: Confirm Everything Actually Works

Before you call the integration done, run through this marketing automation checklist:

• Submit a test lead through the live form and confirm a contact record appears in HubSpot with every field mapped correctly.
• Load a few sample pages and check HubSpot’s traffic reports to confirm pageviews are registering.
• Check HubSpot’s spam or quarantine queue for wrongly filtered submissions and release anything legitimate.
• If a form or tracking fails, re-check the tracking snippet, re-embed the current form code, and scan for JavaScript errors, especially on pages using AJAX navigation that can block scripts from reloading.

Pro Tip: Test your form on mobile separately from desktop. Mobile browsers handle redirects and validation differently, and a form that works fine on desktop can silently fail on a phone.

Setting Up HubSpot Live Chat or Chatbots on Your Site

Live chat runs through the same tracking code you already installed, so if pageviews are firing, chat widgets typically just need to be switched on. In HubSpot, go to the Conversations tool and create a new chatflow, choosing either live chat or a bot flow depending on whether you want a human or automated first response.

Set your availability rules and routing next: decide which team or inbox owns incoming chats, and set fallback behavior for after-hours messages. Then customize the widget appearance, greeting message, and targeting rules, since you can choose to show chat only on specific pages rather than site-wide.

Publish the chatflow and confirm the widget appears on a live page, not just in preview. If it doesn’t show up, the tracking code is almost always the reason, since the chat widget loads through the same script. Test the full conversation flow yourself, including any bot logic branches, before pointing real traffic at it. Chat transcripts and any contact details collected sync automatically into the same contact record your forms create, so a visitor who chats and later fills out a form ends up as one unified profile instead of two.

Configuring HubSpot CRM to Capture and Manage Website Leads

Once tracking and forms are live, the CRM side needs its own setup so leads don’t just pile up unsorted. Start by mapping each form’s fields to the right HubSpot contact properties, creating custom properties for anything that doesn’t fit HubSpot’s defaults, like a specific product interest or lead source detail.

Set up lifecycle stages so a form submission automatically moves a contact from “subscriber” to “lead,” and configure lead scoring if you want to prioritize follow-up based on behavior like repeat visits or specific page views. Assign ownership rules so new leads route to the right rep or team automatically instead of sitting in a shared inbox.

Build a simple list view or dashboard filtered by lead source and submission date so your team can see new website leads at a glance without digging through the full contact database. This is also where duplicate management matters. If the same person submits two different forms with slightly different email formatting, HubSpot’s deduplication settings decide whether that becomes one contact or two. Review those settings early, because cleaning up thousands of duplicate records later is far more work than configuring matching rules on day one.

Data Privacy and Compliance Best Practices for Tracking

Tracking code collects behavioral data the moment it loads, so compliance has to be part of the setup, not an afterthought. Add a cookie consent banner that blocks non-essential tracking scripts until a visitor opts in, particularly for audiences covered by GDPR or similar regional privacy rules.

Configure HubSpot’s cookie consent settings to match your banner, since HubSpot’s tracking code can be configured for consent-based loading rather than firing before a visitor has made a choice. On forms, add explicit consent checkboxes for marketing communications and map them directly to HubSpot’s legal basis fields instead of relying on the form’s general submission as implied consent.

Review your privacy policy to disclose HubSpot as a data processor, and set data retention rules in HubSpot for contacts who never convert. If you operate internationally, check which regional privacy framework applies to each visitor segment. A one-size-fits-all consent banner across every market usually undercollects consent in stricter regions and adds unnecessary friction in others.

Triggering Email Workflows from Website Interactions

A form submission is the most common workflow trigger, but it’s not the only one worth using. In HubSpot’s Workflows tool, you can trigger a sequence based on a form submission, a specific page visit, time spent on a pricing page, or even a chat conversation that didn’t convert.

Build the workflow by setting the enrollment trigger first, then layering in the actual email sequence, delays between sends, and branching logic based on how a contact responds. A visitor who views a pricing page three times in a week is a different lead than someone who filled out a general contact form, and your workflow logic should treat them differently.

Test every workflow with a dummy contact before turning it live, checking that the trigger fires correctly and the emails send in the right order with the right personalization tokens filled in. Website-triggered workflows tend to fail silently when a page URL changes and the trigger condition no longer matches, so revisit workflow triggers whenever you update site navigation or restructure a landing page.

Syncing E-Commerce Data with HubSpot for Sales Tracking

If your site sells anything, connecting order data to HubSpot turns anonymous purchases into a sales pipeline you can actually analyze. HubSpot’s native e-commerce integrations for platforms like Shopify sync orders, products, and line items automatically once connected through HubSpot’s App Marketplace, creating or updating contact and deal records tied to each purchase.

For custom-built stores or platforms without a native integration, the same Contacts API used for lead sync can push order data as custom properties or associated deals, letting you report on revenue by traffic source or campaign. Map key fields like order value, product category, and purchase date to HubSpot properties so your sales team can see purchase history directly on the contact record instead of switching between systems.

Set up a deal pipeline stage specifically for completed purchases if you want to track repeat buyers or upsell opportunities separately from your standard lead pipeline. This is also where the tracking code pays off twice: the same script that logs page views also attributes a purchase back to the marketing campaign or channel that brought the customer in, closing the loop between marketing spend and actual revenue.

What We See Go Wrong (and What Actually Works)

Across the launches we watch happen, the pattern is consistent: teams that start with a plugin or a simple embed ship faster and break less than teams that jump straight to custom API work they didn’t need. The recurring failures are always the same three: duplicate tracking installs, a domain nobody added to HubSpot’s settings, and an embed code that’s gone stale after a form edit.

None of that is a HubSpot problem. It’s a sequencing problem. Get tracking and domains right first, get one form working end to end, and only then decide if you actually need the API.

Deploy HubSpot-Ready Pages Without the Manual Setup Work

If you’re building or rebuilding the pages where these HubSpot forms and scripts need to live, that part doesn’t have to be a separate development project. WebsitePublisher.ai lets you describe the landing page or site you need in plain language and get a working page with script and form embed blocks ready to drop your HubSpot code into, without hand-coding the surrounding layout first.

You still choose how HubSpot connects, whether that’s a plugin, a manual embed, or the API. WebsitePublisher.ai just removes the extra dev work of building the page itself, with reusable components so your tracking and form placement stay consistent across every new landing page instead of getting rebuilt from scratch each time. The platform supports over 100 built-in integrations alongside custom script embeds, and you can edit content and design directly in your browser afterward.

Plans start at $4.61 a month on the Solo tier, with a free tier available if you want to test the workflow before committing. If you’re already comfortable building pages by hand, embeds and plugins work perfectly well on their own. But if the page itself is the bottleneck, that’s where we come in.

FAQ

How Do I Connect My Website Domain to HubSpot?

Add your domain in Settings under Tracking & Analytics for basic tracking, or under Content > Domains & URLs > Web Hosting if you want HubSpot to actually host the content. Hosting requires adding DNS records at your domain provider, either an A record for a root domain or a CNAME for a subdomain.

Can HubSpot Host My Website?

Yes. HubSpot can host a full site on a connected root domain or host specific content like landing pages on a subdomain, once you complete the DNS connection and verify permissions. If you’re not hosting on HubSpot, your existing host works fine as long as the tracking code and forms are installed correctly.

Can HubSpot Track Website Traffic on a Site It Doesn’t Host?

Yes. The HubSpot tracking code works on any externally hosted site, regardless of platform, as long as it’s installed on every page and the domain is added to your tracking settings.

Can I Connect HubSpot to Wix?

Yes. Paste the HubSpot tracking code into Wix’s tracking and analytics settings, and use a native integration if one is available for your account. Form embeds work the same way as other external sites: copy the embed code from HubSpot’s Forms tool and add it to a Wix embed or code block.

Should I Use an Embed or the API to Connect My Forms?

Use an embed for standard lead capture, since it requires no development work and syncs directly to HubSpot contacts. Reach for the Forms or Contacts API only when you need server-side validation, non-browser submissions, or complex field mapping an embed can’t handle.

Recommended

• React on WebsitePublisher.ai — Deploy React Landing Pages by Conversation
• AI Website Builder — Build Websites With ChatGPT, Claude & More
• Build Websites with Claude — Claude AI Website Builder