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: – filter by product type – 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:

<title>My webpage</title>
(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]; = id; s.async = true;
s.src = '';
fjs.parentNode.insertBefore(s, fjs);
})(document, 'flowbox-js-embed');

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 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 id="js-flowbox-flow"></div>



var allTags = new Array();
for (i=1; i<document.querySelectorAll('button[data-tag]').length; i++){

window.flowbox('init', {
container: '#js-flowbox-flow',
locale: 'language-COUNTRY',
tags: allTags,
tagsOperator: "any"



function updateFlow (tag, tagsOperator) {
window.flowbox('update', {
tags: [tag],
tagsOperator: tagsOperator

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

function clearButtonClasses () {
for (const button of buttons) {

for (const button of buttons) {
button.addEventListener('click', () => {
if (button.dataset.tag == ""){
updateFlow(allTags, "any");
updateFlow(button.dataset.tag, "all");


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

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
  • 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."

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

Preview your Dynamic Tag Flow

When you create a new Dynamic Tag Flow, you can preview directly in the Flow settings to see exactly how it would look on site, and see what content will be served.

In order to preview the Dynamic Tag Flow, you need to:

  1. First, create/set up your Dynamic Tag Flow.

  2. Then click to open the Flow's Settings menu in the top right-hand corner.

  3. Enter the tag(s) in the 'Preview tags' field.

  4. Choose between 'Any' or 'All'.

    1. 'Any' will serve all posts tagged with any of your selected tags. I.e., if you select the tags 'football-shoes', 'football' and 'Zlatan', you will see all posts that have any of these tags, or a combination of them.

    2. 'All' will only serve posts tagged with 'all' of your selected tags. I.e., if you select the tags 'football-shoes', 'football' and 'Zlatan', you will see only see posts that have all three of these tags.

  5. That's it! Flowbox will automatically load a preview of the Flow showing your tagged content.

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.

Note: This example is recommended for clients who can modify HTML and use Javascript. The buttons are HTML and not part of Flowbox's product, and must be be connected using Javascript.

  • Make sure the 'data-tag' parameter inside the 'button' html tag matches the existing tags in the buttons themselves.

  • Make sure your script is selecting the correct button as class 'active' on click. See the example functions in this guide.

Content Security Policy (CSP) Error

Content Security Policy (CSP) is a W3C standard providing a layer of protection against Cross-Site Scripting (XSS). CSP policy allows blocking/allowing content from specified domains and avoiding the content coming from unapproved origin.

If you see an error message that states that the Flowbox script could not load due to Content Security Policy, you will need to add Flowbox to your CDN whitelist.

Additional resources

Did this answer your question?