How to install Grona on any website
One snippet in your HTML head tag. Works with any framework, static site generator, or hand-coded site.
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.
The snippet loads on every page that includes it. If your site uses a shared layout or template, adding it there covers all pages. For single-page apps, add it to the root HTML file. For multi-page sites, add it to each page's <head> or the shared layout template.
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 Custom Website site.
- 1
Find your main HTML template
Open the file that contains your site's <head> section. This varies by framework: in a static HTML site, it's usually index.html. In Next.js, it's your root layout. In Nuxt, it's nuxt.config. In Astro, it's your base layout. In Hugo or Jekyll, it's the base template in your layouts folder.
- 2
Locate the </head> closing tag
Find the </head> closing tag in your template file. The Grona snippet should be placed just before this tag to ensure it loads early in the page lifecycle.
- 3
Paste the Grona snippet
Paste the three-line Grona snippet directly above the </head> tag. Make sure all three lines are included: the preconnect link, the antiflicker script, and the main script.
- 4
Save and deploy
Save the file and deploy your site using your normal process (git push, FTP upload, CI/CD pipeline, etc.). The snippet takes effect once the updated page is live.
If you're using an AI code editor like Cursor, Bolt, or v0, you can ask it to "add this script to the head of every page" and paste the snippet. The AI will handle placing it in the right file for your framework.
Verify
Verify your installation
Confirm the snippet is loading correctly.
- 1
Visit your live site in a browser after deploying.
- 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
Navigate to a few different pages and confirm the snippet loads on each one.
Ready to redesign the site you already have?
Paste your URL and watch Grona redesign it. Free to build, pay to go live.