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:

<title>My webpage</title>
  (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]; = id; s.async = true;
    s.src = '';
    fjs.parentNode.insertBefore(s, fjs);
  })(document, 'flowbox-js-embed');

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>
  window.flowbox('init', {
    container: '#js-flowbox-flow',
    key: 'Your-Flow-Key'

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 language 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',
  language: 'da'

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 language, dates and buttons will be displayed in English.

If you're utilizing the Product Catalog feature where you're passing in the locale  attribute to determine which Product Catalog to use, please note that the language  will take precendence. If you're passing in locale  and no language , the language displayed will be detemined through the locale.

Did this answer your question?