---
title: "Embedding a Flow in a React Component"
url: "https://kb.getflowbox.com/en/article/embedding-a-flow-in-a-react-component"
language: "en"
last_updated: "2026-03-27T15:36:46.297Z"
---

# Embedding a Flow in a React Component

Integrate Flowbox through a React Component

The following TypeScript snippet is an **example** of how a React component implementation for an Embed Flow **might look**:

```
import React from "react";  
import { useEffect } from "react";  
  
declare global {  
  interface Window {  
    flowbox?: any;  
  }  
}  
  
const EmbedFlow = () => {  
  const flowboxKey = "INSERT FLOW KEY HERE";  
  useEffect(() => {  
    const initializeFlowbox = () => {  
      if (window.flowbox) {  
        window.flowbox("init", {  
          container: "#js-flowbox-flow",  
          key: flowboxKey,  
          locale: "INSERT LOCALE HERE"  
        });  
      }  
    };  
  
    const scriptId = "flowbox-js-embed";  
    if (!document.getElementById(scriptId)) {  
      const script = document.createElement("script");  
      script.id = scriptId;  
      script.async = true;  
      script.src = "https://connect.getflowbox.com/flowbox.js";  
      script.onload = initializeFlowbox;  
      document.body.appendChild(script);  
    } else {  
      initializeFlowbox();  
    }  
  }, []);  
    
  return (  
    <div id="js-flowbox-flow"></div>    
  );  
    
};  
  
export default EmbedFlow;
```

-   The **container** property refers to an element on your page, in this case the `div` element with id `js-flowbox-flow` .

-   The **"flowboxKey"** constant that matches 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:

![](https://cdn-assets.productfruits.com/730a83df-b5e2-41a4-9ef8-08da72653771)

-   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](https://app.intercom.com/) 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](https://kb.getflowbox.com/en/article/implementing-and-embedding-a-dynamic-tag-flow). Secondly, it specifies the catalog from which the Flow should fetch data for assigned products, such as product titles, currency, and product links.

![](https://cdn-assets.productfruits.com/d0281c07-67f3-485e-8f23-d528ab7a5d01)

-   Please also make sure to use `language-COUNTRY` instead of `language_COUNTRY`. For more info on which languages we support, please [visit this page](https://kb.getflowbox.com/en/article/changing-the-language-of-your-flow).