# Add custom CSS and scripts in the classic editor

_Category: Classic template editor_

Go beyond the settings with your own code: custom CSS to fine-tune the look of your help center, and scripts for analytics, chat tools and other services.

**Who can do this:** Owners and Admins · **Plans:** All plans

Your changes save to a draft automatically, and your code reaches visitors after you click **Publish**. See [Save, preview and publish in the classic editor](https://self.helpcenter.io/content/classic-editor-publish).

## Add custom CSS

1. In the left menu, click **Template editor**, then click **Style**.
2. Scroll to **Custom CSS** and type your CSS in the code box.
3. Click the eye icon (**Preview**) to check the result on real pages.
4. Click **Publish**.

- **You can write SCSS,** such as nested rules and variables. It's turned into CSS for your help center.
- **The preview in the editor is only a rough check.** It updates as you type with plain CSS only, so check SCSS, and anything that matters, with **Preview**.
- **One error drops all of it.** If your custom CSS contains something that can't be read, your help center shows none of it and keeps its standard styles. After a big change, check **Preview** before you publish.

To find the class names to target, right-click an element on your help center and choose Inspect in your browser. See [My custom CSS doesn't work](https://self.helpcenter.io/content/custom-css-not-working).

## Add a script

1. Click **Advanced**, then **Add Script** under **Custom Scripts**.
2. In **Add Custom Script**, type a **Script Name** you'll recognize, such as "Chat widget", and choose its **Position**.
3. Paste the whole snippet into **Script Content**, including the `<script>` tags.
4. Click **Add Script**.
5. Click **Publish**.

![Screen recording. In Advanced, click Add Script. Name it and choose a Position. Paste the whole snippet into Script Content. Click Add Script. It runs on every page once you Publish.](https://helpcenter-io.s3.amazonaws.com/uploads/self/eRG54dCSaxwcPNnboHTeEWy4luyuRywXXV4licSa.gif)
Paste the snippet exactly as your service gives it to you.

**Position** decides where the script goes in each page: **Start of <head>**, **End of <head>** (the default), **Start of <body>** or **End of <body>**. Follow the instructions of the service the script comes from.

- **Your scripts run on every page** of your help center, and in **Preview**. They don't run inside the editor itself.
- **To change a script**, click its pencil icon, edit it and click **Update Script**.
- **To delete a script**, click its trash icon, or **Delete** in the script's window. It's removed straight away, without a confirmation.
- **To change the order** of scripts in the same position, drag them in the list.

## Google Analytics and older scripts

Under **Integrations**, in the same group:

- **Google Analytics Code** takes the whole Google Analytics snippet. Paste it as Google gives it to you, including the `<script>` tags. It goes near the top of every page. See [Add Google Analytics or Google Tag Manager](https://self.helpcenter.io/content/google-analytics).
- **Other Scripts** is the older place for scripts, at the end of every page. Its note says it's deprecated: move anything in it to **Custom Scripts**, where you choose the position.

HTML you write in a **Custom HTML** block or in **Custom HTML Footer:** also goes on the page exactly as written, so scripts in it run too. See [Arrange your home page in the classic editor](https://self.helpcenter.io/content/classic-editor-home-page).

When you move to the new template editor, your custom CSS and scripts carry over, though CSS written for the classic design may need changes: see [What carries over to the new template editor](https://self.helpcenter.io/content/what-carries-over-to-the-new-template-editor).

## Troubleshooting

**"Name is required"** or **"Script content is required"**. Fill in both before you click **Add Script**.

**My CSS works in the editor but not on my help center.** Check that you published, then look at **Preview**: if none of your custom CSS shows there, part of it can't be read. Remove recent changes until it shows again.

**My script doesn't run.** Check that you published and that you pasted the full snippet with its `<script>` tags. Open your help center, not the editor: scripts don't run in the editor's preview.

## Related articles

- [Arrange your home page in the classic editor](https://self.helpcenter.io/content/classic-editor-home-page)
- [Customize the footer in the classic editor](https://self.helpcenter.io/content/classic-editor-footer)
- [Add Google Analytics or Google Tag Manager](https://self.helpcenter.io/content/google-analytics)
- [Save, preview and publish in the classic editor](https://self.helpcenter.io/content/classic-editor-publish)