Skip to main content
All CollectionsUGC - Developer GuidesGeneric Javascript integration
Implementing and embedding a Dynamic Tag Flow
Implementing and embedding a Dynamic Tag Flow

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

Updated over a month ago

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

Dynamic Tag Flows retrieve posts that include a specific tag across all the Static Flows in your account. In order to integrate a Dynamic Tag Flow, you need to first have added Tags to collected posts. Otherwise, the Dynamic Tag Flow will have no content to display.

You can use a Dynamic Tag Flow to display content for an existing Tag that matches a specific Category (on your product Category pages, for example) or to implement a set of "Filter buttons" that allow the Dynamic Tag Flow to display different content depending on what button the user clicks.

Dynamic Tag Flows

Display the content for a specific Tag, which can be based on a product category

Start out by including the flowbox.js script on your page. Copy this snippet and paste it in the <head> element. This script declares all the required methods for Flowbox to run, so it always needs to be executed first:

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

<div id="js-flowbox-flow"></div>
<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 tags property is an Array of Tags available in your account. It can also be provided as a String. It filters the content by matching its values to the post's assigned 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 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.

Please also make sure to use language-COUNTRY instead of language_COUNTRY. For more info on which languages we support, please visit this page. If you pass in an unsupported locale, buttons and text will be displayed in English.

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 that the Dynamic Tag Flow will pull in posts that are tagged with all the tags in the list. This is the default behaviour when the tagsOperator property is not implemented.

  • any , meaning that the Dynamic Tag Flow will pull in posts that are tagged with at least 1 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>

Dynamic Tag Flow with Filter Buttons

Add buttons on top of your Flow to dynamically filter the content according to the button that has been clicked

Note: This example is recommended for clients who can modify HTML and use Javascript. The buttons are just simple 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 = [];
 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>.

Make sure the values of the 'data-tag' attributes inside all the <button> elements match the tags assigned to posts 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>.

Make sure your script is selecting the correct button as class 'active' on click. See the example functions above for further reference.

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

Posts tagged in Dynamic Tag Flows 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.

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?