How to install Grona on Elementor
Add Grona to your Elementor-powered site. Works with both free Elementor and Elementor Pro.
Under 2 minutes
Why install
Why 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 redesign your live site, generate whole new sections with images, and ship campaigns, Grona needs your permission. Installing this snippet grants that permission and connects your site to Grona's agentic engine.
Live editing
Generate new sections, images, and styles on your existing pages through AI chat.
Campaigns
Run live campaigns and track results in real time.
Your choice of scope
Add to specific pages or your entire site.
The snippet
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 Grona's changes apply.
Main script: Powers Grona's agentic engine: live editing, campaigns, 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.
Install
Step-by-step instructions
Follow these steps to add the Grona snippet to your Elementor site.
- 1
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.
- 2
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.
- 3
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
Verify your installation
Confirm the snippet is loading correctly.
- 1
Visit your live site in a browser.
- 2
Open DevTools (right-click > Inspect > Network tab).
- 3
Filter by "grona" in the network requests.
- 4
Confirm you see antiflicker.js and main.js loading successfully (status 200).
- 5
Check a few different pages to confirm the snippet loads site-wide.
Ready to redesign the site you already have?
Paste your URL and watch Grona redesign it. Free to build, pay to go live.