Chat is essential for most websites today and HubSpot knows this. That’s why they have built live chat and chat bots into their platform. With WPHubSpot you can easily enable HubSpot chat in WordPress.
These instructions will help you turn on live chat and also set up a chat bot aka conversational bot. HubSpot doesn’t have the most consistent naming convention for chat yet but all chat resides under the chatflows moniker.
If you haven’t already done so, you need to connect HubSpot on your WPHubSite WordPress website. There is nothing extra to configure in your WPHubSite for Chatflows. Chatflows are created and managed entirely in HubSpot.
- Create Your First Chatflow (Live Chat) In HubSpot
- Create A Chatbot (Conversational Bot) In HubSpot For WordPress With WPHubSite
- Delete A HubSpot Chatflow
Create Your First Chatflow (Live Chat) In HubSpot
The first step to turn chat on in HubSpot is to create a live chat. Once you’ve created live chat then you’ll also have the ability to enable what HubSpot calls conversational bots but is more commonly known as a chatbot.
Chatflows is the section where all live chat and conversational bots are located. It’s like the central dashboard for creating and managing chat on your website. You’ll be going into the Chatflows menu option in HubSpot a lot in order to enable HubSpot chat on your WPHubSite WordPress website.
Here’s how to create your first Chatflow so it shows up on your WPHubSite WordPress website. Make sure you’re first logged into the correct HubSpot user and if you have multiple accounts, the correct account too.
Step 1: Click Conversations on the main HubSpot menu.
Step 2: Click on the Chatflows option.
Step 3: Click on the Create chatflow button.
Step 4: Click on the Website block. All communication will eventually go into HubSpot. As you can see the beta is available for Facebook Messenger but you can already connect email and website chat.
Step 5: Click the Add live chat button. If you already have chat added to your account then you may not see this option. Instead you’ll see a screen that lets you choose the type of chat to add. This screen is covered more in the adding a chatbot section of this page.
Step 6: Choose a color or enter the hex code to match your website brand.
Step 7: Choose who the chat box should show from. You can choose several options that allow you to customize who visitors see your website chat come from. Here are your options.
- Custom name and avatar: You get to upload any image you’d like and type in the name who the chat is from. This is a good option if you’d like this to appear as a bot rather than a real person or would just like a generic company avatar.
- Specific users and teams: You can select if the chat windows shows as being from a specific person in your organization or an entire team.
- Contact owner: If a contact is visiting your website and is owned then the chat will show up with the contact’s owner. You can also set up a fallback so anybody who’s anonymous or doesn’t have a contact record in your CRM will see your choice of a specific user and team or a customer name and avatar. Your choice.
Step 8: Type in the message that will pop up over the chat icon before someone clicks to initiate the chat. This should be extremely concise, friendly, and encourage visitors to click. it will look something like this on your website.
Step 9: You can have the welcome message show as a pop up above the button (selected) or have it only show at the top of the chat window when the visitor clicks the chat icon (unselected).
Step 10: Choose where on your website you’d like the live chat to show up. The default for this setting is for live chat to show up on all pages of your website. If you create a chatbot or another live chat later on that overlaps this chat, the more specific targeting will take precedence. There will be more information on targeting later in the chatbot section.
Step 11: Click the Next button.
Step 12: Choose when you’d like the chat to show as available. Whether there’s a team member marked as available or not your chat may show as available if you choose during business hours or always. If you choose based on team member status then it will only show as available if a team member is marked as available.
Step 13: If you’ve selected during business hours then you can input the business hours that show as available for chat. Each option in step 12 will change what shows up in step 13. The one shown here is the most complex.
Step 14: Choose the options for how you’d like the chat to show in different scenarios. Make sure you also click the outside business hours tab so you can customize how the chat looks for outside business hours. You’ll get the following options in the outside business hours tab.
Step 15: Click the Next button.
Item 16: You can click through each of these tabs to see how your chat will look in each view.
Step 17: Click the Next button.
Important: Don’t install the tracking code. You already connected HubSpot with your WPHubSite WordPress website. This step would create a duplicate tracking code and therefore cause issues in browsers.
Step 18: Click the Verify installation button.
That’s it! You’re done setting up live chat on your website. You can go to your website home page (if you chose to show your chat there) and you’ll see your chat icon show up. The following is what that chat looks like that we set up.
You can continue on to go to the HubSpot inbox and see your first chat, a test chat.
Step 19: Click the View message in inbox button. This will bring you to a test chat.
Here’s what the test chat looks like on the desktop browser and HubSpot mobile app.
That’s it for creating your first chatflow in HubSpot. Live chat is great for your website and user engagement but there are some things that can be taken care of with automation.
Chatbots are the perfect solution for taking some things off your plate and HubSpot has the ability to create some powerful automations. The best part is that there are some prebuilt chatbots built right into HubSpot.
Create A Chatbot (Conversational Bot) In HubSpot For WordPress With WPHubSite
HubSpot has some very powerful automations built right into chat flows. There are many options that will let you create your own chatbot with if/then branching and more.
In case creating your own chatbot from scratch isn’t your thing then there are some prebuilt chatbots. We’re going to set up a chatbot that comes prebuilt in HubSpot to let website visitors schedule a meeting.
In order to set this chatbot up, you will need to have a meeting set up in HubSpot without any custom fields. Custom fields do not work well with chatbots in HubSpot.
Ready to take the meeting you already set up and turn it into a chatbot on your website?
Let’s do this!
Step 1: Click the Conversations option on the main HubSpot menu.
Step 2: Click on Chatflows.
Step 3: Click the Create chatflow button.
Step 4: Click on the Website option.
Step 5: Choose the chatflow template you’d like to use. For this example we’re using the book meeting bot.
Step 6: Choose the meeting you’d like website visitors to schedule with. Your meeting chatbot will use all the availability and team member options you set up in the meeting.
Step 7: Click the Next button.
Step 8: Name your bot so you can recognize it if you need to edit it later if necessary.
Item 9: Click on any box to edit the options of it. You can edit messages, how they show up to chatbot users, and more.
Item 10: Click on any Options drop-down to edit it or manage if/then branching. This is similar to clicking on the box itself.
Item 11: Click any of the + icons between steps to add another step in the chatbot. You can create branching scenarios (if the user selects this then do that) among many other options for adding functionality to your chatbot.
Step 12: When you’ve made any changes you’d like to your chatbot then click on the Who tab.
Step 13: Choose who should see this chatbot. You can choose between any of the following.
- Everyone: Anyone who visits your website will see the chatbot pop up no matter if they have a contact record in your CRM or not.
- Anonymous visitors: If someone has been to your website before and filled out a form then they won’t see the chatbot. Only visitors who are either untracked or have never been to your website will see it.
- Tracked contacts: The chatflow will only show to someone who has been to your website and filled something out or used the chat before.
- Segmented lists: Choose from a drop-down menu of available segmented lists in your HubSpot CRM.
Step 14: Click the Save button.
Step 15: Click the When tab.
Step 16: Choose when (or where) you’d like the chatbot to show up. This could be on just one page or a whole sub-section of your website. There are many different scenarios you could choose for what the URL must be in order for a chatbot to show up. Here are some examples:
- Website URL starts with your domain.com/demo: This will show the chatbot on all pages that have the base URL in it (domain.com/demo) and anything after it. So, domain.com/demo/15-minute-demo would show the chatbot.
- Website URL contains demo: This would show up for any page that has the word demo in it. So, domain.com/demo/15-minute would show the chatbot and so would domain.com/15-minute-demo.
- Website URL is domain.com/15-minute: The chatbot would only show up if the exact URL is domain.com/15-minute. It would not show up if the URL was domain.com/15-minute/demo or even domain.com/15-min. This is a very strict and precise way of showing your chatbot.
Step 17: Click the OR button to add more locations where the chatbot will show up. This is helpful if you’d like it to show on a whole sub-section of your website (with starts with) and also a very specific URL (with is).
Step 18: Click the Save button.
Step 19: Click the Options tab.
Step 20: Click on the photo to choose or upload your own. For a bot it’s not a bad idea to show a picture of a bot so there’s no question who someone is talking to. It’s never a good idea to try to fool customers.
Step 21: Name the bot.
Step 22: Choose how you’d like the next message to show up from the bot. Do you want to simulate typing or just have the next message pop up?
Step 23: Choose the timeframe before the chatbot will reset for the user. After the time you chose lapses then the bot will reset and the user will start from the beginning.
Step 24: Sometimes stuff happens. If it does, this box lets you customize the error message shown to users.
Step 25: Choose a language from the list for any interface options to show in.
Step 26: You can choose whether to show the bot based on your teams availability or all the time.
Step 27: If you’re in Europe or would like to ask for consent to process user data, set these options to your preference.
Step 28: Click the Save button.
Step 29: Click on the Preview button to see how your chatbot works.
Step 30: Click on the on/off toggle switch to turn your chatbot on. Your chatbot won’t show up if you don’t toggle it on.
Step 31: Click on the Back to chatflows link to go back to the list of all your chatflows.
That’s it! You’ve set up a full chatbot for your website visitors to schedule a meeting automatically.
There are a number of different things you can do with the chatbot including getting leads and providing support. That’s just the pre-designed chatbots too. There are infinite possibilities for things you can do with your HubSpot chatbot beyond the templates.
Delete A HubSpot Chatflow
Sometimes you no longer need a chatflow. If that’s the case then you can easily delete chatflows that no longer serve your needs. Be 100% sure you want to delete a chatflow before doing so. There’s no easy way to get it back that we know of. Sometimes HubSpot can recover things that were deleted but we can’t validate that and you’d have to go through HubSpot support.
Here’s how you delete any chatflow from anywhere in HubSpot.
Step 1: Click the Conversations drop-down.
Step 2: Click on Chatflows.
Step 3: Hover your cursor over the chatflow you’d like to delete.
Step 4: Click on the More drop-down (or up) menu.
Step 5: Click on the Delete option.
That’s it! The chatflow will now be deleted from HubSpot. Now it’s time to move onto bigger better things.