Install the Grona script

Every Grona website campaign runs through one snippet in your page’s <head>. This page gives you the snippet, says where it goes and lists the loading choices that break it. Add it once per site template before you create your first campaign.

The snippet

<link rel="preconnect" href="https://cdn.grona.ai">
<script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/antiflicker.js" data-grona-af-bg="#ffffff"></script>
<script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js" async></script>

Line	What it does
`preconnect`	Opens the connection to `cdn.grona.ai` early, so both scripts start downloading sooner.
`antiflicker.js`	Loads synchronously and hides the page until Grona has applied its changes, for at most 5 seconds after the anti-flicker script runs. See Prevent flicker.
`main.js`	The runtime script for your workspace. It loads asynchronously, picks the campaign and variation for the visitor, applies the changes and sends tracking events.

The data-grona-af-bg attribute sets the colour shown while the page is hidden. Set it to your page’s background colour. Without the attribute, the hidden page is transparent.

Install it

Copy your snippet from the Grona dashboard.

Open the Installation Guide from your campaigns in the Grona dashboard. It shows the snippet with your workspace id already filled in, lets you choose the background colour, and can email the instructions to your developer. If you copy the snippet from this page instead, replace both YOUR_WORKSPACE_ID values with the id from your dashboard snippet.

Paste it at the top of <head>, above every other script.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://cdn.grona.ai">
    <script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/antiflicker.js" data-grona-af-bg="#ffffff"></script>
    <script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js" async></script>
    <title>Acme Market</title>
    <!-- your other scripts and styles follow -->
  </head>

Add it to the template every page shares.

Campaigns can only run, and goals can only be counted, on pages that carry the snippet. Put it in your base layout or theme header rather than on single pages.
Publish your site and verify the installation.

If your site runs on a hosted platform, the platform guides, such as WordPress, Webflow and Custom sites and frameworks, show where the code goes. Shopify stores install through the Grona app instead of pasting code; see Shopify.

Loading rules

Keep these rules, or the snippet loads but campaigns flicker, run on stale settings or never show.

One copy per page. Add the snippet once. Check that a theme, a plugin and a tag manager do not each add their own copy.
Load it from cdn.grona.ai. Do not bundle or self-host it. Grona rebuilds your workspace’s main.js whenever you change a campaign, a goal or a setting, and browsers check for a new version on every page view. A copy in your build or on your own server stops receiving those updates, so paused campaigns keep running and new ones never appear.
Do not defer the anti-flicker script. It must stay a plain synchronous <script> with no async or defer. Leave async on main.js as it is.
Exclude both scripts from optimisation plugins. Cache and speed plugins that delay, combine or minify JavaScript can make the anti-flicker script late (the page flickers) or add a ?ver= suffix to the script URL (the dashboard check then reports the script as missing). Add both cdn.grona.ai scripts to the plugin’s exclusion list.
Avoid tag managers and script loaders. A tag manager or a framework script loader injects the snippet after the page has started to paint, so the anti-flicker script cannot hide the first paint. See Google Tag Manager.

Install without the anti-flicker script

The Installation Guide has an Include Antiflicker option. Turn it off and the snippet becomes two lines:

<link rel="preconnect" href="https://cdn.grona.ai">
<script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js" async></script>

Without the anti-flicker script nothing blocks your page from painting, so pages never wait on Grona. The trade-off is that visitors in a campaign can see your original content for a moment before the variation replaces it. Prevent flicker explains the choice in detail.