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

Product Flows are a great way to dynamically extend your regular Flows by pulling in posts connected to a product. 🌞

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 pass in a productId  when calling the init method:

<script>
  window.flowbox('init', {
    container: '#js-flowbox-flow',
    key: 'Your-Flow-Key',
    productId: 'product-1234' // Display posts that have `product-1234` connected
  })
</script>

Your-Flow-Key  here will be the Key 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 window.flowbox('init')  could look in a platform that uses handlebars-style templating:

window.flowbox('init', {
  container: '#js-flowbox-flow',
  key: 'Your-Flow-Key',
  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. 🙏

Additional resources

Did this answer your question?