How to implement HubSpot chat

You might want to implement a conversational marketing tool into your Foleon Docs to convert your leads and keep your customers happy. HubSpot lets you talk to your website visitors and customers in real time. In this article, we show you how to implement a HubSpot chatflow into your Foleon Doc.

What is HubSpot chat?

With HubSpot chat, you can connect with your website visitors in real-time to convert new leads, close more deals, and provide better support to your customers.

We'll go over how to implement this chat widget into your Foleon Doc below.

Implement HubSpot chat

Step 1: Make sure the HubSpot tracking code is installed

Because you're adding a chatflow to a Foleon Doc, which is hosted externally from HubSpot, you need to install the HubSpot tracking code in the project settings. 

If you already have the HubSpot tracking code installed in Foleon, you do not need to install this code snippet separately.

Step 2: Add the domain on which you host your Doc(s)

In HubSpot, you must add the domain on which you host your Foleon Doc(s) that will feature the chatflow.

Go to settings, open tracking code, and select advanced tracking. Click + Add domain at the bottom of the Additional site domains table. Enter a domain and then click Add.

Step 3: Create your chatflow 

If you haven't already, create your chatflow.

When you're building your chatflow, you have to set the targeting rules correctly. This ensures your chat widget appears on the correct Foleon Doc. In the chatflow builder, click target.

Here, you insert the domain (URL) on which you host your Foleon Doc(s) that will feature the chatflow.

For example, to have your chat widget appear on ebooks.acme.com, add it as a rule in the website URL. It's possible to add multiple rules, so your chat widget appears on multiple domains.

Once you've set up your chatflow and switched it on, this is what your chatflows overview will look like:

Step 4: Get your chatflow tracking code

It's now time to copy the tracking code of the chatflow you want to implement.

Go to settings, scroll down to tools > inbox > inboxes. In the channels tab, click edit. 

Click tracking code and copy the code.

Step 5: Place your chatflow tracking code in the remarketing field

The chatflow tracking code you've copied in step four will look something like this:

<!-- Start of HubSpot Embed Code -->
  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/XXXXXXX.js"></script>
<!-- End of HubSpot Embed Code -->

window.foleon('onPageChange', function() {
    window.HubSpotConversations.widget.refresh();
});

Alternatively, you can also use Google Tag Manager (GTM) for implementing your HubSpot chatflow.

Step 6: Publish your Foleon Doc

Publish your Foleon Doc and test your setup. That's it! Your HubSpot chatflow will now be active on your Foleon Doc.