Flowbox is partnered with leading ecommerce platform Magento, to offer a first-class visual marketing experience for ecom sites.

Before you begin

Before we begin, make sure that you have a copy of your Flowbox 'Flow key'.

To find your 'Flow key', log into Flowbox and select your Flow, then click on the meatball (three-dot) menu to copy the key:

It is also a good idea to read through our general guide on Dynamic Tag Flows first.

Embedding a Dynamic Tag Flow

The first step to embedding Flows in Magento 2 is including the flowbox.js script in the HTML <head> section in order to call the function across your site.

Note: if you have already implemented a Static Flow on your Magento 2 site and carried out these steps, you can ignore this section.

In order to do this, follow these steps:

1. Log into your Magento account. Note: make sure you have full permission levels to access the admin settings.

2. Navigate to the Admin Panel, click on ‘Content’ and ‘Configuration’.

3. Choose the store view that you want the head tag to be changed on or select Global in order to change it on every store view.

4. Scroll down to the ‘HTML Head’ section.

5. In the Scripts and Style Sheets field, add this snippet:

<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>

6. Once you’ve added your script, click on the ‘Save Configuration’ button.

7. It is always recommended to flush the cache in Magento after each update.

Flush the cache

To flush the cache, go back to the Admin Panel, click on ‘System’, then ‘Cache Management’.

Click on the orange ‘Flush Magento Cache’ button. When completed, you will see a success message pop up on the screen.

Embed a Dynamic Tag Flow in a Page

Embedding a Dynamic Tag Flow on a page in Magento 2 is a great way to pull in and show off lots of content with different tags in one space.

1. Go to the Admin Panel and click on ‘Content’, then ‘Page’.

2. Click on ‘Add New Page’.

3. Important step! Make sure you enable the page (green toggle), before clicking on ‘Content’ to edit the page.

4. Once in Content view, click on ‘Show/Hide Editor’ to be able to embed the script.

5. Now you can paste your script into the main text box:

<div>
 <div class="tags" style="display: flex;
 justify-content: center;
 margin-bottom: 50px;
 cursor: pointer;">
 <button style="margin: 5px;" data-tag="">All</button>
 <button style="margin: 5px;" data-tag="football-shoes" class="active">Football Shoes</button>
 <button style="margin: 5px;" data-tag="workout-clothes">Workout Clothes</button>
 <button style="margin: 5px;" data-tag="football">Football</button>
</div>
<div id="js-flowbox-flow"></div>
</div>
<script>
 var allTags = new Array();
 for (i=1; i<document.querySelectorAll('button[data-tag]').length; i++){
   allTags.push(document.querySelectorAll('button[data-tag]')[i].dataset.tag);
 }

 window.flowbox('init', {
   container: '#js-flowbox-flow',
   key: 'YOUR FLOW KEY',
   locale: 'language-COUNTRY',
   tags: allTags,
   tagsOperator: "any"
 })
</script>
<script>
function updateFlow (tag, tagsOperator) {
 window.flowbox('update', {
   key: 'YOUR FLOW KEY',
   tags: [tag],
   tagsOperator: tagsOperator
 });
}
 
const buttons = document.querySelectorAll('button[data-tag]');
 
function clearButtonClasses () {
 for (const button of buttons) {
   button.classList.remove('active');
 }
}
 
document.addEventListener('click', function (event) {
if (event.target.matches('div.tags button')) {
if (event.target.dataset.tag == "") {
updateFlow(allTags, "any");
} else {
updateFlow(event.target.dataset.tag, "all");
}
clearButtonClasses();
event.target.classList.add('active');
}
}, false);

</script>

The buttons refer to the tag buttons at the top of the Flow. A tag button is created in this way: <button style="margin: 5px;" data-tag="TAG" class="active">NAME OF BUTTON</button>. Note: the tag name in the script must match the tag in Flowbox. If you wish to create an ‘All’ button, then leave the TAG field empty, like this: <button style="margin: 5px;" data-tag="" class="active">ALL</button>.
The container property refers to an element on your page, in this case the div element with id js-flowbox-flow .
The key property is the Flow key. The easiest way to find this is by copying it from the "Copy Flow Key" option in the meatball (three-dot) menu in Moderate in Flowbox:

6. Once you’ve pasted the code, updated your buttons with your text and tags, and inserted your Flow key, click on the orange ‘Save’ button.

Note: Magento recommends flushing the cache after each update.

Here you can see the Dynamic Tag Flow that we just created in action:

All updates and edits to your Flowbox Flow (content, styling, tags) need to be made in your Flowbox Admin account.