Caveat emptor 

Flowbox is currently in the process of testing out a new version of our Flow Embed script. This means that in large it's currently more or less a beta. It's unlikely but not entirely impossible that we make changes to how the script is used and invoked. Therefore, we only recommend customers that have an active development team to make use of this, for the time being. 🙏 To use the old Embed script, refer to this article. 😁

Goals with the new Embed

The main goals when building the new Embed script have been making its API way simpler and improving support for Single-Page web applications. We're also increasingly focusing on optimization to make the experience as fast and seamless as possible for you and your customers. 🏇

Embedding a Flow on your Website

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 just before the </body> tag:

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

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:

Embedding a Dynamic Flow 🌊

To implement and embed a Dynamic Flow, you use the same functionality as for a regular Flow. You simply pass it one of two properties, productId or tags .

Passing in productId will fill the Flow with posts that you've connected to that product through Flowbox's Commerce function. A simple example of this:

<div id="js-flowbox-flow"></div>
<script>
  window.flowbox('init', {
    container: '#js-flowbox-flow',
    key: 'Your-Flow-Key',
    productId: 'product-id-1'
  })
</script>

If you'd rather fill out your Flow with posts that have been tagged 🏷 with one or more tags in Moderate, you use tags  and the optional property tagsOperator :

<div id="js-flowbox-flow"></div>
<script>
  window.flowbox('init', {
    container: '#js-flowbox-flow',
    key: 'Your-Flow-Key',
    tags: ['summer', 'sunny'],
    tagsOperator: 'any' // Optional. Defaults to "any"
  })
</script>

The tagsOperator property is also optional and defines the behavior of which posts to include. This can be set to any  and all :

  • any means "the Dynamic Flow will pull in posts that's tagged with all the tags in the list"
  • all  means "the Dynamic Flow will pull in posts that's tagged with one or more of the tags in the list".

Also note that the tags  property is an array of strings and not a comma-separated string. 👀

Embedding Multiple Flows on One Page

To embed multiple Flows on one single page you simply paste in the embed snippet one more time with a new container:

<div id="js-flowbox-flow-2"></div>
<script>
  window.flowbox('init', {
    container: '#js-flowbox-flow-2',
    key: 'Your-Second-Flow-Key'
  })
</script>

It's that simple 😎

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?