Branding and portal

Customize your portal's identity, theme, welcome card, and navigation, with a live preview.

DU
Demo User
Written By Demo UserLast updated 2 months ago

Make your feedback portal feel like part of your product. Add your logo, colors, and fonts, greet visitors with a welcome card, and control which tabs show up in the portal's top navigation, all from one page with a live preview.

Overview

Access branding settings from Admin → Settings → Branding. The page has two panes: controls on the left, a live preview of your real portal on the right. Nothing goes live until you click Save; a save bar appears at the bottom whenever you have unsaved changes.

Note:
Portal settings used to live on a separate Admin → Settings → Portal page. That page now redirects here, everything visitors see (identity, theme, welcome card, navigation) lives on this one page.

Identity

  1. Go to Admin → Settings → Branding
  2. Click on the logo placeholder or existing logo
  3. Select an image file
  4. Crop the image as needed
  5. The logo is uploaded automatically

Note:
Requirements:

  • Formats: JPEG, PNG, GIF, WebP
  • Maximum size: 5MB

Click Remove below the logo. The logo is removed and the workspace initial is shown instead.

Note:
Your logo also appears in all emails Quackback sends: welcome messages, team invitations, and status change notifications. It works across Gmail, Outlook, and Apple Mail without extra configuration.

Workspace Name

The portal header shows your workspace name next to the logo. Edit the name under Admin → Settings → General; it appears here as read-only for reference.

Theme

Theme mode

Control how light/dark mode works for portal visitors:

  • User choice (allow toggle) - Visitors can switch between light and dark mode
  • Light only - Portal always displays in light mode
  • Dark only - Portal always displays in dark mode

Preset

Pick a preset color palette by clicking its swatch. Each preset sets a coordinated primary color, background, and accent colors in one click.

Font

Choose a font family from the dropdown. Fonts are organized by category:

  • Sans Serif - Clean, modern fonts like Inter, Roboto, Open Sans, DM Sans, Geist, and more
  • Serif - Traditional fonts like Playfair Display, Merriweather, Lora
  • Monospace - Technical fonts like Fira Code, JetBrains Mono
  • System - Uses the visitor's system font (System UI)

Corner Roundness

Adjust the roundness of buttons and cards using the slider, from sharp square corners to fully rounded. A preview of the corner radius is shown next to the slider.

Advanced CSS

For full control, expand Advanced CSS and write custom CSS with :root {} and .dark {} blocks using CSS custom properties.

Tip:
Design your theme visually at tweakcn.com and paste the generated CSS into the Advanced CSS editor.

The Navigation card controls the portal's top tabs. It applies everywhere the portal header shows, including the help center and status pages.

  • Drag to reorder - Grab the handle on the left of a row and drop it in a new position
  • Toggle visibility - Use the switch on the right to show or hide a tab
  • Rename - Type in the label field to override the default; leave it blank to keep the translated default
  • Add a custom link - Click Add link, then set a label and a full https:// URL

Six built-in tabs are available: Feedback, Roadmap, Changelog, Help Center, Support, and Status.

Note:
A built-in tab whose product is currently disabled (for example, Help Center when the helpCenter flag is off) still shows in the editor, but renders inert with a "Product off" badge. It appears on the portal automatically once you enable the product, keeping the order and label you set.

Tip:
Renamed tabs show your custom text in every language. Tabs you leave untouched stay translated for each visitor's locale.

Click Reset to defaults to discard your customizations and return to the standard tab order.

Welcome card

The welcome card renders above the post list on the public portal home. The rest of the page (filters, board picker, post list) stays unchanged.

  1. Go to Admin → Settings → Branding
  2. Edit the Title and Message in the Welcome card section
  3. Use the live preview to see what visitors will see
  4. Toggle Enable welcome card on when you're ready
  5. Click Save

The card only renders on the portal home when the toggle is on, so you can draft the next announcement and flip the switch when it's ready to go live.

Message editor

The message body uses the same rich text editor as posts and comments. You can:

  • Format with headings, bold, italic, lists, links, and inline code
  • Drop in fenced code blocks for snippets
  • Embed images uploaded through the editor (auto-rehosted to workspace storage)
  • Insert emoji via the picker or shortcode

Title length

Titles are capped at 120 characters. The editor enforces the limit as you type.

Common uses

  • Frame what kind of feedback you want. "We're looking for feature ideas. Please raise bugs through support."
  • Surface the roadmap. Link to your roadmap so visitors see what's already planned.
  • Point at help docs. Link to your help center so visitors can self-serve answers before filing a new request.
  • Announce a moderation policy. Set expectations for tone, duplicates, and response time.

Tip:
Keep the welcome card short. Visitors are here to file or vote on feedback; the card is an orienting note, not a landing page.

Live preview

The right side of the branding page shows the real portal, rendered as visitors see it, updating as you edit. Use the controls above the preview to:

  • Toggle Light / Dark to check both theme modes
  • Toggle Desktop / Mobile to check both viewports
  • Click Open portal to view the live, saved version in a new tab

Save changes

Click Save in the save bar at the bottom of the page to apply theme, navigation, and welcome card changes together. Identity changes (logo) save immediately on upload.

Best Practices

Consistent Branding

Tip:
Match your existing brand guidelines:

  • Use your official brand colors
  • Use the same fonts as your main website
  • Upload your standard logo

Accessibility

Warning:
Ensure good color contrast:

  • Test text readability on colored backgrounds
  • Verify the logo is visible on both light and dark themes
  • Check button text visibility

Mobile Experience

Preview on the mobile viewport:

  • Ensure the logo scales properly
  • Verify touch targets are large enough
  • Test dark mode on mobile

Minimalism

Less is often more:

  • A clean, simple design builds trust
  • Avoid overly bright or clashing colors
  • Let content be the focus

Next Steps

Was this helpful?

Your feedback shapes what we write next.

Next →

Build a public roadmap

Related articles

Launch your portalIntroduce your feedback portal to users so they actually use it.Customize your portalPortal settings moved into Branding: identity, theme, welcome card, and navigation in one place.Manage portal usersSee who's giving feedback and spot your most engaged users.Core ConceptsUnderstand workspaces, boards, posts, statuses, and user roles.