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 idjs-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 acountry
code to work correctly: e.g.sv-SE
orda-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 oflanguage_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