Elementor
Elementor is a WordPress page builder: it controls how your pages look, but WordPress still manages the site-wide <head>. The Grona snippet belongs in that site-wide <head>, not inside an Elementor page layout or an HTML widget. Use this page to install Grona on an Elementor site with either a plugin or Elementor Pro’s Custom Code feature.
Before you start
Section titled “Before you start”- A WordPress site with Elementor installed (free or Pro).
- Admin access to the WordPress dashboard.
- Your Grona workspace id, from your Grona dashboard. See Install the Grona script.
This is the snippet you paste. Replace YOUR_WORKSPACE_ID in both script URLs with your workspace id:
<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>Install
Section titled “Install”Choose one of the two methods, not both. The plugin method works with Elementor Free and Pro. Custom Code needs Elementor Pro.
-
Install WPCode. In your WordPress admin, go to Plugins > Add New Plugin, search for “WPCode”, select Install, then Activate.
-
Paste the snippet. Go to Code Snippets > Header & Footer and paste the Grona snippet into the Header section.
-
Save. Select Save Changes.
-
Open Custom Code. In your WordPress admin, go to Elementor > Custom Code and select Add New.
-
Name it and set the location. Give the snippet a name such as “Grona snippet” and set the location to
<head>. -
Paste the snippet. Paste the Grona snippet into the code field.
-
Apply it to the whole site. Under Conditions, select Entire Site, then select Publish.
Both methods load Grona on every page, including pages built with Elementor and standard WordPress pages. Custom Code conditions can limit the snippet to specific pages, but you normally load Grona everywhere and choose pages with each campaign’s URL rules.
Platform notes
Section titled “Platform notes”Caching and optimisation plugins. Elementor sites are WordPress sites, so plugins such as WP Rocket, Autoptimize, LiteSpeed Cache, NitroPack and Cloudflare Rocket Loader can delay, bundle or version Grona’s scripts. Exclude both cdn.grona.ai script URLs from delaying, deferring, combining and minifying. See WordPress for the details.
Consent banners. If your consent plugin blocks scripts until a visitor accepts, Grona’s scripts do not run before consent: the first page has no flicker protection and the dashboard check reports the script as missing. See Consent and storage.
Verify
Section titled “Verify”Open your live site in a new private window, open your browser’s developer tools and filter the Network tab by grona. Confirm that antiflicker.js and main.js both load with status 200 or 304, and check a few different pages. Then run the dashboard check. See Verify your installation.
Track conversions
Section titled “Track conversions”Elementor has no Grona-specific conversion path. Use a custom-event goal from the Grona dashboard, as described in Track conversions and custom events.
Remove Grona
Section titled “Remove Grona”Delete the Grona snippet from Code Snippets > Header & Footer, or delete the Grona entry under Elementor > Custom Code. Then clear any caching plugin’s cache. See Remove Grona for the rest.