Flowbox is partnered with leading ecommerce platform Magento, to offer a first-class visual marketing experience for ecom sites.

Before you begin

Before we begin, make sure that you have a copy of your Flowbox 'Flow key'.

To find your 'Flow Key', log into Flowbox and select your Flow, then click on the meatball (three-dot) menu to copy the key:

Once you have the ‘Flow key’, it’s time to get started.

Embedding Flowbox Flows (static)

The first step to embedding Flows in Magento 2 is including the flowbox.js script in the HTML <head> section in order to call the function across your site.

In order to do this, follow these steps:

1. Log into your Magento account. Note: make sure you have full permission levels to access the admin settings.

2. Navigate to Admin Panel, click on ‘Content’, then ‘Configuration’.

3. Choose the store view that you want the head tag to be changed on or select Global to change it on every store view.

4. Scroll down to the ‘HTML Head’ section.

5. In the Scripts and Style Sheets field, add this snippet:

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

6. Once you’ve added your script, click on the ‘Save Configuration’ button.

7. It is always recommended to flush the cache in Magento after each update.

Flush the cache

To flush the cache, go back to the Admin Panel, click on ‘System’ then ‘Cache Management’.

Click on the orange ‘Flush Magento Cache’ button. When completed, you will see a success message pop up on the screen.

Embed a Static Flow in a Page

Embedding a Static Flow on a page in Magento 2 is a great way to create a Community and/or Inspiration page to show off your followers and link to products.

1. Go to the Admin Panel and click on ‘Content’, then ‘Pages’.

2. Click on ‘Add New Page’.

3. Important step! Make sure you enable the page (green toggle), before clicking on ‘Content’ to edit the page.

4. Once in Content view, click on ‘Show/Hide Editor’ to be able to embed the script.

5. Now you can paste this script into the main text box.

<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. See instructions at the top of the article on how to retrieve it from your Flowbox account.

6. Once you’ve pasted the code and inserted your Flow key, click on the orange ‘Save’ button.

Note: Magento recommends flushing the cache after each update.

All updates and edits to your Flowbox Flow (content, styling, tags) need to be made in your Flowbox Admin account.