All Collections
UGC - Developer Guides
Generic Javascript integration
Implementing and embedding a Dynamic Tag Flow
Implementing and embedding a Dynamic Tag Flow

A Dynamic Flow helps you dynamically pull in posts connected to one or many tags

Toni Cruces avatar
Written by Toni Cruces
Updated over a week ago

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

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

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:

REMEMBER:

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


Category Tag Flows

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

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

The next step is to use the window.flowbox function to display your Flows by adding the embed script to your HTML source. It's the same as for static Flows, but with one small addition; you also pass in a tags property when calling the init method:

<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 Flows section:

  • The locale property needs to be a combination of language and region codes: e.g. sv-SE or es-ES. It serves two purposes. Firstly, it is used to translate the texts within the Flow to the selected language, except for the CTA button, which needs to be changed separately in the catalog configuration window or in the posts themselves. Secondly, it specifies the catalog from which the Flow should fetch data for assigned products, such as product titles, currency, and product links.

Note: 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 behaviour of the Dynamic Tag Flow to include posts that have one, or all the tags, by passing in the tagsOperator property to init. This supports the following options:

  • all meaning "the Dynamic Tag 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>


Filter Tag Flow with buttons

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 connected using Javascript.

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

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

Then customise 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="" class="active">All</button>
<button style="margin: 5px;" data-tag="football-shoes">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"
});

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 data-tag attribute 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 the Flows section:


Preview your Dynamic Tag Flow

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

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. Flowbox will automatically load a preview of the Flow showing your tagged content.

REMEMBER:

Posts tagged in Flowbox are always displayed chronologically with the most recently tagged posts displaying first, unless you have enabled our Flowscore AI algorithm 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 posted an hour ago. 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.

Moreover, Dynamic Tag Flows will search for posts that include a specific tag across all the Flows in your account. This implies that if you have tagged a post in your Masterflow but haven't distributed it to your Dynamic Tag Flow, it will still appear when the corresponding tag is passed to the embed code.

  • Make sure the values of the 'data-tag' attributes inside all the <button> elements match the tags assigned to posts in Flowbox.

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