Before starting to implement a Dynamic Flow, make sure you're familiar with embedding a regular, static Flow as described in https://intercom.help/flowbox/embedding-flowbox-on-your-site/embedding-a-flow-on-your-website

Dynamic Flows are a great way to dynamically extend your regular Flows by pulling in posts from other Flows from connected products and tags. ūüĆě

Dynamic Flows for Product Posts

Let's start with the prerequisities. For Dynamic Flows for product posts to work you need to have  posts with products connected through Flowbox's Commerce function.

You then add the embed script to your HTML source the same as for static Flows, with one small change; you also call the bzfy.dynamics  function with the productId parameter (a string) before the call to bzfy.init:

<script>
window.bzfyAsyncInit = function(bzfy) {
  // Call bzfy.dynamics before bzfy.init to set up your Dynamic Flow
  bzfy.dynamics({ productId: 'product-1234' });
  bzfy.init('YOUR-FLOW-KEY', 'js-flowbox-feed', 'en', 'embed');
};

(function(d, id) {
    if (d.getElementById(id)) {return;}
    var s = d.createElement('script'), fjs = d.scripts[d.scripts.length - 1];
    s.id = id; s.src = "https://connect.getflowbox.com/bzfy.js";
    fjs.parentNode.insertBefore(s, fjs);
 })(document, 'bzfy-js-embed');
</script>

Your-Flow-Key here will be the ID of whatever Flow you choose. The Dynamic Flow simply adds posts to the end of your Flow.

Setting up the Flow dynamically

Because the Dynamic Flow function is made with the express purpose of displaying related posts in mind, you will also benefit the most from them by setting them up dynamically. One way of doing this is adding this to a template in your CMS or E-Commerce system. This will vary greatly depending on which platform you're using, but most have separate templates for product pages.

Here's an example on how the bzfyAsyncInit  could look in a platform that uses handlebars-style templating:

window.bzfyAsyncInit = function(bzfy) {
  bzfy.dynamics({ productId: {{ $product->id }} });
  bzfy.init('YOUR-FLOW-KEY', 'js-flowbox-feed', 'en', 'embed');
};

Hopefully this can give you a hint on how to implement Dynamic Flows in your specific platform. ūüôŹ

Dynamic Flows from Tags

To create a Dynamic Flow based on tags instead of on a Product you need to have posts with tags added in Moderate. ūüŹ∑

Dynamic Flows for getting additional posts from posts' tags works basically the same as a Dynamic Flow based no a Product ID. The main difference is that instead of passing the productId parameter you pass tags  (a string containin comma-separated values) with the tags you want to use:

<script>
window.bzfyAsyncInit = function(bzfy) {
  // Call bzfy.dynamics with the tags parameter
  bzfy.dynamics({ tags: 'summer, beach, sunny', operator: 'AND' });
  bzfy.init('YOUR-FLOW-KEY', 'js-flowbox-feed', 'en', 'embed');
};

// ... Same snippet as for Product Dynamic Flow. Omitted for brevity
</script>

The operator parameter is also required, and can be set to either AND  or OR :

  • AND ¬†meaning "the Dynamic Flow will pull in posts that's tagged with all the tags in the list"
  • OR ¬†meaning "the Dynamic Flow will pull in posts that's tagged with one or more of the tags in the list".
Did this answer your question?