All Collections
UGC - Developer Guides
Generic Javascript integration
Advanced settings and methods for Flows
Advanced settings and methods for Flows

Discover new ways to further customize your Flow integration

S
Written by Sergi Mulero
Updated over a week ago

The 'allowCookies' configuration parameter

The allowCookies (boolean) parameter controls whether cookies are enabled in the Flow. By default, it is set to true.

You can explicitly set it to false to disable the Flowbox cookie. This prevents the cookie from being created, which means that the user's interactions and analytics data will not be tracked. The Flow is always displayed regardless of the Cookie settings.

To set the allowCookies parameter to false, add the parameter to the Flow's embed snippet:

<div id="js-flowbox-flow"></div>
<script>
  window.flowbox('init', {
    container: '#js-flowbox-flow',
    key: 'YOUR FLOW KEY',
    locale: 'language-COUNTRY',
    allowCookies: false
  })
</script>

Cookies setup for Cookiebot users

If you use Cookiebot, depending on your setup the Flow might be automatically disabled whenever a user doesn't accept a specific set of Cookies (usually "Marketing" cookies). In order to ensure that the Flow is properly displayed regardless of the user's Cookie consent, you will need to configure Cookiebot so it no longer disables it.

The next step would be to modify the code that has been used to integrate the Flow itself by using the allowCookies configuration parameter. The code below uses Cookiebot's "CookiebotOnLoad" event to set up the allowCookies parameter to true or false depending on the user's choice during the Cookies consent prompt. This event is triggered whenever the user submits consent or when the user navigates to a page where consent has already been submitted. Once the parameter is set up, the script proceeds to initialize the Flow.

<div id="js-flowbox-flow"></div>
<script data-cookieconsent="ignore">
  window.addEventListener('CookiebotOnLoad', function () {

    let fbxCookies = Cookiebot.consent.marketing;

    (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');

        window.flowbox('init', {
            container: '#js-flowbox-flow',
            key: 'INSERT FLOW KEY HERE',
            locale: 'language-COUNTRY',
            allowCookies: fbxCookies
        })
  })
</script>

Make sure to add the values of your Flow Key in the initializer script's "key" parameter, and the value of your Catalog's locale in the initializer script's "locale".

The 'lazyLoad' configuration parameter

The lazyLoad (boolean) parameter enables or disables the lazy-loading feature. By default, it is set to true.

The "lazy load" feature delays the Flow from loading until the user scrolls to the location in which it's been integrated. It allows a better bandwidth performance on image-heavy sites.

We don't recommend to disable it, but some users might prefer to do it so the Flow loads right away. To set the lazyLoad parameter to false, add the parameter to the Flow's embed snippet: 

<div id="js-flowbox-flow"></div>
<script>
  window.flowbox('init', {
    container: '#js-flowbox-flow',
    key: 'YOUR FLOW KEY',
    locale: 'language-COUNTRY',
    lazyLoad: false
  })
</script>

The 'update' method to refresh Flows with new parameters

Flowbox's update method can be used to modify a Flow with different parameters compared to the original init method. This method is useful when you want to dynamically update a Flow, such as implementing a Dynamic Tag Flow with buttons that trigger Flow updates based on user interactions.

To use the update method, include the following code snippet:

<script>
window.flowbox('update', {
key: 'YOUR FLOW KEY'
// add new parameters for the updated Flow here
});
</script>

For example, see the article about Tag Flow Buttons to see how the update method is used in practice:

Implementing and embedding a Dynamic Tag Flow

The 'destroy' method for SPA websites

In SPA (single-page application) websites, it's necessary to remove existing Flow instances when navigation events are triggered. To achieve this, use Flowbox's destroy method before creating a new instance of a Flow.

To remove the existing Flow instances, use the following code snippet:

<script>
window.flowbox('destroy', { 
container: '#js-flowbox-flow' 
});
</script>

Additional resources

Did this answer your question?