How to Add Hubspot Live Chat to Your Website

Adding live chat through Hubspot is one of the fastest ways to connect with visitors, answer questions in real time, and turn traffic into qualified leads. This step-by-step guide walks you through setting up live chat, customizing its appearance, and embedding it on any website.

Why Use Hubspot Live Chat on Your Site?

Modern buyers expect quick responses and simple ways to reach your team. A live chat tool integrated with your CRM gives you the full context of each conversation.

Using Hubspot live chat, you can:

Capture new leads directly from conversations
See a visitor’s history, page views, and contact details in one place
Route chats to the right sales or support reps
Track performance and conversation outcomes over time

All of this happens inside a shared inbox so your team can collaborate efficiently.

Step 1: Access the Hubspot Conversations Inbox

Before you create a chat channel, you need to access the central inbox where all messages are stored.

Log in to your Hubspot account.
In the main navigation, go to Conversations > Inbox.
Confirm that your inbox is set up for your team or create a new inbox if needed.

The inbox will be the home for live chat, chatbots, and other connected channels like email or Facebook Messenger.

Step 2: Create a New Hubspot Live Chat Channel

Next, you’ll add a dedicated live chat channel so visitors can start conversations from your website.

In the inbox settings, click Connect a channel.
Select Chat as the channel type.
Choose Live chat (not bot) for real-time conversations with your team.

This sets up the connection between your website widget and the Hubspot inbox.

Step 3: Configure Hubspot Targeting Rules

Targeting rules control where and when the live chat widget appears on your site.

Common options include:

Show on all pages – Ideal when you first launch live chat.
Show on specific URLs – For example, only on pricing, demo, or support pages.
Filter by device type – Show on desktop, mobile, or both.

To configure targeting in Hubspot:

Within the live chat setup, go to the Targeting tab.
Select your criteria such as Website URL or Query parameter.
Define the conditions (for example, URL contains /pricing).
Save your rules.

Smart targeting ensures you only show live chat where it adds the most value.

Step 4: Customize Hubspot Chat Appearance

Branding your live chat widget helps it blend seamlessly into your site and feel trustworthy.

Inside the live chat configuration, customize:

Chat launcher position – Typically bottom-right or bottom-left.
Colors – Match your primary brand color for buttons and headers.
Welcome message – A short, inviting line such as “Have questions? Chat with us.”
Chat display name and image – Use your company name or a team name, plus an avatar or logo.

Preview the widget to confirm that it looks good on both desktop and mobile before publishing.

Step 5: Set Up Hubspot Chat Availability and Routing

Live chat only works well when visitors know when they can expect a response. Hubspot lets you configure availability windows and assign conversations to the right people.

Define Hubspot Team Availability

Go to your chat channel settings.
Locate the Availability section.
Choose your working hours, for example, Monday–Friday, 9 a.m.–5 p.m.
Decide what visitors see outside business hours (offline message, email capture form, or a bot handoff).

Clear availability settings prevent frustration and set proper expectations.

Configure Hubspot Routing Rules

Routing rules determine who receives incoming chats.

Round robin – Automatically distribute chats evenly across a team.
Specific users or teams – Direct certain chats to sales, support, or account managers.
Fallback owners – Ensure no chat goes unanswered when someone is away.

Proper routing inside Hubspot keeps response times low and makes sure every visitor connects with the right person.

Step 6: Embed the Hubspot Chat Widget on Your Website

Once your live chat is configured, you need to place the tracking code on your site so the widget appears.

Install the Hubspot Code on a Custom Site

In your account settings, locate the Tracking code section.
Copy the provided JavaScript snippet.
Paste it just before the closing </head> tag on every page of your website, or place it in a global header file.
Publish or deploy your updated code.

After installation, visit your live site and refresh the page. The live chat widget should appear according to your targeting rules.

Use Hubspot with a CMS or Website Builder

Many popular CMS platforms and builders include native integrations or plugins. You can typically paste your tracking code into a dedicated field or enable an app to connect your account.

For more implementation details directly from the platform, review the original Hubspot instructions at this official guide.

Step 7: Test Your Hubspot Live Chat Experience

Before announcing live chat to customers, test the experience from both the visitor and agent perspectives.

Test as a Website Visitor

Open a private or incognito browser window.
Navigate to a page where your targeting rules should show the widget.
Start a new chat and send several test messages.
Check that the welcome message, colors, and position look correct.

Test Inside the Hubspot Inbox

Sign in as a user who should receive routed chats.
Verify that the conversation appears in the inbox.
Reply to the visitor and confirm that messages sync quickly.
Close or resolve the test conversation and confirm reporting reflects the interaction.

Repeat these tests from different devices and browsers to ensure consistency.

Step 8: Optimize Hubspot Live Chat for Better Results

Once your live chat is active, continue refining how you use it to support your sales and service goals.

Adjust targeting – Focus on pages with high intent, such as pricing or checkout.
Refine welcome messages – Personalize by page or audience segment.
Add bots – Use simple bots to qualify leads or answer FAQs when your team is offline.
Review reports – Track chat volume, response time, and conversion outcomes.

This ongoing optimization ensures your Hubspot setup keeps improving over time.

Get Help Implementing Hubspot Live Chat

If you need expert help planning or deploying your live chat strategy, consider working with a specialist agency. The team at Consultevo can support implementation, integration, and optimization so you get more value from your chat investment.

By following these steps, you can quickly launch a professional, fully integrated live chat experience powered by Hubspot on your website and start turning more visitors into lasting customers.

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

“`