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
- Embedding a 🌊 Flow on your website: https://intercom.help/flowbox/embedding-flowbox-on-your-site/embedding-a-flow-on-your-website
- 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