How to install Grona on Elementor
Add Grona to your Elementor-powered site. Works with both free Elementor and Elementor Pro.
Under 2 minutesWhy you need the Grona snippet
Grona's research and competitive intelligence features work without any code on your site. You can analyze competitors, review traffic data, and get AI-powered recommendations right from the dashboard.
To make live changes on your website, like editing text, swapping images, adjusting styles, or running experiments, Grona needs your permission. Installing this snippet grants that permission and connects your site to Grona's optimization engine.
Live editing
Change text, images, and styles through AI chat.
Experiments
Run A/B tests and track results in real time.
Your choice of scope
Add to specific pages or your entire site.
Your Grona snippet
Copy this and paste it into your website's <head> section.
<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>Preconnect: Speeds up loading by establishing an early connection to Grona's CDN.
Antiflicker script: Loads synchronously to prevent content flash before optimizations apply.
Main script: Powers Grona's optimization engine: live editing, experiments, and tracking.
Both methods add Grona to every page on your site, including pages built with Elementor and standard WordPress pages. If you use Elementor Pro's Custom Code, you can set conditions to target specific pages.
Replace YOUR_WORKSPACE_ID with the ID from your Grona dashboard. The complete snippet with your ID is available in Settings > Installation.
Step-by-step instructions
Follow these steps to add the Grona snippet to your Elementor site.
Understand how Elementor fits in
Elementor is a WordPress page builder. It controls how your pages look, but the site's <head> section is still managed by WordPress. The Grona snippet goes in the site-wide <head>, not inside individual Elementor page layouts.
Already familiar with WordPress? Follow the WordPress installation guide for the full walkthrough. The steps below cover both the plugin method and the Elementor Pro method.
Option A: Use a WordPress plugin (recommended, works with free Elementor)
Install the WPCode plugin from Plugins > Add New. Once activated, go to Code Snippets > Header & Footer and paste the Grona snippet in the "Header" section. Click Save Changes. This works regardless of whether you use Elementor Free or Pro.
Option B: Use Elementor Pro's Custom Code feature
If you have Elementor Pro, go to Elementor > Custom Code in your WordPress admin. Click "Add New." Give it a name like "Grona snippet." Set the location to "<head>." Paste the Grona snippet. Under Conditions, select "Entire Site." Click Publish.
The Custom Code feature is available only in Elementor Pro. If you're using the free version, use Option A (the plugin method).
Verify your installation
Confirm the snippet is loading correctly.
- 1Visit your live site in a browser.
- 2Open DevTools (right-click > Inspect > Network tab).
- 3Filter by "grona" in the network requests.
- 4Confirm you see antiflicker.js and main.js loading successfully (status 200).
- 5Check a few different pages to confirm the snippet loads site-wide.
Ready to optimize your site?
Paste your URL to see what Grona can do. Free to start.