How to install Grona on Webflow
Add Grona to your Webflow site through Custom Code settings. Paste one snippet, publish, and go live.
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.
Adding the snippet in Site Settings > Custom Code > Head Code loads Grona on every page. To target specific pages, use each page's individual settings instead.
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 Webflow site.
- 1
Open your Webflow project settings
In the Webflow Designer, click the gear icon in the left sidebar to open Site Settings. Alternatively, go to your Webflow dashboard and click the site's settings.
- 2
Go to the Custom Code tab
In Site Settings, click the "Custom Code" tab. You'll see two sections: "Head Code" and "Footer Code."
- 3
Paste the Grona snippet in Head Code
Paste the Grona snippet into the "Head Code" section. This ensures the script loads in the <head> of every page on your site.
If you only want Grona on specific pages, you can add the snippet to individual pages instead. Open the page in the Designer, go to Page Settings (gear icon), and paste the snippet in that page's "Inside <head> tag" field.
- 4
Save and publish
Click Save in Site Settings, then publish your site. Custom code changes only take effect after publishing.
Custom code is not visible in the Webflow Designer preview. You need to publish and view the live site to confirm the script is loading.
Verify
Verify your installation
Confirm the snippet is loading correctly.
- 1
Publish your Webflow site if you haven't already.
- 2
Visit your live site (not the webflow.io staging URL).
- 3
Open DevTools (right-click > Inspect > Network tab).
- 4
Filter by "grona" in the network requests.
- 5
Confirm you see antiflicker.js and main.js loading successfully (status 200).
Ready to redesign the site you already have?
Paste your URL and watch Grona redesign it. Free to build, pay to go live.