Install Html
Install on HTML sites
An HTML site is a website whose templates you can edit directly — a static site, a custom CMS theme, or any stack where you can paste a script into the shared layout. This guide shows how to copy CROForge Smart Code and put it on every page that might run an experiment.
If you use WordPress, see Platform guides for the wp_head helper. If you only need the concept of Smart Code, start with Smart Code overview.
Words used on this page
| Word | Everyday meaning | Meaning in CROForge |
|---|---|---|
| Smart Code | A small program snippet you paste into a website | The install block from Configurations → Websites and Apps → Code tab |
| Snippet | A short piece of code to copy and paste | The HTML that includes preconnect plus the init.js script |
| init.js | The file that starts the program | https://app.croforge.com/{workspaceId}/init.js?ver=1.0.0 with id cro-forge-experiments-js |
| Head | The top of an HTML document, before visible content | The recommended paste location so Smart Code can run early |
| Domain | The website address host | The hostname you register when you add the website; Smart Code later allowlists it |
| Workspace id | Your team space number | The number in the script URL (the UI fills this in; the example below uses 1000) |
| SPA | A site that changes URL without a full page reload | Client-routed apps where page targeting and page_view on soft navigations need an engineering check |
| Tag manager | A tool that injects scripts without editing every template | You can fire the same snippet from a Custom HTML tag on All Pages |
| GTM | Google Tag Manager | A common tag manager for Smart Code; CROForge has no GA4/GTM settings screen in the frontend app |
| GA4 / gtag / dataLayer | Google Analytics 4 and the objects tags use to send events | If forwarding exists, it is Smart Code runtime behavior on the site — not an app integrations UI |
| Flicker | A brief flash of the original page | More likely if the snippet is placed late (for example only before </body>) |
| Verify | Check that the snippet is actually running | After deploy, use the Code-tab URL checker described in Verify installation |
| Platform | The kind of site builder | Choose HTML on the Smart Code tab for this guide |
Screenshot
Use this screenshot filename when you add a capture: install-html.png in docs/assets/placeholders/. Do not embed an image in this file.
Steps
- Open Configurations → Websites and Apps.
- Add or select your website (name plus domain). The domain should match the live hostname visitors use.
- Open the Smart Code / Code tab and choose platform HTML.
- Copy the snippet. It already contains your workspace id.
- Paste it into your global layout
<head>(recommended) on every page that may run campaigns. One shared header/layout file is better than pasting page by page. - Deploy the change to the environment you will verify (staging first is fine if that hostname is also registered).
- Verify using the in-app URL checker. See Verify installation.
Do not copy the snippet from Settings → Installation. That page is a legacy path. Always copy from Websites and Apps → Code tab.
Example (production)
The example uses workspace id 1000. Replace it with your workspace id if you type the snippet by hand. Copying from the product is safer.
<!DOCTYPE html>
<html>
<head>
<!-- other head tags -->
<link rel="preconnect" href="https://app.croforge.com" />
<script
src="https://app.croforge.com/1000/init.js?ver=1.0.0"
id="cro-forge-experiments-js"
></script>
</head>
<body>
<!-- page content -->
</body>
</html>Keep the script id cro-forge-experiments-js. Keep the host https://app.croforge.com unless engineering gives you a different production origin.
SPA / client-routed sites
On a SPA (single-page application), clicking a link often changes the URL without a full browser reload. Smart Code still loaded on the first page, but URL targeting and page_view-style events may not re-run the way they do on a classic multi-page site.
Confirm with engineering how page targeting and page_view behave on soft navigations before you launch experiments that depend on path changes. Runtime detail is in Smart Code runtime.
Tag managers (GTM)
A tag manager injects extra scripts without editing every HTML file. GTM (Google Tag Manager) is the usual example. You can inject the same Smart Code snippet via a Custom HTML tag fired on All Pages. Keep the workspace id correct and prefer firing as early as the container allows.
The frontend product does not ship a GA4/GTM “integrations” settings screen. Any
gtag/dataLayerforwarding would be part of the Smart Code runtime on the site, not a separate app UI.
