Embedding multiple Flows on one page

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

To embed multiple Flows on a single page, you 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 want 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',
      locale: 'language-COUNTRY'
    })

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

The container property refers to an element on your page, in this case the div element with id js-flowbox-flow .
The key property is the Flow key. The easiest way to find this is by copying it from the 'Copy Flow Key' option in the meatball (three-dot) menu in Moderate in Flowbox:

The locale needs to have both a language and a country code to work correctly: e.g. sv-SE or da-DK. In order to get a correct translation, you will have to pick a locale from the list of supported locales. If you pass in an unsupported locale, buttons and text will be displayed in English.
NOTE: Please also make sure to use language-COUNTRY instead of language_COUNTRY. For more info on which languages we support, please visit this page.

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

Implementing and Embedding a Dynamic 🌊 Product 🛒 Flow: https://help.getflowbox.com/embedding-flowbox-on-your-site/implementing-and-embedding-a-dynamic-product-flow
Implementing and Embedding a Dynamic 🌊 Tag 🏷 Flow: http://help.getflowbox.com/embedding-flowbox-on-your-site/implementing-and-embedding-a-dynamic-tag-flow