Skip to main content
All CollectionsUGC - Developer GuidesGeneric Javascript integration
Embedding multiple Flows into one page
Embedding multiple Flows into one page

A brief example on how to embed 2+ Flows into one page

Updated over a year ago

Before reading this article, make sure that you're familiar with embedding a regular, static Flow, as described in this guide.


To embed multiple Flows on a single page, you need to call the window.flowbox('init') function once per Flow.

In this example, we have two Flows, Flow-Key-1  and Flow-Key-2 . Our HTML template looks like this:

<body>
  <h1>My Site Heading</h1>
  <div>My Site's Content</div>
</body>

We want to insert our first Flow above the heading element <h1>, and the other one below our content <div> . We'll start out by adding two <div>  elements for Flowbox to render to:

<body>
  <div id="js-flowbox-flow-1"></div>
  <h1>My Site Heading</h1>
  <div>My Site's Content</div>
  <div id="js-flowbox-flow-2"></div>
</body>

When you embed more than one Flows into one page, they must have different container IDs.

Before our closing </body>  tag, we initialize the Flows by calling the init  method from the Flowbox embed script:

  ...
  <div id="js-flowbox-feed-2"></div>

  <script>
    // Initialize "Flow-Key-1" into <div id="js-flowbox-flow-1" />
    window.flowbox('init', {
      container: '#js-flowbox-flow-1',
      key: 'Flow-Key-1',
      locale: 'language-COUNTRY'
    })

    // Initialize "Flow-Key-2" into <div id="js-flowbox-flow-2" />
    window.flowbox('init', {
      container: '#js-flowbox-flow-2',
      key: 'Flow-Key-2',
      locale: 'language-COUNTRY'
    })
  </script>
</body>

  • The container property refers to an element on your page, in this case the div elements with id js-flowbox-flow-1 and js-flowbox-flow-2.

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

  • The locale needs to have both a language and a country code to work correctly and these values must match the code in one of your existing catalogs: e.g. sv-SE or es-ES. When a valid locale is passed, the Flow will be translated to the language in the corresponding catalog. 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.

BEST PRACTICES:

If you have more than two Flows that you want on the same page, the process is exactly the same: just add a div and call init once per Flow.

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

Did this answer your question?