Introduction

The custom home page lets you replace the default home content area of your help center with your own HTML and Tailwind CSS. It's the easiest way to give your home page a branded landing experience — a hero, a curated grid of categories, a call to action — without leaving the Brainfish dashboard or shipping a separate website.

This feature is available on the sidebar layout only, where the help center has a persistent navigation sidebar and a content area on the right.

Before you start

• Confirm your help center is using the sidebar layout. You can switch layouts under Themes & Customization in the same panel.
• The editor accepts raw HTML with Tailwind CSS utility classes. No build step or external CSS file is needed — Tailwind compiles your classes at runtime.
• You can use Phosphor icons by dropping in tags like <i class="ph-duotone ph-rocket-launch"></i>.
• Theme colors are exposed as CSS variables. Use hsl(var(--p)) for your primary brand colour and hsl(var(--pc)) for primary content colour, so your custom home page automatically matches the rest of the help center.

Steps

1. Open your help center channel from the Agents screen, then open the Connection Settings panel.
2. Scroll to the Themes & Customization section.
3. Confirm the layout is set to Sidebar. The custom home page block only appears on sidebar layouts.
4. Toggle Custom home page on. A reference template card and an Edit home page button appear below.
5. Click Edit home page to open the editor. The first time you open it, the editor pre-fills with a documentation-style reference template (a hero plus a 2×2 grid of cards) so you always have a starting point.
6. Use the Write tab to author your HTML. Switch to the Preview tab at any time to see exactly how it will render — the preview uses the same Tailwind compiler and Phosphor icon set as the live help center.
7. Click Format to prettify your HTML, or Reset to template to discard your changes and restore the reference layout. You'll be asked to confirm before any in-progress edits are lost.
8. When you're happy with the result, click Apply. Apply stays disabled until you've actually changed the template — this prevents accidentally publishing the placeholder copy ("Section title 1", "Your headline here") to your live home page.
9. Save the panel using the Save button at the top of Connection Settings to publish your changes to the live help center.

What's allowed in the editor

For security, the editor blocks anything that could ship JavaScript or phishing surfaces to your visitors:

• <script> tags and inline event handlers (onclick=, onmouseover=, and other on*= attributes).
• <iframe>, <object>, <embed>, <form>, <meta>, <base>, <link>, and <style> tags.
• formaction and ping attributes.

If you try to apply HTML containing any of the above, the editor shows an error toast naming the disallowed element. The same rules are enforced again at render time, so even if a forbidden tag somehow makes it past the editor, your visitors will never see it execute.

Theming tips

• Brand colors: Wrap colour values in hsl(var(--p) / <opacity>) or use Tailwind arbitrary values like bg-[hsl(var(--p)/0.08)] and text-[hsl(var(--p))] to pull your site's primary colour automatically.
• Icons: Use either inline SVG or Phosphor classes (ph-fill, ph-duotone, ph-bold, ph-light, ph-regular, ph-thin). Phosphor stylesheets are loaded for you.
• Internal links: <a href="/articles"> and other relative URLs will route through your help center as expected. Use target="_blank" for links that should open in a new tab — Brainfish automatically adds rel="noopener noreferrer" so your help center can't be reverse-tabnabbed.
• Layout: Templates are typically wrapped in a centered container like <div class="mx-auto w-full max-w-6xl px-6 py-16"> so the content has comfortable side margins on wide screens.

Summary

To customize your home page, switch to the sidebar layout, enable Custom home page in Themes & Customization, author your HTML in the editor, and click Apply followed by Save. The pre-filled reference template is a great starting point — replace its placeholder copy and icons with your own content, preview as you go, and publish when you're ready.