To display a Flow you've created in Flowbox you need to add a small snippet to your site's templates. 🦉
Start out by including the flowbox.js
script on your page. Copy this snippet and paste it in the <head>
element:
<head>
<title>My webpage</title>
<script>
(function(d, id) {
if (!window.flowbox) { var f = function () { f.q.push(arguments); }; f.q = []; window.flowbox = f; }
if (d.getElementById(id)) {return;}
var s = d.createElement('script'), fjs = d.scripts[d.scripts.length - 1]; s.id = id; s.async = true;
s.src = ' https://connect.getflowbox.com/flowbox.js';
fjs.parentNode.insertBefore(s, fjs);
})(document, 'flowbox-js-embed');
</script>
</head>
Then, you can go ahead and use the window.flowbox
function to display your Flows. To render a Flow on your webpage, copy and paste this snippet wherever you want the Flow to show up:
<div id="js-flowbox-flow"></div>
<script>
window.flowbox('init', {
container: '#js-flowbox-flow',
key: 'Your-Flow-Key',
locale: 'language-COUNTRY'
})
</script>
- 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.
Additional resources
- Embedding multiple 📶 Flows on one page: http://help.getflowbox.com/embedding-flowbox-on-your-site/embedding-multiple-flows-on-one-page
- 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