How to install Grona on HubSpot CMS
Add Grona to your HubSpot-hosted pages. Redesign landing pages, website pages, and blog posts.
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 site header HTML method adds Grona to all HubSpot CMS pages (website pages, landing pages, blog posts). For per-page control, use the page-level "Additional code snippets" setting 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 HubSpot CMS site.
- 1
Open your HubSpot settings
Log in to your HubSpot account. Click the gear icon in the top navigation bar to go to Settings.
- 2
Navigate to site header HTML
Go to Website > Pages in the left sidebar. Scroll down to the "Site header HTML" section.
- 3
Paste the Grona snippet
Paste the Grona snippet into the "Site header HTML" field. This adds the script to the <head> of every page hosted on HubSpot CMS.
- 4
Save your settings
Click Save at the bottom of the page. The changes apply to all published HubSpot CMS pages immediately.
To add Grona to a single page instead, open the page in the HubSpot page editor. Go to the Settings tab, find "Additional code snippets," and paste the snippet in the "Head HTML" field.
Verify
Verify your installation
Confirm the snippet is loading correctly.
- 1
Visit one of your HubSpot-hosted pages 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 HubSpot pages to confirm the snippet loads consistently.
Ready to redesign the site you already have?
Paste your URL and watch Grona redesign it. Free to build, pay to go live.