Connect and customize a chat channel in the conversations inbox

With a chat channel connected to your conversations inbox, visitors can begin a conversation with your team right from your website. Members of your team can chat with customers in real-time or set up a bot to send preset responses and gather information.

You can customize the appearance of the chat widget, including the widget color and avatar, and set your team's availability preferences.

Learn how to migrate an existing chatflow to help desk.

Connect a chat channel

1. In your HubSpot account, click the settings settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Inbox & Help Desk > Inboxes. If you have multiple inboxes set up, use the Current view dropdown menu to select the inbox you want to connect a channel to.
3. Click Connect a channel.
4. Select Chat.
5. Select Web or Mobile.
6. By default, the chat widget colors will be based on your account's branding settings. You can customize the color by selecting one of the other preset colors, or manually entering a hexadecimal value, or by clicking the color picker to the right of the hexadecimal value field and selecting a custom color.
7. Click the Font dropdown menu and select a font.
   
   
8. Click Next.
9. On the Availability page, set when your team should appear available to chat and let visitors know when they can expect a reply. Select an availability option:
   • Based on user availability: visitors can chat with your team if at least one team member assigned in your assignment rules is available.
   • Based on chat operating hours: set consistent days and times when your team should appear available to chat. If you're creating a bot, learn how customize the bot's availability preferences based on your inbox settings.Use the dropdown menus to set your team’s availability. Click + Add hours to add additional day and time ranges.
   • Chat is available 24/7: select this checkbox if your team always appears available to chat.
     
     
10. In the Availability behavior section, configure the chat experience based on your teams availability and let visitors know when they can expect a reply. Select an option:
    
    • To set up the visitor's experience when your team is available, click the Available tab. Click the Show typical reply time dropdown menu to let visitors know when they can expect a reply.
    • To set up the visitor's experience when your team is away during business hours, click the Away tab. Click the Show an away message dropdown menu and select an away mode widget behavior.
      
      
    • To set up the visitor's experience when your team is not available, click the Set offline behavior tab dropdown menu and choose to either show return time, show an away message, or hide the chat launcher when a visitor comes to your site outside of business hours.
    • To set up the visitor's experience when your team is at max capacity (Service Hub Enterprise only), click the If all team members are at max capacity, then dropdown menu and choose to either show a wait message, hide chat launcher or do nothing. Learn more about configuring chat capacity limits for users.
11. Click Next.
12. If you don’t already have a chatflow created, you’ll be prompted to set up your chat heading, welcome message, and assignment.
    
    • Click the Chat heading dropdown menu and select the name and avatar to appear on the chat widget.
    • In the text box, enter a welcome message.
      
      
    • Toggle the Assign incoming conversations switch on and select which users and teams to assign the conversation to.
    • Click the Assign to dropdown menu and select a routing option:
      • Specific users and teams: assign incoming messages to the users or teams selected. Select the users or teams from the Specific users and teams dropdown menu.
      • Contact owner: assign incoming messages to a contact's owner. The contact must have an owner assigned to their record and be tracked with a cookie. If the owner is offline, the submission will be emailed to the visitor's owner.

      Please note: incoming messages can only be automatically routed to users with assigned Sales Hub or Service Hub seats. 

13. To display a preview of the welcome message above the chat widget, select the checkbox to Pop open the welcome message as a prompt.
14. Click Next.
15. Preview how your chat widget will appear on different devices using the device type buttons above the preview.
16. Click Publish, or if you're using the chat widget on an external website, you'll need to add the HubSpot tracking code to your website pages.
    • To add the code yourself, click Copy, then add the code right before the </body> tag on every page you want the chat widget to appear.
    • If you need help adding the code to your pages, click the View instructions for dropdown menu and select your website provider. Click the externalLink external link icon to view the instructions in a separate browser tab. If you host your website on WordPress, click I host my site on WordPress, then follow the instructions to install the HubSpot All-In-One Marketing – Forms, Popups, Live Chat WordPress plugin.

    Please note: if your website is hosted with Wix, you may need to use the Chat widget SDK to target your specific pages for your chatflow. Learn more about adding the tracking code to a website hosted with Wix.

Edit chat channel settings

Once you've connected your chat channel to the conversations inbox, you can customize its appearance, including display color, font, positioning. You can also adjust its behavior and set triggers that control when it appears to visitors, such as scrolling, time on page, or device type.

Customize display color and font

1. In your HubSpot account, click the settings settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Inbox & Help Desk > Inboxes. If you have multiple inboxes set up, use the Current view dropdown menu to select the inbox your chat channel is connected to.
3. Hover over the chat channel and click Edit.
4. On the Configure tab, edit the widget's appearance, including the accent color and font. You can also edit which email address the chat transcript is sent from.

Customize chat widget positioning

Choose where your chat widget should appear on your website pages, and allow visitors to reposition it.

1. In your HubSpot account, click the settings settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Inbox & Help Desk > Inboxes. If you have multiple inboxes set up, use the Current view dropdown menu to select the inbox your chat channel is connected to.
3. Hover over the chat channel and click Edit.
4. In the left sidebar menu, click Web chat.
5. To choose whether your chat widget will appear on the left or right, in the Chat widget placement section, select Left or Right.
6. To allow visitors to drag and reposition the chat widget, toggle the Chat widget movement switch on.
   
   

Learn how to make edits to the configuration and appearance of chatflows in the bot or live chat editor.

Edit mobile SDK settings

If you’re editing a mobile chatflow using the mobile chat SDK, you can access the configuration file and manage notifications for iOS and Android. Learn more about integrating a HubSpot chatflow with a mobile app.

Customize chat channel availability

Set when your team should appear available to chat and let visitors know when they can expect a reply.

1. In your HubSpot account, click the settings settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Inbox & Help Desk > Inboxes. If you have multiple inboxes set up, use the Current view dropdown menu to select the inbox your chat channel is connected to.
3. Hover over the chat channel and click Edit.
4. Navigate to the Availability tab and select an option:
   • Based on user availability: visitors can chat with your team if at least one team member assigned in your assignment rules is available.
   • Based on chat operating hours: set consistent days and times when your team should appear available to chat. Use the dropdown menus to set your team’s availability. Click + Add hours to add additional day and time ranges.
   
   
   • Chat is available 24/7: select this checkbox if your team always appears available to chat.
5. Set the availability behavior of your chatflow and let visitors know when they can expect a reply. Select an option:
   • To display the chat when your team is available, click the Available tab. Click the Show typical reply time dropdown menu to let visitors know when they can expect a reply.
   
   
   • To display the chat when your team is away during business hours, click the Away tab. Click the Show an away message dropdown menu and select a widget behavior.
   • To display the chat when your team is not available, click the Outside working hours and click the Set offline behavior dropdown menu and choose to either show return time, show an away message, or hide the chat launcher when a visitor comes to your site outside of business hours.
   • To set up the visitor's experience when your team is at max capacity (Service Hub Enterprise only), click the If all team members are at max capacity, then dropdown menu and choose to either show a wait message, hide chat launcher or do nothing. Learn more about configuring chat capacity limits for users.
6. In the bottom left, click Save.

You can customize additional chatflow settings, such as the welcome message and avatar, on the Display tab of the rule-based chatbot or live chat editor. Learn more about customizing the appearance and behavior of a live chat, rule-based chatflow, or mobile chatflow.

Learn more about connecting channels to the conversations inbox.