Project ID
__PROJECT_ID__

JavaScript integration instructions

Follow these step-by-step instructions to integrate Coframe into your website.
Coframe should be installed on all pages that will be optimized and on pages needed for metric tracking.

1. Main Installation Script

Add this script to the head of your page. Must be installed synchronously (not via tag managers) because antiflicker is enabled.

<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: '__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>

2. Verify Installation

To verify that Coframe is installed correctly, open your browser's developer console and type:

> Coframe
{status: {…}, projectId: '...', variantsAndElements: Array(0), userToken: '...', sessionId: '...', …}
> Coframe.status.initialized
true

Success: If you see the Coframe object and Coframe.status.initialized returns true, the installation is working correctly.

Issues: Check the browser console for any Coframe error logs if the object is not found or initialization failed.

Configuration settings