Last updated: June 26, 2020
Create chatflows for your website to engage with your website visitors. You can create two different types of chatflows:
- Live chat: a prompt with no associated bot that sends visitors to chat directly with your live team.
- Bot: an automated chat bot that sends templated responses to your visitors.
Please note: only users with Admin access can create and edit chatflows.
Click the links below for instructions on creating live chats or bots:
Create a live chat
- In your HubSpot account, navigate to Conversations > Chatflows.
- In the top right, click Create chatflow.
- In the left sidebar, select Welcome visitors.
- In the upper right, click the pencil icon 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 welcome message
You'll be brought to the Build tab of the chatflow setup. Here you'll customize the chat widget behavior and create a welcome message that will greet your visitors.
- Click the Chat heading dropdown menu and select whose name and avatar should appear on the chat widget.
- 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.
- Custom name and avatar: display a generic team name and image.
- Contact owner: click the New visitor fallback dropdown menu and select a fallback option for any new or unassigned visitors who start a chat.
- In the text box, write a welcome message that will appear when a visitor first starts a chat. Learn more about changing the welcome message language.
- To set who incoming conversations are routed to, click the Automatically send incoming conversations to dropdown menu. Learn more about setting up routing rules in your conversations inbox.
- Click the Ask visitors for their email address dropdown menu and specify when visitors will be asked to provide their email address.
- In the Email capture message text box, enter the message to display when you ask a visitor for their email address.
- In the Display option section, customize the chat widget's behavior on desktops or small screen sizes:
- If you don't want a welcome message preview to display on desktop screens until the visitor clicks the chat icon, clear the Pop open the welcome message as a prompt checkbox.
- If you don't want the welcome message preview to appear on small screen sizes until the visitor clicks the chat icon, clear the Pop open the welcome message as a prompt checkbox. If you don't want the chat widget to appear at all, clear the Show chat icon on small screen sizes checkbox.
-
Click Preview in the top-right corner to see a preview of your live chat.
- Click Save, then click the Who tab to move on to the next step.
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 who 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, an additional
dropdown menu will appear, and you can select your smart list from here.
- If you want to hide your message from contacts who meet specific list criteria, click the Hide message from dropdown menu.
- Click Save, then click the When tab to move on to the next step.
Please note: if you select Tracked contacts or Segmented lists as your target audience, visitors who meet
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.
- Click the first dropdown menu and select Website URL or Query Param:
- If you target your live chat widget based on Website URL:
- Use the dropdown menu to select a targeting option for your website URL. Your options are: is all pages, is, isn't, contains, doesn't contain, starts with, or doesn't start with.
- Enter the specific URL.
- Use the wildcard option by adding * anywhere in the URL to capture all URLs that begin with the target URL. Multiple wildcards can be used within the same URL.
- If you want to target your live chat widget based on Query Param:
- Enter the parameter name.
- Use the dropdown menu to select a targeting option for your query parameters. Your options are: is all pages, is, isn't, contains, doesn't contain, starts with, or doesn't start with.
- Enter the parameter value.
- If you target your live chat widget based on Website URL:
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 live chat widget to appear.
- Click OR to add more rules, or to delete an existing targeting rule, click the trash icon .
- Click Save, then click the Options tab to move on to the next step.
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.
- Click the Select a language dropdown menu and select a language preference for your contextual widget data, then click Save.
- 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 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.
- In the Process consent text field, explain why you need to store and process your customer's personal information.
- Click the Consent type dropdown menu and select one of the following:
- 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 which 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.
- 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 are 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.
Create a bot
When creating a chat bot chatflow, you can select from three different 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 top right, click Create chatflow.
- In the left sidebar, select a bot template: Qualify leads, Book meetings, or Support bot.
Please note: only Service Hub users with Admin access can create support bots.
- In the upper right, click the pencil icon 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 welcome message
You'll be brought to the the Build tab of the chatflow set up. Here you can 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.
- In the Welcome message panel that opens on the right:
- Enter text for a welcome message.
- In the Display options section, customize the bot widget's behavior on desktops or small screen sizes.
- If you don't want the welcome message preview to appear, clear the Pop open the welcome message as a prompt checkbox on the Desktop tab.
- If you don't want the welcome message preview to appear on small screen sizes until the visitor clicks the chat icon, clear the Pop open the welcome message as a prompt checkbox. If you don't want the chat icon to appear at all, clear the Show chat icon on small screen sizes checkbox.
- Click Save.
- After setting up the welcome message, select a bot message or action to modify by clicking on the action in the bot template.
- In the right panel, modify the bot action. Learn more about setting up a bot action.
- Once you're done editing the action's settings, click Save or click the If/then branches tab to set up the flow of your conversation. Learn how to use if/then branches in your bot message.
Please note: Starter and free users cannot add custom conditions.
- To add new questions or actions, click the plus icon .
- In the top right, click Preview to see what your bot will look like on your website.
- When you're done editing your bot's actions, click the Who tab to move to the next step.
2. Who - select a target audience
Specify who should see the bot 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 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, an additional
dropdown menu will appear, and you can select your smart list from here.
- If you want to hide your message from contacts who meet specific list criteria, click the Hide message from dropdown menu.
- Click Save, then click the When tab to move on to the next step.
Please note: if you select Tracked contacts or Segmented lists as your target audience, visitors who meet
3. When - decide when the chatflow should appear on a page
On the When screen, specify exactly when your bot should appear on your website. You can trigger a bot 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:
- If you target your bot based on Website URL:
- Use the dropdown menu to select a targeting option for your website URL. Your options are: is all pages, is, isn't, contains, doesn't contain, starts with, or doesn't start with.
- Enter the specific URL.
- Use the wildcard option by adding * anywhere in the URL to capture all URLs that begin with the target URL. Multiple wildcards can be used within the same URL.
- If you want to target your bot based on Query Param:
- Enter the parameter name.
- Use the dropdown menu to select a targeting option for your query parameters. Your options are: is all pages, is, isn't, contains, doesn't contain, starts with, or doesn't start with.
- Enter the parameter value.
- If you target your bot based on Website URL:
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 to delete an existing rule.
- Click Save, then click the Options tab to move on to the next step.
4. Options
Customize your bot's display options.
- Enter a display name for the bot in the Chat heading field.
- To edit your avatar's photo, hover over the avatar and click Change photo.
- To customize the response visitors see when a request fails, enter error messaging in the Error response field.
- 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 change the bot's display language, click the Select a language dropdown menu and select a different language.
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.
- In the Process consent text field, explain why you need to store and process your visitors' personal information.
- 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.
