To embed multiple Flows on a single page, you extend the window.bzfyAsyncInit  function to initialize two Flows into different element IDs.

In this example, we have two flows, Flow-Id-1  and Flow-Id-2 . Our HTML template looks like this:

<body>
  <h1>My Site Heading</h1>
  <div>My Site's Content</div>
</body>

We'd like to insert our first Flow above the heading element <h1> and the other one below our content <div> . We'll start out by adding two <div>  elements for Flowbox to render to:

<body>
  <div id="js-flowbox-feed-1"></div>
  <h1>My Site Heading</h1>
  <div>My Site's Content</div>
  <div id="js-flowbox-feed-2"></div>
</body>

Before our closing </body>  tag we add the initialization of the Flowbox embed script:

  ...
  <div id="js-flowbox-feed-2"></div>

  <script>
    window.bzfyAsyncInit = function(bzfy) {
      // Initialize the first Flow to js-flowbox-feed-1
      bzfy.init('Flow-Id-1', 'js-flowbox-feed-1', 'en', 'embed');
      // Initialize the second Flow to js-flowbox-feed-2
      bzfy.init('Flow-Id-2', 'js-flowbox-feed-2', '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>
</body>

Note that we call bzfy.init two times: first for Flow-Id-1 to render in the js-flowbox-feed-1  element and then for Flow-Id-2 to render in the js-flowbox-feed-2 element.

Did this answer your question?