> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.getzendo.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Add your own CSS and JavaScript

| **Plans:** Agency.

Custom code lets you go beyond the appearance settings, by loading your own stylesheet and script on every page of the client portal. It can be used for changes that the settings cannot make. You add the code on **Settings › Workspace › Integrations**, under **Custom code**.

## Add your code

1. First check whether a setting in **Settings › Brand** or **Settings › Portal** already does what you need.
2. Open **Settings › Workspace › Integrations**.
3. Paste your CSS into **Custom styles**. You have up to 50,000 characters.
4. Paste your JavaScript into **Custom scripts**, also up to 50,000 characters.
5. Select **Save**.

![Custom code: Custom styles (3) and Custom scripts (4).](https://getzendo.io/wp-content/uploads/2026/11/kb-w9-custom-code.webp =606x564)

## How your styles are applied

Your stylesheet does not replace the client portal's own styles. It loads after them, so when the two conflict, your rules win.

Your code only keeps working as long as its selectors still match. A rule that depends on the client portal's internal class names can stop working when Zendo updates the client portal, so it pays to keep your code short and to check it after updates.

## Custom code applies to every client

**Custom styles** and **Custom scripts** load for all your clients. To give one client or one client team a different look, use a client theme instead. See [Create a client theme](https://help.getzendo.io/en/article/create-a-client-theme-u3u3fz/).

Everything in **Custom scripts** runs in your clients' browsers, on every page they open.

## What the settings already cover

CSS that repeats what a setting can already do is code you then have to maintain yourself. Before you write a rule, check these settings:

- **Settings › Brand › Appearance** — the preset, light and dark mode, typography, accent and link colours, backgrounds with images and gradients, the sidebar, the top bar, the controls, the contrast, and the border, shadow and corner radius of the client portal frame, each set separately for light and dark. See [Set your workspace appearance](https://help.getzendo.io/en/article/set-your-workspace-appearance-wobsc5/).
- **Settings › Brand › Client themes** — the same settings, for particular clients or client teams. See [Create a client theme](https://help.getzendo.io/en/article/create-a-client-theme-u3u3fz/).
- **Settings › Brand › Identity** — a logo for each place, each with its own width, plus the favicon and the app icon. See [Put your logo, favicon and app icon in place](https://help.getzendo.io/en/article/put-your-logo-favicon-and-app-icon-in-place-1sy8a1l/).
- **Settings › Portal › Sidebar content** — which items are in the sidebar, their order and groups, and which items are hidden for which clients. See [Change what is in the client sidebar](https://help.getzendo.io/en/article/change-what-is-in-the-client-sidebar-19vnb7p/).

When these settings get the client portal nearly right, one or two CSS rules are usually enough to finish the job.

## Related

- [Set your workspace appearance](https://help.getzendo.io/en/article/set-your-workspace-appearance-wobsc5/)
- [Create a client theme](https://help.getzendo.io/en/article/create-a-client-theme-u3u3fz/)
- [Show different things to different clients](https://help.getzendo.io/en/article/show-different-things-to-different-clients-td4yka/)
- [Change what is in the client sidebar](https://help.getzendo.io/en/article/change-what-is-in-the-client-sidebar-19vnb7p/)