You might want to implement a conversational marketing tool into your Foleon Docs to convert your leads and keep your customers happy. Drift is a messaging app that allows you to talk to your website visitors and customers in real-time. In this article, we show you how to implement the Drift chat widget.
💡 The Google Tag Manager (GTM) feature, which you need for a successful implementation, is not included in every plan. If you're interested in using this functionality, please contact your Customer Success Manager or send an email to success@foleon.com.
In this article
What is Drift?
With Drift’s conversational marketing platform, you can qualify leads faster, automatically book meetings with your sales team, and connect your customers with the right business solutions more efficiently.
In our interactive tour of Foleon, we use the Drift chat widget to answer questions that any visitor has. We have implemented this by using the Google Tag Manager (GTM) field since it allows us to track page changes for the different playbooks.
We'll go over how to implement this chat widget into your Foleon Doc below.
⚠️ You'll need basic knowledge of Google Tag Manager (GTM) to implement Drift into your Foleon Docs.
What to do in Drift
You'll first need to make sure that you have a Drift account. Depending on your plan, there are two different ways to install Drift on your website, with either a free or paid plan.
You'll have to access the code snippet, which you can get by following the steps below in Drift.
- Go to Settings
- Under settings locate App Settings in the side navigation
- Click Drift Widget
- Scroll to Install
- Click JavaScript
- Copy the code snippet
Next, you must place this code snippet in your Google Tag Manager (GTM) container.
💡 For a detailed step-by-step guide from Drift, please check their documentation Installing Drift on your website.
What to do in Google Tag Manager
Once you have copied the code snippet, you'll have to place it in the GTM container.
⚠️ It's important to follow the step-by-step guide from Drift: Install Drift with Google Tag Manager. In this guide, you learn how to place your code snippet in GTM.
Because Foleon Docs are a Single Page Application (SPA), and they work differently from traditional websites, you have to take an extra step in GTM to track page changes. You have to create an additional Custom HTML tag and a History Change trigger.
In GTM, you'll have two tags: one for the code snippet from Drift and one for the page change. In the image below, you can see what that looks like.
The tag for the code snippet will look something like this:
The tag for tracking the page changes will look something like this:
You can find the code that we use for tracking the page changes below. You can use this code to create your tag in Google Tag Manager.
<script>
"use strict";
if(drift) {
drift.page()
}
</script>Once you have successfully set up your tags, copy the code of your container.
What to do in Foleon
You can add your GTM code in the Foleon Doc Settings of your Doc when you scroll down to the Marketing tab.
On the right side, you can copy-paste the script that your tool provides in the "GTM code" field. Paste the code in this field and save your changes.
⚠️ Please note that your custom code will not be active in the preview version of your Foleon Doc, only on the live version. After adding your code to the GTM field, you'll have to publish or republish your content to activate the code.
That's it. Your Drift chat widget will now be active on your Foleon Doc.