# HubSpot - How to Add HubSpot Chat to Website

> To add HubSpot chat to website, navigate to Automations > Chatflows, create a chatflow, customize colors, set a welcome message, assign a team member, configure availability and reply time, publish the widget, ensure the status is toggled on, define page rules in the Target tab, and select a display avatar.

Canonical: https://livedemo.ai/tutorials/how-to-add-hubspot-chat-to-website/
Apps: HubSpot
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e00d673bd5aa8e5fd50/preview?step=1

## Steps

1. Navigate to Automations > Chatflows
2. Click on the Create chatflow button.
3. You can define the colour of the chat window based on your brand colors.
4. And get a preview of the chatform on the right as you keep building it.
5. Welcome message: This is the initial message visitors see when they open the chat.
6. Under the Assign to option, select a team member who will own chat interactions.
7. Put your availability based on your working hours.
8. You can show the reply time so your visitors know what to expect in terms of response time.
9. Hit the Publish button if your happy with the chat widget.
10. And you will receive a success dialog box
11. Make sure the STATUS is toggled ON.
12. Click on the Edit button.
13. Move to the Target tab
14. You can define page rules where the chat would be visible.
15. You can select the display avatar in the Display tab.