If you're working in React, it's easy to embed a Flowbox Flow.
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);
resolve()
})(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 idjs-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 Moderate in Flowbox:

The locale needs to have both a
language
and acountry
code to work correctly: e.g.sv-SE
orda-DK
. In order to get a correct translation, you will have to pick a locale from the list of supported locales. If you pass in an unsupported locale, buttons and text will be displayed in English.NOTE: Please also make sure to use
language-COUNTRY
instead oflanguage_COUNTRY
. For more info on which languages we support, please visit this page.
And you're done! 👏