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

In order to integrate a Dynamic Tag Flow, you need to first have added Tags to collected posts.
​
Make sure you're also familiar with embedding a regular, Static Flow, as described in this guide before integrating a Dynamic Tag Flow.

Dynamic Tag Flows retrieve posts that include a specific tag across all the Static Flows in your account.

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:

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

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

Note:

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

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.

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?