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. 😎

Content Security Policy (CSP) Error

Content Security Policy (CSP) is a W3C standard providing a layer of protection against Cross-Site Scripting (XSS). CSP policy allows blocking/allowing content from specified domains and avoiding the content coming from unapproved origin.

If you see an error message that states that the Flowbox script could not load due to Content Security Policy, you will need to add Flowbox to your CDN whitelist.

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