HubSpot CMS Integration Guide

QuackChat on HubSpot CMS

Add the QuackChat widget to your HubSpot CMS website. This guide covers HubSpot CMS Hub (not the free CRM or Marketing Hub pages).

Quick Start (TL;DR)

1. Go to Settings > Website > Pages
2. Click Site Footer HTML
3. Paste the widget code
4. Save

Prerequisites

• HubSpot CMS Hub access
• Bot ID from your QuackChat dashboard

Step-by-Step Installation

Option A: Site Settings (Recommended)

1. Log into your HubSpot account
2. Click the Settings gear icon
3. Navigate to Website > Pages
4. Scroll to Site Footer HTML
5. Paste the widget code:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
></script>

6. Click Save

The widget will appear on all HubSpot CMS pages.

Option B: Page-Specific (Landing Pages)

For specific landing pages:

1. Edit the page
2. Go to Settings > Advanced options
3. In Additional code snippets > Footer HTML, paste the widget code
4. Save and publish

Platform-Specific Customization

Using HubL Variables

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  {% if request.contact %}
  data-welcome-message="Welcome back, {{ request.contact.firstname }}!"
  {% endif %}
></script>

Verification

Quick test:

1. Preview your page or visit the live site
2. Look for the chat bubble
3. Test sending a message

Troubleshooting

Widget conflicts with HubSpot chat

Cause: HubSpot has its own chat widget (Conversations).

Solution: Disable HubSpot Conversations on pages where you use QuackChat.

Widget doesn't appear on landing pages

Cause: Landing pages may not inherit site footer.

Solution: Add the code in the landing page's individual settings.

HubSpot CRM Integration

Sync Leads to HubSpot

1. Enable lead capture in QuackChat bot settings
2. Set up a workflow using Zapier or custom integration
3. When QuackChat captures a lead → Create HubSpot contact
4. Map fields (email, name, etc.)

Known Limitations

• CMS Hub required for site-wide footer HTML
• Landing pages need individual configuration
• HubSpot Conversations may conflict (disable one)