Implementations via GTM can differ depending on your configuration, so use this article as an orientation to adapt your implementation to your needs.
Embedding Static Flows
Static Flows are the base of our product, allowing you to customise what posts to display in a given page.
To implement via GTM, begin by going to the "Tags" section and click on "New".
In the Tag Configuration section, select "Custom HTML" and paste the following code:
<script>
(function(d, id) {
if (!window.flowbox) { var f = function () { f.q.push(arguments); }; f.q = []; window.flowbox = f; }
if (d.getElementById(id)) {return;}
var s = d.createElement('script'), fjs = d.scripts[d.scripts.length - 1]; s.id = id; s.async = true;
s.src = 'https://connect.getflowbox.com/flowbox.js';
fjs.parentNode.insertBefore(s, fjs);
})(document, 'flowbox-js-embed');
</script>
<script>
// Provide a CSS selector target for the element immediately before the flow
var flowPreviousElement = "ENTER CSS SELECTOR OF PREVIOUS ELEMENT";
var flowContainerId = "js-flowbox-flow";
var flowContainer = document.createElement("div");
flowContainer.setAttribute("id", flowContainerId);
document.querySelector(flowPreviousElement).after(flowContainer);
window.flowbox("init", {
container: '#' + flowContainerId,
key: 'ENTER FLOW KEY OF THE FLOW YOU WANT TO DISPLAY',
locale: 'ENTER THE "language-COUNTRY" CODE OF AN EXISTING CATALOG',
});
</script>
The above code needs some customisation. You'll need to add the CSS selector of the HTML element located just before where you want the Flow to display, the locale of the catalog you'll like to fetch the product data from and the Flow key of the Flow you'll like to display.
The easiest way to find the key is by copying it from the "Copy Flow Key" option in the meatball (three-dot) menu in the Flows section
In the Triggering section, select the "Window Loaded" trigger. By selecting "Some Window Loaded Events" you can customise in what pages the Tag will load.
After clicking on "Save" and returning to the Tags page, click on Submit.
You'll have the option to add a name and brief description. To finish, click on Publish.
Embedding Dynamic Flows
The process of embedding a Dynamic Flow script is the same as for Static Flows. The main difference between a static and a dynamic Flow is the use of an additional parameter in the embed code, productId for Dynamic Product Flows and tags for Dynamic Tag Flows.
You'll have to retrieve the value to pass to the productId or tags parameter from the DataLayer.
Embedding the Checkout script
To implement our Checkout script in your order confirmation or thank you page, you'll need to follow the same steps detailed above. When selecting the trigger, please make sure that you add a condition so this scripts only loads after a conversion has been made.
You need to customise the Checkout script to retrieve the necessary data from the DataLayer.