Overview
Overview of the Coframe SDK documentation
Copy this guide and your current settings as a prompt for your AI agent.
Preview agent promptSee the guide, code and settings included when you copy.
Coframe brings your UX to life with AI-powered optimization and personalization. This documentation is the entry point for installing the Coframe SDK, understanding how it behaves at runtime, validating its performance, and interpreting the data it produces.
It is organized around the stages of adopting Coframe — evaluating it, installing it, and operating it — rather than around the structure of the codebase. Start from your current goal and follow the path that fits.
On this page
01What this documentation is for
The docs support a few different readers. Sometimes the reader is a frontend engineer who needs to get the SDK onto the page. Sometimes it is a performance owner trying to understand how Coframe affects LCP and Core Web Vitals. Sometimes it is an analytics or growth team member trying to understand what data Coframe emits and how it fits into the rest of the measurement stack.
The docs are written to answer practical questions quickly:
- What is Coframe? — Why Use Coframe
- How do I install it? — Getting Started
- How do I verify it is working? — Getting Started and Data Verification
- How does it behave at runtime? — How Coframe Works
- How do I interpret its performance and analytics behavior? — Performance and Data & Analytics
- How do I debug it when something looks wrong? — Troubleshooting
02How to read the docs
Start from your current goal, not from the first page in the sidebar.
Evaluation path
If you are still deciding whether Coframe is the right fit, begin with Why Use Coframe for what the product does and who it is for, then Getting Started to see how little it takes to install.
Integration path
When you are ready to install, Getting Started covers the core script-tag installation and how to verify it. For environment-specific guidance, see the SDK Integrations guides (JavaScript, React, Next.js, Nuxt, Webflow, Shopify, Unbounce, Framer).
Validation and operations path
Once Coframe is running, Performance, Data & Analytics, Configuration, and Troubleshooting help you interpret runtime behavior, understand the data, tune the integration, and resolve problems after launch.
03How Coframe is installed
Coframe is delivered as a script tag served from the edge — there is no npm install. You add a small install script to your site, replace the project ID
placeholder, and the SDK loads from https://edge.cofra.me/cf.js. The full
snippet and verification steps are in Getting Started;
the delivery model is described in
Delivery & Versioning.
04Documentation structure
Getting Started
The onboarding layer: what Coframe is at a glance, the install script, and how to confirm it loaded correctly.
Why Use Coframe
The product framing — what Coframe does, the capabilities it provides, and the teams it fits.
Core Concept
The foundational model: frames and treatments, visitor identity and sessions, and experiment assignment and IDs.
How Coframe Works
The runtime lifecycle: start with the Runtime Overview or narrated Runtime Walkthrough, then follow loading and initialization, targeting and rendering, and tracking and navigation.
Performance
LCP, Core Web Vitals, anti-flicker behavior, and how to validate Coframe’s performance impact in the field.
Data & Analytics
Coframe’s data model: the events it collects, how to analyze experiment results, and how the data connects to your analytics stack.
SDK Integrations
Environment-specific installation guides for JavaScript, React, Next.js, Nuxt, Webflow, Shopify, Unbounce, and Framer.
Shopify App
The Coframe app for Shopify: install from the App Store, connect the store, settings and permissions, verification, and how checkout tracking and consent work.
Analytics Integrations
How to forward Coframe treatment data to GTM, Google Analytics, Segment, Statsig, Amplitude, PostHog, and Heap.
Configuration
The runtime knobs: SDK options, environments, identity settings, and tracking settings.
Feature Flags
Coframe’s feature flags product: release toggles, multiple variants and remote config, decided at the Edge and read through the SDK’s browser, React and server entry points, with public and private flags and stable percentage rollouts.
SDK Reference
The complete API surface: CFQ commands, the
config reference, the
window.Coframe global,
preview & debugging, and
delivery & versioning.
Troubleshooting
The recovery layer: the debug checklist, common integration issues, missing data, data verification, LCP regressions, and testing and validation.
Release Notes
How the SDK evolves: the release & versioning model and migration notes for deprecated command forms.
05Where to go next
Getting Started
Install Coframe and verify it’s running — your first integration in a few minutes.
Why Use Coframe
What Coframe does, the capabilities it provides, and where it fits in your stack.
SDK Reference
The complete API surface — CFQ commands, config, the Coframe global, and more.
Performance
LCP, Core Web Vitals, anti-flicker behavior, and validation workflows.
06Recommended first reading
If you are not sure where to start, this order works well:
- Why Use Coframe
- Getting Started
- the SDK integration guide that matches your environment
- Performance / Core Web Vitals
- Data & Analytics Overview
That sequence gives a high-level product picture first, then the installation path, then the two most important operational lenses: performance and data.
# Overview Overview of the Coframe SDK documentation Coframe brings your UX to life with AI-powered optimization and personalization. This documentation is the entry point for installing the Coframe SDK, understanding how it behaves at runtime, validating its performance, and interpreting the data it produces. It is organized around the stages of adopting Coframe — evaluating it, installing it, and operating it — rather than around the structure of the codebase. Start from your current goal and follow the path that fits. ## What this documentation is for The docs support a few different readers. Sometimes the reader is a frontend engineer who needs to get the SDK onto the page. Sometimes it is a performance owner trying to understand how Coframe affects LCP and Core Web Vitals. Sometimes it is an analytics or growth team member trying to understand what data Coframe emits and how it fits into the rest of the measurement stack. The docs are written to answer practical questions quickly: - What is Coframe? — [Why Use Coframe](../docs/why-use-coframe.html) - How do I install it? — [Getting Started](../docs/getting-started.html) - How do I verify it is working? — [Getting Started](../docs/getting-started.html) and [Data Verification](../docs/data-verification.html) - How does it behave at runtime? — [How Coframe Works](../docs/runtime-overview.html) - How do I interpret its performance and analytics behavior? — [Performance](../docs/core-web-vitals.html) and [Data & Analytics](../docs/analytics-platform-overview.html) - How do I debug it when something looks wrong? — [Troubleshooting](../docs/debug-checklist.html) ## How to read the docs Start from your current goal, not from the first page in the sidebar. Evaluation path If you are still deciding whether Coframe is the right fit, begin with [Why Use Coframe](../docs/why-use-coframe.html) for what the product does and who it is for, then [Getting Started](../docs/getting-started.html) to see how little it takes to install. Integration path When you are ready to install, [Getting Started](../docs/getting-started.html) covers the core script-tag installation and how to verify it. For environment-specific guidance, see the [SDK Integrations](../docs/javascript.html) guides (JavaScript, React, Next.js, Nuxt, Webflow, Shopify, Unbounce, Framer). Validation and operations path Once Coframe is running, [Performance](../docs/core-web-vitals.html), [Data & Analytics](../docs/analytics-platform-overview.html), [Configuration](../docs/sdk-options.html), and [Troubleshooting](../docs/debug-checklist.html) help you interpret runtime behavior, understand the data, tune the integration, and resolve problems after launch. ## How Coframe is installed Coframe is delivered as a script tag served from the edge — there is no `npm install`. You add a small install script to your site, replace the project ID placeholder, and the SDK loads from `https://edge.cofra.me/cf.js`. The full snippet and verification steps are in [Getting Started](../docs/getting-started.html); the delivery model is described in [Delivery & Versioning](../docs/delivery-and-versioning.html). ## Documentation structure Getting Started The onboarding layer: what Coframe is at a glance, the install script, and how to confirm it loaded correctly. Why Use Coframe The product framing — what Coframe does, the capabilities it provides, and the teams it fits. Core ConceptThe foundational model: [frames and treatments](../docs/frames-and-treatments.html), [visitor identity and sessions](../docs/identity-and-sessions.html), and [experiment assignment and IDs](../docs/experiment-assignment.html). How Coframe Works The runtime lifecycle: start with the [Runtime Overview](../docs/runtime-overview.html) or narrated [Runtime Walkthrough](../docs/sdk-internals-overview.html), then follow loading and initialization, targeting and rendering, and tracking and navigation. Performance LCP, Core Web Vitals, anti-flicker behavior, and how to validate Coframe’s performance impact in the field. Data & Analytics Coframe’s data model: the events it collects, how to analyze experiment results, and how the data connects to your analytics stack. SDK Integrations Environment-specific installation guides for JavaScript, React, Next.js, Nuxt, Webflow, Shopify, Unbounce, and Framer. Shopify App The Coframe app for Shopify: install from the App Store, connect the store, settings and permissions, verification, and how checkout tracking and consent work. Analytics Integrations How to forward Coframe treatment data to GTM, Google Analytics, Segment, Statsig, Amplitude, PostHog, and Heap. Configuration The runtime knobs: [SDK options](../docs/sdk-options.html), [environments](../docs/environments.html), [identity settings](../docs/identity-settings.html), and [tracking settings](../docs/tracking-settings.html). Feature Flags Coframe’s feature flags product: release toggles, multiple variants and remote config, decided at the Edge and read through the SDK’s browser, React and server entry points, with public and private flags and stable percentage rollouts. SDK Reference The complete API surface: [CFQ commands](../docs/cfq-commands.html), the [config reference](../docs/config-reference.html), the [window.Coframe global](../docs/coframe-global.html), [preview & debugging](../docs/preview-and-debug.html), and [delivery & versioning](../docs/delivery-and-versioning.html). Troubleshooting The recovery layer: the [debug checklist](../docs/debug-checklist.html), [common integration issues](../docs/common-integration-issues.html), [missing data](../docs/missing-data.html), [data verification](../docs/data-verification.html), [LCP regressions](../docs/lcp-regressions.html), and [testing and validation](../docs/testing-and-validation.html). Release Notes How the SDK evolves: the [release & versioning model](../docs/changelog.html) and [migration notes](../docs/migration-notes.html) for deprecated command forms. ## Where to go next [Getting StartedInstall Coframe and verify it’s running — your first integration in a few minutes.](../docs/getting-started.html)[Why Use CoframeWhat Coframe does, the capabilities it provides, and where it fits in your stack.](../docs/why-use-coframe.html)[SDK ReferenceThe complete API surface — CFQ commands, config, the Coframe global, and more.](../docs/cfq-commands.html)[PerformanceLCP, Core Web Vitals, anti-flicker behavior, and validation workflows.](../docs/core-web-vitals.html) ## Recommended first reading If you are not sure where to start, this order works well: - [Why Use Coframe](../docs/why-use-coframe.html) - [Getting Started](../docs/getting-started.html) - the [SDK integration guide](../docs/javascript.html) that matches your environment - [Performance / Core Web Vitals](../docs/core-web-vitals.html) - [Data & Analytics Overview](../docs/analytics-platform-overview.html) That sequence gives a high-level product picture first, then the installation path, then the two most important operational lenses: performance and data.