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 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 Moderate in Flowbox:

  • The locale needs to have both a language and a country code to work correctly: e.g. sv-SE or da-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 of language_COUNTRY. For more info on which languages we support, please visit this page.

And you're done! 👏

Did this answer your question?