How to Create a Custom Home Page for Sidebar Layout

Summary

The Custom Home Page feature lets you replace the default help center home page (sidebar layout) with your own HTML and Tailwind CSS design. Create a branded landing experience with hero sections, card grids, links to key articles, and more — all without deploying any code.

Prerequisites

• Your help center must use the sidebar layout
• You need admin access to the Brainfish platform

How to Enable

1. Navigate to Agents → Help Center → Connection Settings
2. Scroll down to the Layout section under Theme Customization
3. Toggle Custom home page on
4. Click the HTML editor panel that appears to open the editor

Using the Editor

The custom home page editor provides a full HTML editing experience:

• Write tab — A Monaco code editor with syntax highlighting, auto-completion, bracket matching, and word wrap. Write your HTML and Tailwind CSS classes here.
• Preview tab — A live preview of your custom home page. Tailwind classes are compiled at runtime via the Tailwind Play CDN so you can see exactly how your page will look.
• Reset to template — Inserts the default reference template (hero section + 2x2 card grid). Useful as a starting point or to restore the default layout.
• Format — Auto-formats your HTML using Prettier for consistent indentation and readability.
• Apply — Stages your changes. You must still save the panel to publish them to your live help center.

Getting Started with the Reference Template

When you first enable the custom home page, the editor pre-fills with a reference template that includes:

• A centered hero section with a headline and tagline
• A 2x2 grid of linked cards with icons, titles, and descriptions
• Phosphor icons via the ph-duotone icon classes
• Theme-aware colors that auto-match your brand using DaisyUI CSS variables (hsl(var(--p)))

To get started:

1. Click Apply to stage the template
2. Save the panel to publish it
3. Re-open the editor and customize the headline, descriptions, links, and icons to match your brand

Writing Custom HTML

Supported Features

• Tailwind CSS — Use any Tailwind utility class. Classes are compiled at runtime via the Tailwind Play CDN.
• Phosphor Icons — Use <i class="ph-duotone ph-icon-name"></i> for icons. Browse available icons at phosphoricons.com.
• Theme Colors — Reference your help center's primary color with hsl(var(--p)) in classes or inline styles.
• Links — Use <a href="/articles"> to link to your articles list, or <a href="/articles/your-article-slug"> for specific articles.
• Images — Use <img> tags with http, https, or data: URLs.
• SVG — Inline SVG elements are supported with full attribute support (viewBox, preserveAspectRatio, etc.).

Security Restrictions

For security, the following are not allowed in custom home page HTML:

• <script> tags
• Inline event handlers (e.g. onclick=, onerror=)
• <form>, <iframe>, <object>, <embed>, <link>, <style>, <meta>, <base> tags
• formaction and ping attributes

These restrictions are enforced both at author time (in the editor) and at render time (server-side sanitization) to protect your end users.

Example: Simple Hero with Quick Links

<div class="mx-auto w-full max-w-4xl px-6 py-16">
  <header class="text-center mb-12">
    <h1 class="text-4xl font-bold text-slate-900">
      Welcome to Our Help Center
    </h1>
    <p class="mt-4 text-lg text-slate-600">
      Find answers, guides, and resources to get the most out of our platform.
    </p>
  </header>

  <div class="grid gap-6 sm:grid-cols-2">
    <a href="/articles" class="block p-6 rounded-xl bg-blue-50 hover:bg-blue-100 transition">
      <h3 class="text-lg font-semibold text-blue-900">Browse Articles</h3>
      <p class="mt-1 text-sm text-blue-700">Explore our full knowledge base.</p>
    </a>
    <a href="/articles/getting-started" class="block p-6 rounded-xl bg-green-50 hover:bg-green-100 transition">
      <h3 class="text-lg font-semibold text-green-900">Getting Started</h3>
      <p class="mt-1 text-sm text-green-700">New here? Start with the basics.</p>
    </a>
  </div>
</div>

Publishing Your Changes

After clicking Apply in the editor, your changes are staged but not yet live. To publish:

1. Close the editor modal
2. Click Save on the Connection Settings panel
3. Your custom home page is now live on your help center

To revert to the default home page, simply toggle the Custom home page switch off and save.