How to Add Live Chat to Your Website with Hubspot

Adding live chat to your website with Hubspot is one of the fastest ways to capture leads, support visitors in real time, and create a smoother customer experience without heavy development work.

This guide walks you through every key step, closely following the official instructions from Hubspot’s live chat documentation, so you can launch a chat widget that matches your brand and routes conversations to the right people.

Why Use Hubspot Live Chat

Before you start building chatflows, it helps to understand what Hubspot live chat can do for your site and team.

• Engage visitors at key moments in their journey.
• Capture lead details directly into your CRM.
• Route chats to the right inbox or team.
• Offer automated and human support in a single interface.
• Track performance with reporting inside Hubspot.

Prerequisites for Setting Up Hubspot Chat

To follow this walkthrough, make sure you have:

• An active Hubspot account with permissions to edit chatflows and inbox settings.
• The Hubspot tracking code or CMS installed on your website.
• At least one user or team available to receive live chat messages.

Step 1: Access the Hubspot Chatflows Tool

You manage live chat experiences inside the chatflows tool in Hubspot.

1. Log in to your Hubspot portal.
2. Navigate to Conversations > Chatflows in the main navigation.
3. Select your preferred workspace or account if prompted.

This screen shows all existing chatflows, including live chat and bot-based experiences you have already created.

Step 2: Create a New Hubspot Live Chatflow

Next, you will create a new live chat experience from a template in Hubspot.

1. Click Create chatflow.
2. Choose where you want the chat to appear, such as Website.
3. Select the Live chat option instead of a bot template if you want human-led conversations.
4. Click Next to move into the setup wizard.

The wizard walks you through targeting, inbox routing, and basic appearance settings so your widget is ready to publish quickly.

Step 3: Choose the Hubspot Inbox and Routing

Every live chatflow in Hubspot connects to an inbox where your team reads and replies to messages.

1. In the Choose an inbox step, pick an existing shared inbox or create a new one.
2. Set who should receive new chat conversations, for example:
   • All available users and teams.
   • Specific teams (Sales, Support, Success).
   • Specific users if you have dedicated reps.
3. Enable assignment rules if you want Hubspot to automatically distribute chats based on availability or round-robin logic.

Proper routing ensures visitors get quick responses while balancing workload across your team.

Step 4: Customize Hubspot Live Chat Display and Branding

Hubspot lets you align the live chat widget with your website design so it feels native and on-brand.

1. In the Display step, configure key appearance options:
   • Chat launcher position (usually bottom-right).
   • Chat launcher color and theme.
   • Welcome message and header text.
   • Avatar image or logo for your brand or team.
2. Preview the widget on desktop and mobile to confirm spacing and colors look consistent.
3. Adjust language and text to match your tone of voice.

All of these settings are stored inside your Hubspot chatflow, so you can update them later without touching your site code.

Step 5: Define Hubspot Targeting Rules

Targeting rules in Hubspot determine who sees your live chat and on which pages it appears.

1. Open the Targeting section of your chatflow.
2. Choose where the chat should display, such as:
   • All pages.
   • Only specific URLs (for example, pricing or demo pages).
   • Pages that match certain patterns, like a blog directory.
3. Optionally add visitor criteria, including:
   • Country or language.
   • Contact lifecycle stage.
   • Returning versus new visitors.

By narrowing your Hubspot targeting rules, you can create specific chat experiences, like a sales-focused chat on pricing pages and a support chat on the help center.

Step 6: Configure the Hubspot Welcome Message and Fields

The first message visitors see sets expectations and invites them to start the conversation.

1. In the Build step, edit the welcome message that appears in the widget.
2. Use clear, friendly copy such as:
   • “Hi there! Have questions about pricing? Chat with our team now.”
   • “Need help getting started? Send us a message and we’ll reply shortly.”
3. Choose whether to request visitor details before or during the chat. Hubspot can collect:
   • Name.
   • Email address.
   • Phone number (optional).
4. Enable GDPR consent messaging if required in your region.

These fields help your team identify and follow up with visitors directly from the Hubspot CRM.

Step 7: Install the Hubspot Tracking Code (If Needed)

If your site is not already connected to Hubspot, you must install the tracking code so the live chat widget can load.

1. In your Hubspot settings, navigate to Tracking & Analytics > Tracking Code.
2. Copy the JavaScript snippet provided.
3. Paste it just before the closing </head> tag on every page of your site, or add it via your CMS or tag manager.

Once the tracking script is live, Hubspot can display your new chatflow, track page views, and associate chats with contact records.

Step 8: Test Your Hubspot Live Chatflow

Before enabling the chat for all visitors, test the full experience end to end.

1. Save and turn on the chatflow in Hubspot, but keep targeting narrow, such as only on a staging page or internal URL.
2. Open the targeted page in an incognito or private browsing window.
3. Trigger the chat widget, send a test message, and confirm it appears in your shared inbox.
4. Reply as an agent and verify notification, response timing, and closing the conversation.

Repeat this process on desktop and mobile devices to ensure the Hubspot chat widget behaves correctly across viewports.

Step 9: Publish and Optimize Your Hubspot Chat

Once you are satisfied with the setup, roll live chat out to more pages and refine performance over time.

• Expand targeting to high-intent URLs like product, demo, and pricing pages.
• Use Hubspot reports to track conversations, response times, and outcomes.
• Adjust welcome copy and routing rules based on feedback from your agents.
• Create additional chatflows for different segments, such as new visitors versus existing customers.

Continual optimization ensures your investment in Hubspot live chat translates into more qualified leads and happier customers.

Using Hubspot Chat Alongside Other Tools

You can integrate your live chat strategy with broader CRM and marketing workflows.

• Enroll contacts created from chat into nurture sequences.
• Use properties captured in Hubspot chat to personalize email follow-ups.
• Sync conversations with your ticketing or support pipeline.

For help connecting live chat with a larger CRM and automation strategy, you can work with specialists like Consultevo to design and deploy advanced workflows.

Next Steps for Your Hubspot Live Chat Strategy

With your first Hubspot live chatflow active, plan a roadmap that includes:

• Creating bot-assisted flows for common FAQs.
• Setting SLAs for response times and escalation rules.
• Training agents on using the Hubspot inbox efficiently.
• Reviewing performance monthly and iterating on targeting and messaging.

By systematically improving your Hubspot chat setup, you build a responsive, data-driven communication channel that supports both your visitors and your internal teams.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`