Chatflows

Create chatflows

Last updated: December 11, 2019

Create a chatflow to add to your website so your visitors can engage with you and your team. These chatflows appear as chat widgets on your website pages. There are two different types of chatflows:

  • Live chat: a prompt with no associated bot that allows visitors to chat directly with your live team.
  • Bot: an automated chat bot that sends templated responses to your visitors.
You can also create a chatflow for your Facebook Messenger account. Learn how to create a chatflow for Facebook Messenger.

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

Create a live chat

  • In your HubSpot account, navigate to Conversations > Chatflows.
  • In the upper right, click Create chatflow.
  • Select Website.
  • In the left sidebar, select Welcome visitors.
  • To change the language of your chatflow from English, n the upper right, click the pencil icon edit and select a language from the dropdown menu.
  • 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 chatflow 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 API, learn more about using the HubSpot conversations API in our developer’s documentation.

  • To select the name and avatar that appears on the chat widget, click the Chat heading dropdown menu.
    • 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 checkbox(es) next to the name(s) 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.
  • To customize the message that appears when a visitor first starts a chat, enter a message in the click the Write a welcome message text box. Learn more about changing the welcome message language.
  • To set who incoming conversations are routed to, 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.
  • 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. chatflows-welcome-message
  • In the Display option section, customize the chat widget's behavior on desktops or small screen sizes:
    • To prevent the welcome message preview from appearing on desktop screens until the visitor clicks the chat icon, clear the Pop open the welcome message as a prompt checkbox.
      Please note: if all users assigned to the chat are away, the welcome message preview will not pop open regardless of the option selected.
    • To prevent the chat widget from appearing on small screen sizes, clear the Show chat icon on small screen sizes checkbox.
    • To prevent the welcome message preview from appearing on small screen sizes until the visitor clicks the chat icon, clear the Pop open the welcome message as a prompt checkbox.
  • In the top right, click Preview to see a preview of your live chat.

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

Please note: to edit the color, branding, and position of the chat widget on your website, you need to make changes to the chat’s channel settings in your inbox settings.

2. Who - select a target audience

On the Who tab, specify which visitors should see the live chat widget on your website.

  • Select one of the following audiences:
    • Everyone: anyone who visits your site will see your live chat widget.
    • Anonymous visitors: only untracked visitors who visits your site will see your live chat widget.
    • Tracked contacts: only tracked contacts who exist in your HubSpot account will see your live chat widget.
    • Segmented lists: only tracked contacts who meet your smart list criteria will see your live chat widget. If you select this option, click the additional dropdown menu to select your smart list.

Please note: if you select Tracked contacts or Segmented lists as your target audience, visitors who meet this criteria must have a tracking cookie associated with their contact record to see your live chat widget.

  • To hide your message from contacts who meet a specific list criteria, click the Hide chatflow from dropdown menu and select the list.
  • To continue, click Save at the bottom, then click the When tab in the left sidebar.

3. When - decide when the chatflow should appear on a page

On the When tab, specify when the chat widget should appear on your website. You can trigger a live chat widget when a visitor loads a specific website URL, or when they load a URL that includes certain query parameters. By default, the chat widget will appear on all HubSpot-hosted pages. To change when the chat widget loads:

  • Click the first dropdown menu and select Website URL or Query Param:
    • When you select Website URL:
      • Click the second dropdown menu and select a targeting rule for your website URL. The options are: is all pages, is, isn't, contains, doesn't contain, starts with, or doesn't start with.
      • When selecting an option other than is all pages, enter the specific URL.
      • To add a wildcard option, enter the * character anywhere in the URL. This allows you to display your chat widget on multiple pages without explicitly defining each URL. Multiple wildcards can be used within the same URL.
    • When you select Query Param:
      • Enter the query parameter.
      • Click the second dropdown menu and select a targeting option for your query parameters. Your options are: is, isn't, contains, doesn't contain, starts with, or doesn't start with.
      • Enter the parameter value. chatflows-when-tab-url-targeting

Please note: the option is all pages only applies all pages created in HubSpot and does not include external pages with the HubSpot tracking code. Select other options, such as contains, to specify external pages where you want the live chat widget to appear.

  • Click OR to add more rules, or to delete an existing targeting rule, click the trash icon delete.
  • To continue, click Save at the bottom, then click the Options tab in the left sidebar.

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 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 upper right, click to toggle the switch on to add it to your website pages. To customize the chat widget's appearance and your team's live chat availability, learn how to edit the chat channel in your inbox settings. If you are ready to start chatting with your website visitors, learn how to respond to incoming messages in your conversations inbox.

enable-chatflow

Create a bot

When creating a chatflow that includes a bot, you can select from three different bot templates, then customize your bot actions and routing logic to determine the flow of the conversation.

  • In your HubSpot account, navigate to Conversations > Chatflows.
  • In the upper right, click Create chatflow.
  • In the left sidebar, select a bot template: Qualify leads bot, Book meetings bot, or Support bot.

    Please note: only Service Hub users with Admin access can create support bots.

  • In the upper right, click the pencil icon edit and select a language from the dropdown menu.
  • Click Next.
  • In the dialog box, click the dropdown menu and select a shared inbox.

1. Build - create a bot welcome message

On the Build tab, customize the bot template and create a welcome message that will greet your visitors.

  • To edit the welcome message content, click the Welcome message step in the bot template. chat-bot-welcome-message
  • In the Welcome message panel that opens on the right:
    • Enter a welcome message.
    • In the Display options section, customize the bot widget's behavior on desktops or mobile screens.
      • To prevent the welcome message preview from appearing on desktop until a visitor clicks the chat icon, on the Desktop tab, clear the Pop open the welcome message as a prompt checkbox.
      • To prevent the chat widget from appearing on small screen sizes, click the Mobile tab then clear the Show chat icon on small screen sizes checkbox
      • To prevent the welcome message preview from appearing on small screen sizes until the visitor clicks the chat icon, click the Mobile tab then clear the Pop open the welcome message as a prompt checkbox.
    • Click Save.chatflows-chatbot-welcome-message
  • To modify a bot message or action, click the action in the bot template. In the right panel:
    • Edit the bot action. The settings you can modify vary depending on which type of action you're editing. Learn more about setting up a bot action.
    • If you're a Professional or Enterprise user and want to customize the flow of the bot conversations, click the If/then branches tab. Learn how to use if/then branches in your bot actions.

Please note: Starter and free users cannot add custom conditions.

add-a-bot-action

  • To reconnect any actions that became disconnected when editing your bot's flow, click the Alerts button in the top left. You can also search for any disconnected actions using the Go to action search bar in the upper right.review-disconnected-actions
  • When you're done editing the bot's actions, you'll see each action in the bot's path in a single view. You can view and make changes to your if/then branch logic, edit an individual action's settings, or search for a specific action using the Go to action search bar in the top right.
  • To see what the bot will look like on your website, n the top right, click Preview.
  • To continue, click Save at the bottom, then click the Who tab in the left sidebar.

2. Who - select a target audience for your bot

On the Who tab, specify which visitors should see the live chat widget on your website.

  • Select one of the following audiences:
    • Everyone: anyone who visits your site will see your bot.
    • Anonymous visitors: only untracked visitors who visits your site will see your bot.
    • Tracked contacts: only tracked contacts who exist in your HubSpot account will see your bot.
    • Segmented lists: only tracked contacts who meet your smart list criteria will see your bot. If you select this option, click the additional dropdown menu to select your smart list.

Please note: if you select Tracked contacts or Segmented lists as your target audience, visitors who meet this criteria must have a tracking cookie associated with their contact record to see your bot.

  • To hide your bot from contacts who meet a specific list criteria, click the Hide chatflow from dropdown menu and select the list.
  • To continue, click Save at the bottom, then click the When tab in the left sidebar.

3. When - decide when the chatflow with a bot should appear on a page

On the When tab, specify when the chat widget should appear on your website. You can trigger a live chat widget when a visitor loads a specific website URL, or when they load a URL that includes certain query parameters.

  • Click the first dropdown menu and select Website URL or Query Param:
    • When you select Website URL:
      • Click the second dropdown menu and select a targeting rule for your website URL. The options are: is all pages, is, isn't, contains, doesn't contain, starts with, or doesn't start with.
      • When selecting an option other than is all pages, enter the specific URL.
      • To add a wildcard option, enter the * character anywhere in the URL. This allows you to display your chat widget on multiple pages without explicitly defining each URL. Multiple wildcards can be used within the same URL.
    • When you select Query Param:
      • Enter the query parameter.
      • Click the second dropdown menu and select a targeting option for your query parameters. Your options are: is, isn't, contains, doesn't contain, starts with, or doesn't start with.
      • Enter the parameter value.

chatflows-when-tab-url-targeting

Please note: the option is all pages only applies all pages created in HubSpot and does not include external pages with the HubSpot tracking code. Use other options, such as contains, to specify external pages where you want the bot to appear.

  • Click OR to add more rules or click the trash icon delete to delete an existing rule.
  • To continue, click Save at the bottom, then click the Options tab in the left sidebar.

4. Options (bot)

Customize your bot's display options.

  • Enter a display name for the bot in the Chat heading field.
  • To edit your avatar's image, hover over the avatar and click Change photo.
  • To customize the amount of time after inactivity before the chat session is reset to the beginning, click the Session timeout dropdown menu and select an option. The chat session will not reset if a visitor completed every bot action in a past session.
  • To set a delay between each message that is sent to visitors, click the Typing delay between messages dropdown menu and select an option.
  • To customize the response visitors see when a request fails, enter error messaging in the Error response field.
  • To change the bot's display language, click the Select a language dropdown menu and select a different language.
  • To decide if the chatflow should appear based on the team's availability you set at the inbox level, click the Availability dropdown menu and select an option. Learn more about customizing your bot's availability preferences. chatflows-bot-options

If you've enabled GDPR in your account, you can also include a step to ask your website visitors for their consent to process their data.

  • To capture a 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: with this option enabled, visitors will 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, by they do not need to click I agree to start the chat.updated-chat-widget
  • In the Process consent text field, explain why you need to store and process your visitors' personal information.chatflows-live-chat-consent-to-process-data
  • Click Save.

When you are done editing the bot, in the upper right, click to toggle the switch on to add it to your website pages. Learn how to respond to incoming messages in your conversations inbox. enable-chatflow

/conversations/create-chatflows