Add your own CSS and JavaScript

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.

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.

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.
• Settings › Brand › Client themes — the same settings, for particular clients or client teams. See Create a client theme.
• 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.
• 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.

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
• Create a client theme
• Show different things to different clients
• Change what is in the client sidebar

Updated on: 09/11/2026