<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,
      };

      // 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>

# Getting Started

Install Coframe on your site and verify it's running — your first integration in a few minutes

This guide walks you through adding the Coframe SDK to your site and confirming
it loaded correctly. By the end you will have the script in your `<head>`, a
clean network request to the edge, and `window.Coframe` available in the
console. For background on what Coframe does and why, see
[Why Use Coframe](../docs/why-use-coframe.html).

## Before you start

You need a Coframe project and its project ID. Your project ID is available in
the Coframe dashboard. You will paste it into the install script below in place
of `YOUR_PROJECT_ID`.

## Step 1 — Add the install script

Copy the script below and paste it into the `<head>` of every page you want
Coframe to run on. Replace `YOUR_PROJECT_ID` with the project ID from your
dashboard.


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,
      };

      // 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>
```




The script must be placed directly in the `<head>` — do not load it through
an async tag manager such as Google Tag Manager. Because anti-flicker is
enabled, the script runs synchronously before the browser renders the page body;
loading it asynchronously defeats this and causes a visible flash of unstyled
content.


For framework-specific installation (React, Next.js, Nuxt, Webflow, Shopify,
and others), see [SDK Integrations](../docs/javascript.html). To
customize timeout, disable conditions, and other SDK behavior, see
[Configuration — SDK Options](../docs/sdk-options.html).

## Step 2 — Verify it’s working

After adding the script, load the page in a browser and run these three checks:



- 
Network request — open the Network tab and look for a request to
`edge.cofra.me/cf.js`. A `200` response confirms the SDK loaded from the
edge. If the request is missing or failed, check whether an ad blocker or a
Content Security Policy is blocking the script host.





- 
`window.Coframe` in the console — open the browser console and type
`window.Coframe`; once the SDK initializes it returns the runtime object (see
[The Coframe Global](../docs/coframe-global.html)). You can also filter
the console by `[Coframe]` and confirm there are no error messages.





- 
Compare with Coframe off — append `?cf_disabled` to any URL on your
site (for example, `https://yoursite.com?cf_disabled`). This disables
Coframe for that page load so you can compare behavior or performance before
and after. See [Preview & Debugging](../docs/preview-and-debug.html)
for more diagnostic tools.

## Next steps

- [How Coframe Works — Frames and Treatments](../docs/frames-and-treatments.html)


- [Analytics Integrations](../docs/segment.html)


- [CFQ Commands](../docs/cfq-commands.html)


- [Configuration — SDK Options](../docs/sdk-options.html)