<script id='coframe-installation-script'>
  (function () {
    // Early exit for performance testing
    if (/cf_disable/.test(location.search)) return console.warn('[Coframe] Disabled via URL parameter');
  
    // Coframe config
    const config = {
      projectId: 'YOUR_PROJECT_ID',
      startTime: Date.now(),
      timeoutMs: 1000,
      currentUrl: window.location.href,
      waitForHydration: true, // Wait for the framework readiness signal
    };
  
    // Prevent duplicate installation
    const script_id = 'coframe-sdk-js';
    if (document.getElementById(script_id)) return console.warn('[Coframe] SDK already installed');
  
    // Coframe queue setup
    (window.CFQ = window.CFQ || []).push({ config });
  
    // Coframe antiflicker CSS
    const style = document.createElement('style');
    style.id = 'coframe-antiflicker';
    style.textContent =
      ':root { --cf-show: 0;}' +
      'body { opacity: var(--cf-show) !important; transition: opacity 0.2s ease; }'
    function hide() { document.head.appendChild(style); }
    function show() {
      document.documentElement.style.setProperty('--cf-show', '1');
      style.parentNode && style.parentNode.removeChild(style);
    }
    hide(); setTimeout(show, config.timeoutMs);
  
    // Coframe SDK JS
    var edgeUrl = new URL('https://edge.cofra.me/cf.js');
    edgeUrl.searchParams.set('config', encodeURIComponent(JSON.stringify(config)));
  
    const script = document.createElement('script');
    script.id = script_id;
    script.async = true;
    script.src = edgeUrl.toString();
    script.onerror = () => { show(); console.error('[Coframe] SDK failed to load'); };
    document.head.appendChild(script);
  })();
</script>

<script id='coframe-installation-script'>
  (function () {
    // Early exit for performance testing
    if (/cf_disable/.test(location.search)) return console.warn('[Coframe] Disabled via URL parameter');
  
    // Coframe config
    const config = {
      projectId: 'YOUR_PROJECT_ID',
      startTime: Date.now(),
      timeoutMs: 1000,
      currentUrl: window.location.href,
      waitForHydration: true, // Wait for the framework readiness signal
    };
  
    // Prevent duplicate installation
    const script_id = 'coframe-sdk-js';
    if (document.getElementById(script_id)) return console.warn('[Coframe] SDK already installed');
  
    // Coframe queue setup
    (window.CFQ = window.CFQ || []).push({ config });
  
    // Coframe antiflicker CSS
    const style = document.createElement('style');
    style.id = 'coframe-antiflicker';
    style.textContent =
      ':root { --cf-show: 0;}' +
      'body { opacity: var(--cf-show) !important; transition: opacity 0.2s ease; }'
    function hide() { document.head.appendChild(style); }
    function show() {
      document.documentElement.style.setProperty('--cf-show', '1');
      style.parentNode && style.parentNode.removeChild(style);
    }
    hide(); setTimeout(show, config.timeoutMs);
  
    // Coframe SDK JS
    var edgeUrl = new URL('https://edge.cofra.me/cf.js');
    edgeUrl.searchParams.set('config', encodeURIComponent(JSON.stringify(config)));
  
    const script = document.createElement('script');
    script.id = script_id;
    script.async = true;
    script.src = edgeUrl.toString();
    script.onerror = () => { show(); console.error('[Coframe] SDK failed to load'); };
    document.head.appendChild(script);
  })();
</script>

import React, { useEffect } from 'react';

function Coframe() {

    // Send page hydrated event
    useEffect(() => {
      window.CFQ = window.CFQ || [];
      window.CFQ.push({ pageHydrated: true })
    }, [])

  return null;
}

export default Coframe;

import Coframe from './components/Coframe';

function App() {
  return (
    <>
      <Coframe />
      {/* Your app content */}
    </>
  );
}

# React

Install the Coframe SDK in a React app using a script tag and a lightweight component

This guide is for apps built with React (Create React App, Vite, or any similar
setup) where you control the `index.html` and can add React components to the
component tree. If you are using Next.js, see the [Next.js guide](../docs/nextjs.html).



[Video: Video: the index.html script plus the <Coframe /> component, and verifying in DevTools (65s, narrated)](assets/videos/fig09-install-react.mp4)
Watch: 65s — the index.html script plus the <Coframe /> component, and verifying in DevTools

## How it works

Coframe is installed in two parts:



- A `<script>` tag in `index.html` that loads the SDK synchronously so
anti-flicker protection runs before the page renders.


- A `<Coframe />` component that fires a `pageHydrated` event once React
has mounted, telling the SDK it is safe to apply variant changes.

## Step 1 — index.html

Add the installation script to the `<head>` of your `index.html`. Replace
`YOUR_PROJECT_ID` with the project ID from your Coframe dashboard.


The script must be placed directly in the HTML — do not load it through an
async tag manager such as Google Tag Manager. Because anti-flicker is
enabled, the script needs to run synchronously before the browser renders the
page body.


HTML



```html
<script id='coframe-installation-script'>
  (function () {
    // Early exit for performance testing
    if (/cf_disable/.test(location.search)) return console.warn('[Coframe] Disabled via URL parameter');
  
    // Coframe config
    const config = {
      projectId: 'YOUR_PROJECT_ID',
      startTime: Date.now(),
      timeoutMs: 1000,
      currentUrl: window.location.href,
      waitForHydration: true, // Wait for the framework readiness signal
    };
  
    // Prevent duplicate installation
    const script_id = 'coframe-sdk-js';
    if (document.getElementById(script_id)) return console.warn('[Coframe] SDK already installed');
  
    // Coframe queue setup
    (window.CFQ = window.CFQ || []).push({ config });
  
    // Coframe antiflicker CSS
    const style = document.createElement('style');
    style.id = 'coframe-antiflicker';
    style.textContent =
      ':root { --cf-show: 0;}' +
      'body { opacity: var(--cf-show) !important; transition: opacity 0.2s ease; }'
    function hide() { document.head.appendChild(style); }
    function show() {
      document.documentElement.style.setProperty('--cf-show', '1');
      style.parentNode && style.parentNode.removeChild(style);
    }
    hide(); setTimeout(show, config.timeoutMs);
  
    // Coframe SDK JS
    var edgeUrl = new URL('https://edge.cofra.me/cf.js');
    edgeUrl.searchParams.set('config', encodeURIComponent(JSON.stringify(config)));
  
    const script = document.createElement('script');
    script.id = script_id;
    script.async = true;
    script.src = edgeUrl.toString();
    script.onerror = () => { show(); console.error('[Coframe] SDK failed to load'); };
    document.head.appendChild(script);
  })();
</script>
```

## Step 2 — components/Coframe.js

Create a `Coframe` component. It renders nothing but uses `useEffect` to notify
the SDK that the React tree has hydrated, which triggers variant application.


JSX



```jsx
import React, { useEffect } from 'react';

function Coframe() {

    // Send page hydrated event
    useEffect(() => {
      window.CFQ = window.CFQ || [];
      window.CFQ.push({ pageHydrated: true })
    }, [])

  return null;
}

export default Coframe;
```

## Step 3 — App.js

Import and render `<Coframe />` inside your root `App` component so it mounts
on every page.


JSX



```jsx
import Coframe from './components/Coframe';

function App() {
  return (
    <>
      <Coframe />
      {/* Your app content */}
    </>
  );
}
```

## Verify it is working

After running your app and loading a page in a browser:



- Open the browser console and confirm there are no `[Coframe]` error messages.


- In the Network tab, look for a request to `edge.cofra.me/cf.js`. A
successful `200` response means the SDK loaded correctly.


- Check that a `coframe-sdk-js` script element appears in the DOM (you can
inspect the `<head>` in the Elements panel).





For a full walkthrough of how to validate the integration and confirm that
Coframe is operating as expected, see
[Testing and Validation](../docs/testing-and-validation.html).

## Optional configuration

The default script is designed to work without additional configuration. Once the
SDK is installed, you can tune behavior using the following guides:



- [SDK options](../docs/sdk-options.html) — timeout, disable conditions,
and other core settings


- [Identity settings](../docs/identity-settings.html) — associate SDK
activity with a known user identity


- [Tracking settings](../docs/tracking-settings.html) — control which
events and page interactions Coframe records


- [Anti-flicker](../docs/anti-flicker.html) — understand how the anti-flicker
mechanism works and how to adjust it for your performance requirements