Customize → Custom code has two boxes: CSS to restyle your portal, and HTML for scripts such as analytics. Each takes up to 50,000 characters, and Save changes saves both.

Custom code with CSS for the header and footer, and the HTML box's note on where it runs

Restyle with CSS

Your CSS goes after Tuti's own styles on every page of your portal and docs, so it wins where both set something. It shows in the preview as you type. It doesn't apply to the widget.

Two class names are there for your CSS to target:

  • .portal-header: the header, with your logo and links.

  • .portal-footer: the footer.

.portal-header { border-bottom: 0; }
.portal-footer { background: #f5f5f4; }

Other class names on the page can change when Tuti is updated, so prefer these two.

Add HTML and scripts

Your HTML goes at the end of every page, scripts included: analytics, a chat widget and the like.

<script async src="https://analytics.example.com/script.js"></script>

Scripts run in the order you wrote them, as on any other page: what comes after an external script waits for it to load, unless it's marked async or defer.

Where it runs

HTML only runs where your portal is on your own address: a custom domain (on the Pro and Business plans) or a sub-folder of your site (on Business). That way a script always runs on your site, never under Tuti's name. It never runs:

  • on your portal's Tuti address, such as your-project.tuti.so,

  • in the widget,

  • in the Customize preview.

Under the box, Customize says where it runs now. If your portal isn't on its own address yet, it links to add a domain or a sub-folder in Settings → Domain. See Your portal's address.

If your plan no longer includes the address, your HTML stops running with it, and it's kept for when the plan is back.