Embedding a Flowbox 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 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

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