Embedding a Flow in a React Application

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! 👏