To display a Flow you've created in Flowbox you need to add a small snippet to your site's templates.

In this article we walk you through what this snippet does and how it works. You can always find it on your Flow's "Setup & Styling" page by clicking the "View Embed Code" button at the bottom of the left sidebar.

Start out by placing a <div> element with the ID js-flowbox-feed where you want the Flow to end up in your template, e.g:

<body>
  <h1>My Site Heading</h1>
  <div id="js-flowbox-feed"></div>
</body>

The YOUR-FLOW-KEY  should be replaced with your Flow Key (which you can find after setup?feed= in the URL on the Flow's "Setup & Styling").

<script>
window.bzfyAsyncInit = function(bzfy) {
  bzfy.init('YOUR-FLOW-KEY', 'js-flowbox-feed', 'en', 'embed');
};

(function(d, id) {
    if (d.getElementById(id)) {return;}
    var s = d.createElement('script'), fjs = d.scripts[d.scripts.length - 1];
    s.id = id; s.src = "https://connect.getflowbox.com/bzfy.js";
    fjs.parentNode.insertBefore(s, fjs);
 })(document, 'bzfy-js-embed');
</script>

(Preferably, this snippet should be added at the end of your <body>  tag)

This will:

  1. Create a <script>  tag which loads Flowbox's embed script from the URL https://connect.getflowbox.com/bzfy.js 
  2. Create a global function called bzfyAsyncInit that will initialize the Flow with YOUR-FLOW-KEY to the element js-flowbox-feed when Flowbox's embed script has loaded

Lastly, place a <div> element with the ID js-flowbox-feed where you want the Flow to end up in your template, e.g:

 <body>
  <h1>My Site Heading</h1>
  <div id="js-flowbox-feed"></div>
</body>

Parameter Description

The bzfy.init  method takes a few arguments, of which you need to know about the first three:

1: The Flow key
2: An ID of an element in which Flowbox will be rendered
3: A language code. This changes the language of the Flow. The following language codes are available:

  • de  - German
  • dk  - Danish
  • en  - English
  • es  - Spanish
  • fi  - Finnish
  • fr  - French
  • nl  - Dutch
  • no  - Norwegian
  • pt  - Portuguese
  • sv  - Swedish
Did this answer your question?