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'
  })
</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 copying it from the "Copy Flow Key" option in the triple dot menu in Moderate in Flowbox:

Additional resources

Changing the language of your embedded Flow

The Flow will always default to English. If you want to display it in another language, pass in the locale property. This can be either a language/country code—e.g. sv-FI —or just a language code—e.g en :

window.flowbox('init', {
  container: '#js-flowbox-flow',
  key: 'Your-Second-Flow-Key',
  locale: 'da-DK'
})

We currently have translations for the following languages:

  • de   - German
  • da   - Danish
  • en   - English
  • es   - Spanish
  • fi   - Finnish
  • fr   - French
  • nl   - Dutch
  • nb   - Norwegian Bokmål
  • pt   - Portuguese
  • sv   - Swedish

If you pass in an unsupported locale, dates and buttons will be displayed in English.

Did this answer your question?