What are the two ways to add a chatbot script on HubSpot CMS?
HubSpot CMS gives you two main places to inject third-party scripts: site-wide via the domain-level header/footer HTML fields in Settings, and per-page via the Advanced tab in the content editor. A third option — editing templates directly in the Design Manager — is available to developers on paid Content Hub plans and propagates the script to every page that uses a given template.
For most small businesses, the site-wide approach is the right choice: one paste, one save, and the chatbot loads on every page automatically. The per-page method makes sense when you want the widget on a specific landing page only — a quote request page, for example — and not on the rest of the site.
| Method | Scope | Where to find it | Best for |
|---|---|---|---|
| Site Footer HTML (Settings) | All pages on a domain | Settings → Content → Pages → Site Footer HTML | Most businesses — one step, site-wide coverage |
| Per-page Footer HTML | One page only | Content editor → Settings tab → Advanced → Footer HTML | Single landing pages or A/B test pages |
| Per-page Head HTML | One page only | Content editor → Settings tab → Advanced → Head HTML | Scripts that must initialize before page content renders |
| Design Manager template edit | All pages using that template | Marketing → Files → Design Manager → template file | Developers applying per-template logic on paid Content Hub plans |
How do you add a chatbot site-wide via the HubSpot Pages settings?
The site-wide method uses HubSpot's Site Header HTML and Site Footer HTML fields — plain text areas inside your domain settings where any HTML or script tag you add loads on every page associated with that domain. Place your chatbot script in the Site Footer HTML field, not the header: floating widgets initialize correctly when the page body has already rendered.
- 1
Open HubSpot Settings
Click the gear icon in the top navigation bar of your HubSpot account to open the Settings panel.
- 2
Navigate to Content → Pages
In the left sidebar of Settings, click Content, then click Pages. This opens the Pages settings panel where domain-level defaults are configured.
- 3
Choose your domain
At the top of the Pages panel, use the "Choose a domain to edit its settings" dropdown. Select the specific domain where you want the chatbot to appear, or select "Default settings for all domains" to apply it across every connected domain in your account.
- 4
Click Override default settings (if editing a specific domain)
If you selected a specific domain, a button labeled "Override default settings" may appear in the Site Header HTML and Site Footer HTML sections. Click it to enable domain-specific code. If you selected "Default settings for all domains," this step is not required.
- 5
Paste your chatbot script into Site Footer HTML
Scroll to the Site Footer HTML section and paste your chatbot's <script> tag — for example: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>. Do not place it in Site Header HTML unless the vendor explicitly requires head placement.
- 6
Click Save
Click the Save button at the bottom of the panel. HubSpot propagates the change to all published pages on the selected domain. There is no additional publish step.
- 7
Verify on the live site in a private browser window
Open your live domain in an incognito or private browser window. The chatbot bubble should appear within a few seconds of the page loading. Do not test inside the HubSpot content editor — previews do not execute third-party scripts.
How do you embed a chatbot on a single HubSpot page only?
Per-page script injection is handled through the Advanced tab in HubSpot's content editor. This approach keeps the chatbot off the rest of your site — useful for a dedicated lead-capture landing page where you want to focus the visitor's attention without the widget appearing on the homepage or blog.
- 1
Open the page in the content editor
In your HubSpot account, navigate to Content → Website Pages (or Content → Landing Pages). Click Edit on the page you want to modify.
- 2
Click the Settings tab
Inside the content editor, click the Settings tab at the top of the editor panel. This shows the page's metadata and advanced configuration options.
- 3
Select Advanced
Within Settings, scroll to find and click Advanced to expand the advanced options section.
- 4
Paste your script into the Footer HTML field
Find the Footer HTML text area and paste your chatbot <script> tag. If the vendor requires head placement, use the Head HTML field instead. The Footer HTML field is not available for blog posts.
- 5
Publish or update the page
Click Publish (for new pages) or Update (for existing published pages) to apply the change. The script will load only on this specific page.
How do you embed Knobot specifically on a HubSpot CMS site?
Knobot generates a single async script tag from the dashboard. There is no HubSpot app to install, no OAuth flow, and no developer required. Knobot's Premium plan ($79/month) includes 10,000 messages per month — enough for most small business sites without per-conversation overage charges. A 14-day trial with 100 free preview messages lets you verify the integration before committing.
- 1
Create a Knobot account and set up your business profile
Sign up at knobot.org. During onboarding, enter your business URL — Knobot uses retrieval-augmented generation (RAG) to scrape your site and build the initial knowledge base automatically. You do not need to write FAQ responses by hand.
- 2
Customize the widget in the Knobot dashboard
Set the primary color, welcome message, and lead-capture fields (name, email, phone) to match your brand. You can also configure which information the widget collects before handing off to your inbox or webhook.
- 3
Copy the embed snippet from Embed → Get Code
In the dashboard, navigate to Embed → Get Code. Copy the full script tag. It looks like: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>. Your unique data-key ties the widget to your business's knowledge base and settings.
- 4
Paste into HubSpot Site Footer HTML
Follow the site-wide steps above: Settings → Content → Pages → choose your domain → Site Footer HTML. Paste the snippet and click Save.
- 5
Add your domain in Widget → Install
Back in the Knobot dashboard, navigate to Widget → Install and add your exact live domain — both the apex domain (yourbusiness.com) and the www version (www.yourbusiness.com). Knobot authorizes the widget to initialize only on domains you have explicitly registered.
- 6
Send a test message
Open your live HubSpot site in a private browser window, trigger the chatbot, and submit a test lead. Confirm the lead appears in the Knobot dashboard under Conversations and that any configured webhook or email notification fires.
How do you prevent your chatbot from conflicting with HubSpot's own chat widget?
If HubSpot's native chat feature (sometimes called HubChat) is enabled on your site, both widgets will try to appear in the bottom-right corner of the page. The result is one widget stacking on top of the other, making both unusable. This is the most common embedding issue on HubSpot CMS sites.
There are two clean ways to resolve it:
Running two chat widgets simultaneously on the same page is not recommended even without visual overlap — it creates a confusing experience for visitors who have to choose between them. Pick one and disable the other on pages where they would both appear.
What should you do if the chatbot does not appear after saving?
If the Site Footer HTML is saved correctly but the widget does not appear on your live site, work through these causes in order.
How does HubSpot's HTTPS requirement affect chatbot scripts?
HubSpot enforces HTTPS across all CMS-hosted pages. This means any external script your chatbot loads — the widget JavaScript file, API calls, and any CDN assets — must also be served over HTTPS. Browsers block mixed-content requests: an HTTPS page cannot load resources over plain HTTP. Any chatbot vendor that still serves its widget script over HTTP will be silently blocked on HubSpot pages — this is a browser enforcement, not a HubSpot restriction.
HubSpot does not apply a custom Content Security Policy (CSP) by default on standard CMS-hosted sites, so a script tag added through Site Footer HTML runs without additional configuration. The exception is if your organization has configured a custom CSP through a CDN or proxy layer in front of HubSpot — in that case, you would need to add the chatbot vendor's domain to the script-src directive of your policy. This is rare for small businesses using standard HubSpot CMS hosting.
Can you add a chatbot via the HubSpot Design Manager?
Yes, for developers with Design Manager access. The Design Manager lets you edit the raw HTML of HubSpot templates — the files that control the layout of pages built on that template. Adding your chatbot script to the footer of a template file propagates it to every page using that template, which gives you more granular control than the site-wide Site Footer HTML field (you can apply the chatbot to some templates but not others).
This approach requires a paid Content Hub plan and familiarity with HubSpot's HubL templating language. For most small businesses, the Settings → Content → Pages → Site Footer HTML path is faster, does not require developer access, and achieves the same result for the common case of embedding a chatbot site-wide.