Install Platforms
Install by platform
A platform is the kind of website you run — plain HTML, WordPress, Shopify, and so on. CROForge shows platform buttons on the Smart Code tab so you can copy a snippet that matches how that stack usually injects scripts. Today only HTML and WordPress are fully ready in the UI. Other keys exist for later guides.
Always register the site under Configurations → Websites and Apps first, then copy the snippet from that website’s Code tab — not from Settings → Installation.
Words used on this page
| Word | Everyday meaning | Meaning in CROForge |
|---|---|---|
| Platform | The CMS or framework that builds the site | A Smart Code UI key such as html, wordpress, nextjs, shopify |
| Smart Code | A small program snippet to paste | The install code for that platform, always loading the same init.js |
| Snippet | A short piece of code to copy | HTML for the HTML tab; PHP for the WordPress tab |
| init.js | The file that starts experiments | https://app.croforge.com/{workspaceId}/init.js?ver=1.0.0 with id cro-forge-experiments-js |
| wp_head | WordPress’s hook that prints tags in <head> | CROForge’s PHP helper uses add_action('wp_head', …, 0) so the script prints as early as possible |
| Priority 0 | Go first in a queue | WordPress runs this callback before later wp_head callbacks |
| functions.php | A theme file for extra PHP | Where the product tells you to paste the WordPress helper: /wp-content/themes/<your-theme>/functions.php |
| Domain | The website address host | Must be registered on the website record so install and verify stay tied to that host |
| Allowlist | An approved list | Smart Code only runs when the live hostname is on the workspace domain list |
| Head | The top of the HTML document | Recommended paste location on HTML and via headers/footers plugins |
| Async vs Sync | Wait or not wait while a script loads | HTML Smart Code defaults to Async; start there unless engineers choose Sync |
| Flicker | A brief flash of the original page | Early <head> / priority 0 injection helps variations apply before visitors notice the original |
| SPA | URL changes without a full reload | Typical of Next.js App Router; confirm targeting on client navigations |
Screenshot
Use this screenshot filename when you add a capture: install-platforms.png in docs/assets/placeholders/. Do not embed an image in this file.
Supported in the Smart Code UI today
| Platform | Key | Snippet in the product |
|---|---|---|
| HTML | html | Yes — primary. Full snippet plus copy. |
| WordPress | wordpress | Yes — PHP wp_head helper. |
Other keys exist in SMART_CODE_PLATFORMS but platform buttons and guides may be hidden or incomplete:
| Label | Key | Status |
|---|---|---|
| Next.js | nextjs | Key exists; guide not fully selectable |
| Drupal | drupal | Key exists; guide not fully selectable |
| Shopify | shopify | Key exists; guide not fully selectable |
| Wix | wix | Key exists; guide not fully selectable |
| PrestaShop | prestashop | Key exists; guide not fully selectable |
| Joomla | joomla | Key exists; guide not fully selectable |
Until those guides ship, use the HTML snippet (or ask engineering). The website platform enum used when registering a property is WEBSITE_PLATFORM.WEB = 'web' — that is separate from the Smart Code platform buttons.
WordPress
On WordPress, the product gives a PHP helper instead of raw HTML. Everyday meaning: WordPress will print the script while it is building <head>. CROForge uses priority 0 so the script is printed as early as that hook allows.
Product-provided pattern (conceptually — the Code tab already fills in your workspace id):
function add_high_priority_script() {
echo '<script src="https://app.croforge.com/{workspaceId}/init.js?ver=1.0.0" id="cro-forge-experiments-js"></script>';
}
add_action('wp_head', 'add_high_priority_script', 0);Steps in the product UI
- Copy the generated SmartCode from the WordPress platform card.
- Paste it in
/wp-content/themes/<your-theme>/functions.php. - Verify the installed Smart Code (see Verify installation).
Alternatively, paste the HTML snippet via a headers/footers plugin into <head>. Keep the same init.js URL and script id.
Child themes: prefer the child theme’s
functions.phpso a parent-theme update does not wipe the snippet. Avoid adding the helper twice (theme plus plugin), or the script can load twice.
Next.js (App Router) — engineer sketch
Until a first-class Next.js tab is enabled, inject the same script in the root layout. Prefer your team’s approved third-party script pattern (for example next/script with a strategy your performance budget allows). The sketch below is illustrative only.
// app/layout.tsx — illustrative
export default function RootLayout({ children }) {
return (
<html>
<head>
<link rel="preconnect" href="https://app.croforge.com" />
<script
src={`https://app.croforge.com/${process.env.NEXT_PUBLIC_CROFORGE_WORKSPACE_ID}/init.js?ver=1.0.0`}
id="cro-forge-experiments-js"
/>
</head>
<body>{children}</body>
</html>
);
}Next.js App Router sites are often SPAs for in-app navigations. Confirm with engineering how URL targeting and page_view behave on client-side route changes.
Register the property
Always add the site under Configurations → Websites and Apps so install and verify stay tied to a domain. Copying a snippet without registering the hostname can still load init.js, but the domain allowlist will reject the host and campaigns will not run.
