Custom code

Custom code adds your own CSS and HTML to every page of your published docs. Use it for analytics tags, a chat widget, or styling the appearance settings don't cover. It needs the Growth plan or higher.

Find it in Docs settings, under Custom code.

Settings

Custom code applies when you save, not when you publish. Each setting names its file in the Files panel and the key octri docs custom-code set takes.

Enable custom codeon or offdefault: off

Serves the three slots below on every page. Off keeps your code saved but stops serving it, which makes it easy to rule out when something looks wrong.

customCode.enabled in octri.json · CLI enabled

Custom CSSCSSdefault: none

A stylesheet added to every page's <head>, for overriding theme colours, spacing or fonts, or adding classes your pages use. Up to 50,000 characters.

custom-code/styles.css · CLI css

Head HTMLHTMLdefault: none

Added at the end of every page's <head>: analytics tags, font links, verification meta tags. Up to 20,000 characters.

custom-code/head.html · CLI headHtml

Body-end HTMLHTMLdefault: none

Added just before every page's </body>: chat widgets and other scripts that should run after the page has drawn. Up to 20,000 characters.

custom-code/body-end.html · CLI bodyEndHtml

Only paste code you trust

Custom code runs on your public docs with the same trust as your own site, and it is saved exactly as you paste it. A malicious script would execute for every visitor.

Examples

An analytics tag, loaded on every page:

<script defer data-domain="docs.acme.com" src="https://plausible.io/js/script.js"></script>

From a terminal, reading each slot from a file:

octri docs custom-code set css=@docs.css headHtml=@head.html enabled=true

For one component

To style a single reusable block, use a custom component instead. Its stylesheet is scoped, so it can't affect the rest of the page.

From the CLI

octri docs custom-code shows your custom CSS and HTML, and octri docs custom-code set css=@styles.css enabled=true changes them.