Embedding a Flow in a React Application
Written by Davy Laudet
Updated over a week ago

This is an example of how a React component implementation of the Flowbox Flow might look:

import PropTypes from 'prop-types'
import React, { useEffect } from 'react'

const loadFlowbox = () => new Promise(resolve => {
(function(d, id) {
if (!window.flowbox) { var f = function () { f.q.push(arguments); }; f.q = []; window.flowbox = f; }
if (d.getElementById(id)) {return resolve();}
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');

const containerName = 'js-flowbox-flow'
const locale = 'en-GB'

const Flowbox = ({ flowKey: key }) => {
const container = ${containerName}-${key}
useEffect(() => {
loadFlowbox().then(() => {
window.flowbox('init', { container: #${container}, key, locale })
}, [container, key])

return <div id={container} />

Flowbox.propTypes = {
flowKey: PropTypes.string.isRequired,

export default Flowbox

  • 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 and region codes: e.g. sv-SE or es-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 of language_COUNTRY. For more info on which languages we support, please visit this page.

Did this answer your question?