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
Embedding a Flowbox Flow on your website (generic guide): https://help.getflowbox.com/en/articles/2550100-embedding-a-flowbox-flow-on-your-website
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
Cookies management for Embed Flows
โhttps://help.getflowbox.com/en/articles/10006333-cookies-management-for-embed-flows