To display a Flow you've created in Flowbox you need to add a couple of small snippets to your website's templates.
Start out by including the flowbox.js
script on your page by copying this snippet and pasting it in the <head>
element:
<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>
Then, you can go ahead and use the window.flowbox
function to display your Flows. To render a Flow on your webpage, copy and paste this snippet wherever you want the Flow to show up:
<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. The easiest way to find this is by copying it from the "Copy Flow Key" option in the meatball (three-dot) menu in the Flows section:
The locale property needs to be a combination of
language
andregion
codes: e.g.sv-SE
ores-ES
. It serves two purposes. Firstly, it is used to translate the texts within the Flow to the selected language, except for the CTA button, which needs to be changed separately in the catalog configuration modal window or in the posts themselves. Secondly, it specifies the catalog from which the Flow should fetch data for assigned products, such as product titles, currency, and product links.
Please also make sure to use
language-COUNTRY
instead oflanguage_COUNTRY
. For more info on which languages we support, please visit this page.
Advanced Flow settings and methods
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. In this case, the cookie is not created and interactions are not tracked. Cookies do not affect the display of the Flow.
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>
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>
Content Security Policy (CSP) Error
Content Security Policy (CSP) is a W3C standard providing a layer of protection against Cross-Site Scripting (XSS). CSP policy allows blocking/allowing content from specified domains and avoiding the content coming from unapproved origin.
If you see an error message that states that the Flowbox script could not load due to Content Security Policy, you will need to add Flowbox to your CDN whitelist.
Additional resources
Embedding multiple Flows on one page: http://help.getflowbox.com/embedding-flowbox-on-your-site/embedding-multiple-flows-on-one-page
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