Smart Code Overview
Think of Smart Code as a small program you paste onto your website. After it is there, CROForge can look at the current page, decide whether a running experiment should apply, show the right variation, and record what visitors do. Without Smart Code, you can still design campaigns in the CROForge app — but the live site never changes.
This page explains what Smart Code is, where to copy it, what the snippet does, how Async and Sync differ, which platforms the product is ready for, and which runtime modes exist after install.
Words used on this page
Product screens use short labels. This table gives the everyday meaning first, then how CROForge uses the same word.
| Word | Everyday meaning | Meaning in CROForge |
|---|---|---|
| Smart Code | A small program snippet you paste into a website | The install snippet that loads workspace-scoped init.js so experiments can run on that site |
| Snippet | A short piece of code to copy and paste | The HTML (or WordPress PHP) block copied from the Code tab |
| init.js | The file that starts the program | The JavaScript file that boots CROForge: domain check, targeting, variation CSS/JS, and event capture |
| Workspace id | The account number for your team space | The number in the script URL https://app.croforge.com/{workspaceId}/init.js |
| Domain | The website address host, such as shop.example.com | The hostname registered under Websites and Apps and checked against the Smart Code allowlist |
| Allowlist | An approved list of hosts that are allowed | The list of domains Smart Code will run on; an unknown hostname is treated as invalid |
| Async | Do not wait — continue loading the page | Default Smart Code style: the page keeps loading while init.js downloads |
| Sync | Wait — finish this step before continuing | Optional Smart Code style that can delay page render until the script is ready |
| Flicker | A brief flash of the original page before the test version appears | The original page showing for a moment before variation CSS/JS applies; hide-body and Rocket Loader options try to reduce it |
| Cookie consent | The visitor agreeing (or not) to cookies | An optional Smart Code control that can gate CROForge behavior; the control may be hidden in the current build |
| Debug | A way to inspect what is going wrong | A website-detail tab for URL debug history; the tab trigger may be commented out in the current build |
| Verify | Check that something is actually installed | The Code-tab URL checker that opens the page with __smartcode_check and listens for a SMARTCODE_CHECK message |
| postMessage | A browser way for one window to send a short note to another | How the opened site proves Smart Code loaded during verification |
| CSP | Content Security Policy — a site rule about which scripts may run | A common reason init.js is blocked if app.croforge.com is not allowed |
| SPA | Single-page application — the URL can change without a full reload | Sites where page targeting and page_view on soft navigations need an engineering check |
| Tag manager | A tool that injects extra scripts without editing every template | A way to fire the same Smart Code snippet (for example a Custom HTML tag on All Pages) |
| GTM | Google Tag Manager, a popular tag manager | You can inject Smart Code via GTM; the CROForge frontend has no GA4/GTM settings screen |
| Platform | The kind of website builder or CMS you use | HTML, WordPress, Next.js, Drupal, Shopify, Wix, PrestaShop, or Joomla keys in the Smart Code UI |
| Campaign / experiment | A test that compares two experiences | A CROForge A/B test that Smart Code evaluates when status is Running |
| Variation | One version of the page in a test | Control or Variant CSS/JS that Smart Code injects after assignment |
| Sticky assignment | Remembering the same choice next time | The visitor keeps the same variation on later visits |
Screenshot
Use this screenshot filename when you add a capture: smart-code-overview.png in docs/assets/placeholders/. Do not embed an image in this file — keep the page paste-ready for the WordPress Code editor.
What Smart Code does
After the snippet loads init.js for your workspace, Smart Code:
- Validates the current hostname against the domain allowlist.
- Evaluates Running campaigns: URL targeting (include must match and exclude must not) plus the audience segment.
- Assigns a sticky variation and stores it so the visitor sees the same experience later.
- Injects that variation’s CSS and runs that variation’s JavaScript.
- Captures events and impressions and sends them to CROForge.
If Smart Code is missing, blocked, or on the wrong domain, campaigns stay configuration-only. Nothing on the live site will change.
Where to get the snippet (primary path)
Copy Smart Code from Configurations → Websites and Apps. Select the website, then open the Smart Code / Code tab. That is the current install path.
Settings → Installation may still exist as a legacy page in some builds. It is not the primary install path in the current navigation. Prefer Websites and Apps. The legacy page also used a different script shape and is not the production snippet documented here.
Production snippet shape (HTML):
<!-- Start CRO Forge Async SmartCode -->
<link rel="preconnect" href="https://app.croforge.com" />
<script
src="https://app.croforge.com/{workspaceId}/init.js?ver=1.0.0"
id="cro-forge-experiments-js"
></script>
<!-- End CRO Forge Async SmartCode -->What each line is for
preconnectasks the browser to open a fast connection tohttps://app.croforge.combefore the script download starts.- The
scriptsrcloadsinit.jsfor your workspace. Replace{workspaceId}with the id shown in the product (the UI already fills it in). ?ver=1.0.0is a version query so caches can be refreshed when the file changes.id="cro-forge-experiments-js"is a stable script id so the page does not load the same snippet twice.
Paste the snippet into the site’s global <head> (product FAQ recommendation) so it can run as early as possible. If your stack cannot touch <head>, paste it before </body> — then verify extra carefully, because late loading increases flicker.
Async vs Sync
The Smart Code tab can present Async (default) or Sync variants. Everyday meaning: Async means “don’t wait”; Sync means “wait.” In CROForge, Async lets the rest of the page continue while init.js downloads. Sync can hold rendering until the script is ready, which may reduce flicker but can slow first paint.
Some modes also expose advanced options:
- Settings timeout and library timeout — how long to wait for configuration and library files.
- Hide-body flicker mitigation — briefly hide the body so visitors are less likely to see the original page flash.
- Cloudflare Rocket Loader
data-cfasync— tells Cloudflare not to delay or rewrite the Smart Code script.
Start with the default Async snippet unless your engineers advise otherwise.
Platforms currently ready in the UI
A platform is the kind of site you run (plain HTML, WordPress, Shopify, and so on). CROForge stores keys for several platforms, but only some buttons and snippets are fully ready.
| Platform | Status in the product UI |
|---|---|
| HTML | Full snippet plus copy — this is the primary path |
| WordPress | PHP wp_head helper at priority 0 |
| Next.js, Drupal, Shopify, Wix, PrestaShop, Joomla | Keys exist; guides are incomplete and those buttons are not fully selectable |
Until those other guides ship, use the HTML snippet (or ask engineering). Details live in Install by platform and Supported platforms.
Modes at runtime
After install, Smart Code does not always behave the same way. The URL and editor context choose a mode.
| Mode | When it runs | Behavior |
|---|---|---|
| Live | Default on a normal visit | Assign a variation, apply JS/CSS, and track |
| Live Preview | Preview link from the campaign UI | Force a specific variation so you can QA it |
| Editor | Editor context is set | Editor tooling path instead of live assignment |
| SmartCode check | URL contains ?__smartcode_check= | Sends a postMessage so the app can verify install |
Preview mode is covered in Preview mode. The boot sequence is covered in Smart Code runtime.
Cookie consent and Debug
- Cookie consent controls exist in the Smart Code UI but can be hidden in the current build (the card is present with a hidden class). Do not assume visitors see a consent toggle in the product today.
- A Debug tab / debugger FAQ exists. In the website detail view the Debug tab trigger may be commented out / disabled. Prefer URL verification under the Code tab.
