Inject Code & CSS

Add your own CSS, JavaScript, HTML and response headers to every page of your site, for example to fine-tune its styling, add analytics or embed a chat widget. You add them on the Code page of your site dashboard (under Advanced), on every plan. Owners and Members of your team can change them; Viewers can't.

Add your code

The Code page has a field for each place your code can go:

• Custom CSS: styles for every page.

• Head JavaScript: JavaScript or HTML for the <head> of every page, where analytics and tag manager snippets usually ask to go.

• Body JavaScript: JavaScript or HTML for the end of every page, where chat widgets and similar snippets usually ask to go.

Your code saves a moment after you stop typing and reaches visitors when you publish:

1. On the Code page, paste your code into the field your provider's instructions name.

2. Click Publish Changes at the top of the page.

Visitors see the change within five minutes of publishing.

Paste snippets with or without their tags

You can paste a snippet as your provider gives it, with its <script> or <style> tags, or only the code inside them.

• Custom CSS: if the field contains a <style> tag, we add it to your pages exactly as you wrote it. If it doesn't, we wrap it in one.

• Head JavaScript and Body JavaScript: if the field contains a <script> tag, or starts with an HTML tag such as <meta>, <link> or <noscript>, we add it exactly as you wrote it. HTML comments before that first tag don't change this. Otherwise we wrap the field in a <script> tag.

When we add a field as you wrote it, all of its JavaScript has to be inside <script> tags.

Add response headers

Add HTTP headers to your pages when a tool or a security review asks for one. You can add up to 20.

1. Under Response Headers, click Add Header.

2. Enter the header's name and its value.

3. Click Publish Changes at the top of the page.

• We send them with your site's pages. The sign-in page, the paywall, the page-not-found page, and your images and files don't get them.

• We ignore a header with an empty name, and these headers, which would break your pages or sign your members out: Set-Cookie, Content-Type, Content-Length, Content-Encoding, Transfer-Encoding and Clear-Site-Data.

• On a site with protected or hidden pages, our own Cache-Control header replaces yours.

How your code runs

Your code runs on your site's pages. It doesn't run on the sign-in page, the paywall or the page-not-found page; to change the sign-in page, see Member Login Page.

• Once per page load: moving to another page inside your site doesn't load a new page, so code that should act on every page has to watch for address changes.

• Before the content: Notion draws the page content after your code has run. Code that changes the content has to wait for it to appear, for example with a MutationObserver.

• Notion's own styles: Notion sets many styles directly on page elements, so a CSS rule often needs !important to take effect.

Code can't hide the "Made with Sotion" badge. On Starter and higher plans you can turn it off in your site settings, under Display Settings.

Troubleshooting