Chatflows

Create a live chat

Last updated: June 30, 2020

Create a chatflow with live chat to connect visitors directly with members of your team. The live chat will appear as a widget on your website pages that visitors can click to start a real-time conversation with someone on your team. You can create a live chat to connect a visitor on your pricing page to a member of your sales team, or another live chat that connects a visitor on your knowledge base articles to a member of your support team.

Please note: only users with Account access permissions can create and edit chatflows.

If you want to create a chatflow with a bot that sends automated responses to your website visitors, learn how to create a bot.

live-chat-exampleYou can also create a live chat for your Facebook Messenger account. Learn how to create a chatflow for Facebook Messenger.

Before you get started

Before you can create a live chat, connect a chat channel to the conversations inbox. The chat channel is where you can customize your team's availability and the appearance of the widget. In addition, if you're adding the live chat to a website that is not hosted with HubSpot, you need to add the tracking code your external pages before you create a live chat. The live chat will not appear if the tracking code is not installed.

  • In your HubSpot account, navigate to Conversations > Chatflows.
  • In the upper right, click Create chatflow.
  • Select Website.
  • In the left sidebar, select a live chat option:
    • If you want a visitor to be able to immediately start a chat with you and your team, select Live chat
    • If you're a user in a Service Hub Professional or Enterprise account and have at least three published knowledge base articles, select Knowledge base search & live chat to add the option to search the knowledge base directly from your live chat widget. 
  • Click Next.
  • If you have multiple inboxes set up in your account, click the Select an inbox dropdown and select a different inbox.
  • To change the language of your chatflow from English, on the left, click the Select a language dropdown menu and select another language.
  • Click Next.
  • If you have more than one conversations inbox set up, in the dialog box, click the dropdown menu and select a shared inbox.

1. Build - create a welcome message

You'll be redirected to the Build tab of the live chat setup. Customize the chat widget behavior and create a welcome message that will greet your visitors.

Please note: if you want to embed a chat widget on your single-page app or customize your live chat using an API, learn more about using the HubSpot conversations API in our developer’s documentation.

  • To customize the message that appears when a visitor first starts a chat, enter a message in the Write a welcome message text box. Learn more about changing the welcome message language.
  • To add the knowledge base search bar to your live chat, click to toggle Enable knowledge base search switch on.
  • To route incoming conversations to specific team members, click to toggle the Automatically assign conversations switch on. Then, use the dropdown menus to select which users or teams to assign the conversations to. Learn more about setting up routing rules in your conversations inbox.

Please note: only users with assigned Sales Hub or Service Hub paid seats can be included in your routing rules.

  • To specify when visitors should be asked to provide their email address, click the Ask visitors for their email address dropdown menu. Learn more about creating contacts in the conversations inbox.
  • In the Email capture message text box, enter the message to display when the chat widget asks a visitor for their email address.

updated-live-chat-build-tab

  • In the top right, click Preview to see a preview of your live chat.

  • To continue, click Save at the bottom, then click the Target tab in the left sidebar.

2. Target - decide where the live chat should appear

On the Target tab, you can decide where the live chat widget will appear on your website pages. You can display the live chat widget when a visitor is on a specific page URL, or based on known information about your visitors. You can also combine the targeting options to create a tailored, personalized experience for visitors to your site. Learn more about the different targeting options and targeting rules you can use with your chatflows.

  • To show the live chat widget when a visitor is on a specific website URL, in the Website URL section:
    1. Click the first dropdown menu and select Website URL.
    2. Click the second dropdown menu and select a targeting rule.
    3. Enter your rule criteria in the text field.website-url-targeting
  • To show the live chat widget when a visitor is on a website page whose URL includes specific query parameters:
    1. Click the first dropdown menu and select Query parameter.
    2. In the first text field, enter the query parameter name.
    3. In the second text field, enter the query parameter value.query-parameter-targeting
  • To add another rule, click Add rule.
  • To exclude the live chat widget from certain pages (e.g., a privacy policy page), click Add exclusion rule.

You can also target your live chat to specific contacts based on known information about them. To set criteria based on visitor information, in the Visitor information and behavior section:

  • Click the first dropdown menu and select a filter. You can use filters that specifically target known contacts or unknown visitors.
  • Click the second dropdown menu and select your criteria.
  • To add another rule, click Add rule.
  • To exclude the pop-up form on certain pages (e.g., a privacy policy page), click Add exclusion rule.
  • To create another filter group with additional targeting rules, click Add filter group.target-based-on-visitor-behavior
  • To continue, click Save at the bottom, then click the Display tab in the left sidebar.

3. Display - customize the live chat's appearance

On the Display tab, customize the live chat's display settings, including the chat heading, the chat widget behavior, and the chat widget triggers. To edit the live chat's accent color and placement on the page, learn how to further customize the chat widget's appearance in your inbox settings.

  • Click the Chat heading dropdown menu and select the name and avatar to appear on the chat widget.
    • Custom name and avatar: display a generic team name and image. Click the plus icon add to upload an image, and enter the name to display.
    • Specific users and teams: select the checkboxes next to the names to display. If you select more than three users, the three users will be displayed randomly. Learn how your chatflow language impacts your display name.
    • Contact owner: click the New visitor fallback dropdown menu and select a fallback option for any new or unassigned visitors who start a chat.edit-live-chat-heading
  • In the Chat display behavior section, control the widget's behavior on desktop or mobile screens.
    • On the Desktop tab, select the radio button next to the preferred display behavior:
      • Pop open the welcome message as a prompt: display a preview of the welcome message above the chat widget.
      • Only show the chat launcher: only display the chat launcher so visitors have to click to open the chat window.
      • Open the chat widget: the chat widget will be open by default so visitors can immediately start a conversation with you.
    • On the Mobile tab, select the radio button next to the preferred display behavior:
      • Pop open the welcome message as a prompt: display a preview of the welcome message above the chat widget.
      • Only show the chat launcher: only display the chat launcher so visitors have to click to open the chat window.chat-display-behavior-desktop-and-mobile

Please note: to disable the chatflow on mobile devices, you can add an exclusion rule in your targeting settings to hide the chatflow when someone views your page on a mobile device.

  • You can also decide when to load the chat widget on the page. Select the checkbox next to the chat display trigger.
    • On exit intent: trigger the live chat widget when a visitor's mouse moves toward the top of the browser window.
    • Time on page in seconds: trigger the live chat widget when a specified amount of time (in seconds) passes while the visitor is on the page.
    • Percentage of the page scrolled: trigger the live chat widget when the visitor has scrolled to a certain point on the page.
  • To continue, click Save at the bottom, then click the Options tab in the left sidebar.

Please note: after you finish setting up your live chat, you can automatically open the chat widget when a visitor loads a specific page URL. Append #hs-chat-open to the end of a page URL. You can then link these URLs in your emails, landing pages, and other marketing campaigns to send visitors directly to your chat widget so they can contact one of your team members immediately.

4. Options

On the Options tab, customize your live chat's language settings. If you've enabled General Data Protection Regulation (GDPR) in your account, you can also customize your live chat to include a step to ask your website visitors for their consent to communicate.

  • To enable the cookie consent text for the live chat widget, click to toggle the Consent to collect chat cookies switch on. You cannot customize the consent to cookies text that appears in the banner.
  • To capture visitors' consent to process their data, click to toggle the Consent to process data switch on.
    • Click the Consent type dropdown menu and select one of the following:
      • Require explicit consent: visitors need to click I agree before they can send a message.
      • Legitimate interest: visitors' consent is implied when they start to chat with you. The consent to process data text will still display, but they do not need to click I agree to start the chat. updated-chat-widget
    • In the Process consent text field, enter text to explain why you need to store and process the visitor's personal information.chatflows-live-chat-consent-to-process-data
  • To opt a visitor into a subscription type when they start to chat with you, click to toggle the Consent to communicate switch on.
    • Click the Subscription type dropdown menu and select the subscription type you are opting your visitors into.
    • Use the Checkbox label text field to inform customers what type of communication they're consenting to.chatflows-live-chat-consent-to-communicate
  • Click Save.

Please note: while these features live in HubSpot, your legal team is the best resource to give you compliance advice for your specific situation.

When you're done setting up your live chat, in the top right, click to toggle the switch on to add it to your website pages. If you are ready to start chatting with your website visitors, learn how to respond to incoming messages in your conversations inbox.

enable-chatflow

/chatflows/create-a-live-chat?_ga=2.203540947.234781485.1589848051-1001250180.1586197692