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

A Dynamic Product Flow helps you dynamically pull in posts connected to a specific product

Updated over a year ago

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

Dynamic Product Flows are a great way to dynamically extend your regular Flows by displaying posts connected to a product.

Keep in mind that for Dynamic Product Flows to work, you need to have had assigned products to posts.

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 change; you also pass in a productId 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',
    productId: 'product-1234' // Display posts that have 'product-1234' assigned
  })
</script>

  • The key property is the Flow key. The easiest way to find this is copying it from the "Copy Flow Key" option in the triple dot menu in the Flows section in Flowbox:

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

If you pass in an unsupported locale, buttons and text will be displayed in English.

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

Setting up the Flow dynamically

Because the Dynamic Product Flow function is made with the express purpose of displaying related posts, you will benefit the most by setting the value of the productId property dynamically. One way of doing this is adding this script to a template in your CMS or Ecommerce system. This will vary greatly depending on which platform you're using, but most have separate templates for product pages.

Then, you'll need to dynamically retrieve the value of the productId. Here's an example on how the window.flowbox('init') could look in a platform that uses handlebars-style templating:

window.flowbox('init', {
  container: '#js-flowbox-flow',
  key: 'Your-Flow-Key',
  locale: 'language-COUNTRY',
  productId: {{ $product->id }} // Product-ID must be a string in the final output. See example in snippet above.
})

Hopefully, this can give you a hint on how to implement Dynamic Flows in your specific platform.

Using Sequences

Flowbox gives users full control over fallback content in Dynamic Product Flows. You can customize sequences of content which will be served, in their respective order after the product specific content, based on almost all the fields available in your product feed. Read more here.

Preview your Dynamic Product Flow

When you create a new Dynamic Product Flow, you can preview it directly in the Flow's settings to see exactly how it would look on that product page, and see what content will be served, including Sequences and Fallback Flow.

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

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

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

  3. Enter the product identifier/search for your product in the 'Preview Product' field.

  4. Flowbox will automatically load a preview of the Flow showing your tagged content and any fallback content.

REMEMBER:

Posts tagged with products in Flowbox are always displayed chronologically, with latest posts 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 assign with the same product.

  • Post A, posted online an hour ago, gets the product first assigned .

  • Post B was shared online yesterday. You assign a product to this post second.

These posts will be sorted based on which one was posted most recently. Even though you assigned the product(s) in Post B last, since Post A was collected by Flowbox more recently, Post A will always show up first in your Dynamic Product Flow.

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

IMPORTANT:

A Flowbox Dynamic Product Flow supports only one productId per request.

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?