On this page
When the Design editor does not go far enough, the Custom Code page lets you add your own CSS and paste HTML snippets into every page of your site. It is available on the Pro and Max plans, and it is the place for things like analytics scripts, site-verification tags and chat widgets.
Open the page
- Open your site in the dashboard.
- Choose Custom Code in the sidebar, under Manage.
- Fill in any of the four fields and click Save changes.
On the Free plan the fields are shown but locked, with a prompt to upgrade. See upgrade a site to Pro or Max.
The four fields
| Field | Where it goes |
|---|---|
| Custom CSS | Inside the page's <head>, after the site's own stylesheets |
| Custom Head HTML | Just before </head> |
| Custom Body Start HTML | Immediately after the opening <body> tag |
| Custom Body End HTML | Just before </body> |
Whatever you paste is inserted exactly as written; FolioPage does not rewrite or clean it. That is what makes the feature flexible, and also why it is your responsibility: a broken snippet can break the page for your visitors.
Warning: Custom code is powerful but can break your site. Paste one snippet at a time and check the live site after each change.
Custom CSS
Write plain CSS only, without <style> tags. Your rules load after the site's stylesheets, so when both set the same property, yours wins. Anything the browser does not understand is simply ignored.
Custom CSS is also applied in the page editor and the Design preview, so you see your styling while you edit.
Two things to know:
- HTML tags inside the CSS are removed, so you cannot embed SVG markup or inline SVG data URLs in a rule. Upload the image to your media library and reference its URL instead.
- To style one section only, give it a Section ID in the page editor and target that, for example
#contact h2. See section settings.
Custom HTML
The three HTML fields run on the live site only. They are not executed in the page editor or the Design preview, so an analytics script or chat bubble will not appear while you edit. That is expected; check the published site instead.
Typical uses:
- Custom Head HTML: site-verification meta tags, analytics scripts, extra font links.
- Custom Body Start HTML: tag-manager fallback snippets that ask to be placed right after
<body>. - Custom Body End HTML: analytics, tracking pixels and chat widgets that ask to be placed at the end of the page.
Most tools tell you which of these spots they expect. If they do not say, Custom Body End HTML is the safest choice.
Tip: Running the Cookie Banner app? You can mark any script here so it waits for the visitor's consent - see Hold scripts until consent.
Seeing your changes live
Saved custom code reaches the live site on its own within a few seconds - there is nothing extra to click. If a change still does not show, see why your changes do not show on the live site yet.
Moving to the Free plan
If a site moves to the Free plan, its custom code stops being added to the live site, but nothing is deleted. Everything you entered stays in the fields and is used again as soon as the site is back on Pro or Max.
Note: Custom code is per site. If you run several sites, add the snippet to each one that needs it.