The install snippet · Splitlab Developers

Every Splitlab integration comes down to one thing: loading the engine on your pages. The dashboard generates a ready-to-paste SmartCode snippet for your project — this page explains exactly what it does, so you can drop it into any website, page builder, or tag manager.

Get your snippet from the dashboard

Open your project in the Splitlab dashboard → Install / SmartCode. It fills in your project key and lets you toggle anti-flicker and cookie consent. The snippet below is the same code, with YOUR_PROJECT_KEY as a placeholder.

The snippet

Paste this into the <head> of every page you want to run experiments on:

Splitlab SmartCode

<!-- Start Splitlab Orchestrator SmartCode -->
<!-- 1. Preconnect to the CDN + API origins (saves DNS + TLS on the critical path) -->
<link rel="preconnect" href="https://cdn.splitlab.io/" crossorigin>
<link rel="preconnect" href="https://api.splitlab.io/" crossorigin>
 
<!-- 2. Preload the engine (the browser fetches it ASAP, before any JS runs) -->
<link rel="preload" href="https://cdn.splitlab.io/cdn/engine.js" as="script" crossorigin>
 
<!-- Anti-flicker: hide the body until the engine reveals it (failsafe timeout only) -->
<script>
  !function(d,w,t,id){
    var s=d.createElement("style");
    s.id=id;s.innerHTML="body{opacity:0!important}";
    (d.head||d.documentElement).appendChild(s);
    w.rmfk=function(){var e=d.getElementById(id);e&&e.remove()};
    setTimeout(w.rmfk,t);
  }(document,window,3500,"abhide");
</script>
 
<!-- 3. Load the engine async so it never blocks render; onerror reveals the page instantly -->
<script src="https://cdn.splitlab.io/cdn/engine.js"
        data-mvt="engine"
        data-project-key="YOUR_PROJECT_KEY"
        data-flicker-class="abtest-hidden"
        crossorigin="anonymous"
        async
        onerror="if(window.rmfk)window.rmfk()"></script>
<!-- End Splitlab Orchestrator SmartCode -->

Replace YOUR_PROJECT_KEY with your project's key. That's the only value you need to change.

What each part does

Part	Purpose
`preconnect` (cdn + api)	Warms up DNS + TLS to the two origins the engine touches, so it starts faster.
`preload` engine.js	Tells the browser to fetch the engine immediately, before any script executes.
Anti-flicker `<script>`	Hides the body (`opacity:0`) until the engine applies the variant, then reveals it via `window.rmfk()`. A `3500ms` timeout is a failsafe only — the engine reveals the page itself as soon as the variant is applied.
`data-project-key`	Required. Tells the engine which project's experiments to serve.
`data-mvt="engine"`	Marks this script as the Splitlab engine (used for detection + dedupe).
`data-flicker-class`	The CSS class the engine toggles while applying variants.
`async`	The engine never blocks page render.
`onerror="if(window.rmfk)window.rmfk()"`	If the engine can't load (CDN blocked, CSP, ad-blocker, offline), the page is revealed instantly instead of staying hidden.

Options

Anti-flicker (recommended). Keep the anti-flicker <script> in for a clean, flash-free experience. You can omit it if you don't mind a brief flash of the control before a variant applies — the engine still works either way.

Cookie consent. To gate tracking until the visitor consents, add one attribute to the engine script:

<script src="https://cdn.splitlab.io/cdn/engine.js"
        data-mvt="engine"
        data-project-key="YOUR_PROJECT_KEY"
        data-flicker-class="abtest-hidden"
        data-cookie-consent-enabled="true"
        crossorigin="anonymous"
        async
        onerror="if(window.rmfk)window.rmfk()"></script>

Verify

After you paste the snippet and publish:

Load a page, open DevTools → Network, filter for engine.js → it should return 200 from cdn.splitlab.io.
In Elements, confirm the script tag carries a non-empty data-project-key.
In the dashboard's Install / SmartCode screen, click Verify — it flips to installed once the engine phones home from your domain.

Platform guides

Not hand-editing HTML? Use a platform guide: