If you haven't already, check out this guide to learn how to embed a Flow on your website.

To embed multiple Flows on a single page, you simply call window.flowbox('init')  once per Flow.

In this example, we have two flows, Flow-Key-1  and Flow-Key-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-flow-1"></div>
  <h1>My Site Heading</h1>
  <div>My Site's Content</div>
  <div id="js-flowbox-flow-2"></div>
</body>

Before our closing </body>  tag we initialize the Flows by calling the init  method from the Flowbox embed script:

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

  <script>
    // Initialize "Flow-Key-1" into <div id="js-flowbox-flow-1" />
    window.flowbox('init', {
      container: '#js-flowbox-flow-1',
      key: 'Flow-Key-1'
    })

    // Initialize "Flow-Key-2" into <div id="js-flowbox-flow-2" />
    window.flowbox('init', {
      container: '#js-flowbox-flow-2',
      key: 'Flow-Key-2'
    })
  </script>
</body>

And you're done! 👏

If you have more than two flows that you want on the same page, the process is exactly the same: just add a div and call init once per Flow. 😎

Additional resources

Did this answer your question?