Custom code lets you add your own CSS, scripts and tags to every page of a site: a chat widget, a booking tool, a font or a verification tag. It runs on every page of the live site, and broken code can break it, so make a backup before big changes.
How to add site-wide code
- In the editor, open Settings and choose Custom code.
- Pick a tab: Site CSS, Head code, Body-end code or Site JavaScript. A dot after a tab's name means it has unsaved changes.
- Paste or type your code.
- For head code, body-end code and JavaScript, choose With a cookie banner, this code runs (below).
- Click Save code. You see Saved. Publish the site to put it live.
- Publish the site.
Discard changes throws away unsaved code and puts the cookie consent choices back to what was saved. Last saved shows when the code was last changed. The yellow note at the top has a Make a backup first link to Site Backup.
The four tabs
- Site CSS: styles for every page. They're also previewed on the editor canvas, so you see them while you work.
- Head code: HTML added inside
<head>on every page, such as verification tags, analytics snippets or fonts. - Body-end code: HTML added at the end of every page, such as chat widgets and other scripts.
- Site JavaScript: JavaScript run on every page. No
<script>tags needed; if you paste them, they're taken off for you.
Head code, body-end code and JavaScript run only on the live, published site (your domain). They don't run in the editor, in Preview or on share links, so they can't affect anyone working in ContentForge. Publish to see them working.
With a cookie banner, this code runs
When the site has a cookie banner (Settings → Privacy), head code, body-end code and site JavaScript each wait for the visitor's consent. Each tab has its own choice:
- Marketing (waits for consent): the default. Runs after the visitor allows marketing cookies. Use it for ad pixels, chat widgets and anything else from another company.
- Analytics (waits for consent): runs after the visitor allows analytics cookies. Use it for visitor measurement such as Hotjar or Microsoft Clarity.
- Essential (always runs): use it only for code the site needs that sets no tracking cookies, such as verification tags, fonts or your own scripts.
Until the visitor allows it, the code's scripts don't run and its frames don't load. Without a banner, the code always runs. Site CSS always applies. See Cookie banner.
How to run an HTML widget's scripts on the live site
Most embeds work in a normal HTML Embed widget, which runs the code in a sealed box. Some need the real page or cookies, such as booking calendars, chat bubbles and review feeds.
- Select the HTML Embed widget and click Manage HTML in its toolbar (or right-click it and choose Edit Code). The HTML Content window opens.
- Tick Run on the live site.
- Paste the code and save.
The code then runs only on the published site at its own address, with full access to the page. The editor and previews show a placeholder instead. Only add code you trust. See HTML Embed widget.
How to add code to one page
Open Pages, click the page's ⋯, choose Page settings, and use Header HTML (advanced) on the SEO tab. It goes in that page's head only. See Page SEO settings.
Examples
- A live-chat bubble: paste the provider's snippet into Body-end code, leave it on Marketing, save and publish.
- Search Console or Pinterest verification: paste the meta tag into Head code and set it to Essential.
- A heatmap tool: paste it into Head code and choose Analytics.
- A booking calendar on the Contact page: an HTML Embed widget with Run on the live site ticked.
- A brand tweak:
h1 { letter-spacing: .02em; }in Site CSS, visible straight away on the canvas.
Limits and what it can't do
- Each tab holds up to 200 KB.
- One page's Header HTML holds up to 20,000 characters.
- Code is saved to the draft. Nothing changes on the live site until you publish.
- For GA4, Google Ads, Meta, TikTok or Tag Manager, use Settings → Google Tools instead of pasting code. See Google Tools and tracking.
- Turning off Enable cookie tracking in Settings → Privacy doesn't stop custom code; it still runs.
- Whether other websites may show this site inside a frame is set in Settings → Security. See Site icons, root files and security.
Who can use it
- Agency people with the Mount Olympus tool can use all of it.
- Client people need the Dev Mode permission for the Custom code section, adding or changing HTML widget code, the Run on the live site switch, Header HTML and a form's Tracking code after submit. Without it, the Custom code section isn't in their Settings list.
Troubleshooting
- "You don’t have Dev Mode access": the Custom code section couldn't load for this person. Ask the agency to turn on Dev Mode in their client permissions.
- "Head code is too large (200 KB max)" (or the same for another tab): trim the code, or load a big script from its own web address instead of pasting it.
- "Adding or changing HTML code needs the Dev Mode permission.": a client person without Dev Mode tried to change an HTML widget.
- "Changing “Run on the live site” needs the Dev Mode permission.": the same for the live-site switch.
- "Adding or changing tracking code needs the Dev Mode permission.": the same for a form's tracking code.
- My code does nothing: publish the site, then test on the live domain. It never runs in the editor, Preview or share links. With a cookie banner, accept cookies first or set the code to Essential.
- A booking or chat widget shows a blank box: open Manage HTML and tick Run on the live site, then publish.
- The site looks broken after adding code: remove or fix the code, save and publish again. If you can't find the problem, restore the backup you made first.