Before starting to implement a Dynamic Flow, make sure you're familiar with embedding a regular, static Flow, as described in this guide.

Tag Flows are a great way to dynamically extend your regular Flows. The two most common types of Dynamic Tag Flows are Filter Tag Flows (with buttons at the top) or Category Tag Flows (where all content sharing one or many tags is displayed).

Some examples of Filter Tag Flows:

Nelly.com – filter by product type

Zeb.be – filter by Influencer

Jotex – filter by room

Some examples of Category Tag Flows:

Villages Clubs du Soleil: Summer Flow or Winter Flow showing off a destination

SQ Lab: Mountain biking category vs. road bike category

ArtDeco eye makeup vs. nails

In order to create a Dynamic Flow based on tags, you need to first have collected posts with tags added in Moderate. 🏷

Filter Tag Flow embed script with buttons

Start out by including the flowbox.js script on your page. Copy this snippet and paste it in the <head> element:

<head>
<title>My webpage</title>
<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>
</head>

Then, you can go ahead and use the window.flowbox function to display your Flows. To render a Filter Tag Flow on your webpage, copy and paste the snippet below wherever you want the Flow to show up.

Note: As you can see, this code snippet example includes the buttons as well. If you want to copy and paste this code, you can easily edit and button data-tag and title.

<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>
window.flowbox('init', {
container: '#js-flowbox-flow',
key: 'YOUR FLOW KEY',
locale: 'language-COUNTRY',
})
</script>
<script>
function updateFlow (tag) {
window.flowbox('update', {
key: 'YOUR FLOW KEY',
tags: [tag],
})
}

const buttons = document.querySelectorAll('button[data-tag]');

function clearButtonClasses () {
for (const button of buttons) {
button.classList.remove('active')
}
}

for (const button of buttons) {
button.addEventListener('click', () => {
updateFlow(button.dataset.tag)
clearButtonClasses()
button.classList.add('active')
})

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

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

Interactive example – switching between Tags

Check out this article to view another interactive example of switching tags in a Tag Flow!


Category Tag Flow embed script

You then add the embed script to your HTML source, the same as for static Flows, but you also tell the embed script which posts to show by passing in an array of tags when calling init :

<script>
window.flowbox('init', {
container: '#js-flowbox-flow',
key: 'Your-Flow-Key',
locale: 'language-COUNTRY',
tags: ['summer', 'sun'] // Display posts that have either "summer" or "sun" as tags
})
</script>
  • 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:

  • The locale needs to have both a language and a country code to work correctly: e.g. sv-SE or da-DK. In order to get a correct translation, you will have to pick a locale from the list of supported locales. If you pass in an unsupported locale, buttons and text will be displayed in English.

  • NOTE: Please also make sure to use language-COUNTRY instead of language_COUNTRY. For more info on which languages we support, please visit this page.

Additional parameters

You can also change the behavior of the Dynamic Flow to include posts that have one or all of the tags added by passing in the tagsOperator property to init. This supports the following options:

  • all meaning "the Dynamic Flow will pull in posts that are tagged with all the tags in the list." This is used by default.

  • any meaning "the Dynamic Flow will pull in posts that are tagged with one or more of the tags in the list."

<script>
window.flowbox('init', {
container: '#js-flowbox-flow',
key: 'Your-Flow-Key',
tags: ['summer', 'sun'],
tagsOperator: 'all' // Display posts that have *both* "summer" and "sun" added as tags
})
</script>

Tagged posts in Flowbox are always displayed in order of 'most recently tagged' unless you have enabled our AI algorithm Flowscore to automatically sort content based on engagement.

As an example - you have 2 posts that you wish to apply the same tag for.

  • Post A was originally posted online in the last hour. You tag this post first.

  • Post B was shared online yesterday. You tag this post second.

These posts will now be sorted based on which you tagged most recently, even if Post A was originally shared first, Post B will always show up first in your Dynamic Tag Flow.

Additional resources

Did this answer your question?