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

Additional resources

Did this answer your question?