How To Setup And Use HubSpot Live Chat With Avada

19/11/2019

HubSpot is an inbound marketing and sales cloud-based software suite, and their free plugin is now one of the Recommended Plugins for Avada. Their tools and service offerings help companies and individuals attract visitors, convert leads, control their marketing efforts, manage their sales processes, and so much more. Using HubSpot with the Avada WordPress theme gives you the confidence to turn your site into a marketing powerhouse.

HubSpot is loaded with features, and it’s one of these we will look at in this document – Live Chat. Read on to see how to set Hubspot up for a live chat with your website users.

Configure The Conversations Inbox

Once you have installed the HubSpot plugin and connected your account (see Setting Up Hubspot in Avada for more info on those steps), you are ready to configure your HubSpot account for live chat.

The first thing to do is to edit and configure your default Conversations Inbox. A conversations inbox streamlines and centralizes communication with your contacts. You can connect team emails and/or chat channels to the inbox, and then view, reply, and manage all conversations from each channel in one place.

This is all done in your HubSpot account. Let’s walk through it.

  • Step 1: In your HubSpot account, click the settings icon in the main navigation bar.

  • Step 2: In the left sidebar menu, navigate to Conversations Inboxes.

  • Step 3: Edit the default Inbox and go to the Chat tab.

  • Step 4: Here, you can configure your chat inbox as you like. You can set things like the color and placement of your chat box, it’s availablilty, and transcript options (see screenshot below). If you want, you can also configure the Chatbox to connect to a Facebook page to receive Facebook Messenges in your Conversations Inbox.

Insert The Tracking Code

  • Step 5: Once you have configured it as you prefer, on the Tracking Code tab, you will find the embed code you need for your website. Copy this, and paste it into the Theme Options on your website, in the Advanced > Code Fields (Tracking etc) > Space before  section, as seen below.

Insert HubSpot code

Create A Chatflow

  • Step 6: Before you can start chatting with your visitors, you need to create a Chatflow. You can configure options both live chat and bot responses, but the first step in this is to create a Welcome message for your visitors. The easiest way to do this is to click on the “Create Chatflow” button at the top of the Chat configuration page. This walks you through a well constructed wizard to create a Chatflow for your visitors, as seen below.

    This wizard is fully featured, and as you can see, there are a range of options for building the chatflow, as well as options for who sees the Chatflow and when they see it, as well as other chatflow options.

Create Chatflow > Welcome Message

Start Chatting!

That’s it. Once you have completed your Chatflow, you will see the Live Chat box at the bottom of your website, as seen below. If you choose a specific user for the Chat heading, be sure to configure the associated profile under Settings > Conversations > My Profile in your HubSpot account. In the screenshot below, we added a Custom Name and Avatar as the Chat Heading, to match the website.

HubSpot Chat Box

When users click on the chat prompt, they can see the full Chat Box, and if you are currently active (depending on the hours you set up in the settings), then you can immediately begin to chat.

HubSpot Chat Box Expanded