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.
💡 The remarketing code field, which you need for a successful implementation, is not included in every plan. If you want to use this functionality, please contact your Customer Success Manager or email success@foleon.com.
In this article
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.
⚠️ You'll need basic knowledge of tracking code scripts to implement a HubSpot chatflow into your Foleon Docs.
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.
📖 For a detailed guide to installing your HubSpot tracking code into Foleon, read our article Tracking Foleon Doc engagement in HubSpot.
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.
💡Not sure what your domain is? Learn more in our article Hosting Foleon Docs.
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.
📖 To learn more about building a chatflow, we recommend reading HubSpot's documentation: Create a live chat or Create a bot.
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 -->
⚠️ Custom code is always the responsibility of the creator. Although the remarketing code field is easy to use, ensure you know your custom code inside out. If you're not very experienced with coding, we don't recommend using this feature.
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.
⚠️ Please note that your custom code will not be active in the preview version of your Foleon Doc, only on the live version.