Skip to main content
Advanced settings and methods for Flows

Discover new ways to further customize your Flow integration

Updated over 2 months ago

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:


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?