Skip to content
Help Center
Sign in

Brand your portal

Make the portal look like your site: logo, colors, fonts, cover image, links and custom CSS.

Last updated

Your portal can carry your logo, colors and fonts, and link back to your website. It all lives in one section, with a live preview beside the fields.

Open the branding settings#

  1. Open Portals and select your portal.
  2. Go to the Settings tab and find Branding.
  3. Change the fields below. The preview shows the result before you save.
  4. Select Save changes at the bottom of the page.

Each picture has Upload (Replace once one is set) and Remove. Drop or paste an image on the picture to upload it, or select Use a link to use a picture hosted elsewhere, such as https://cdn.example.com/logo.svg. Uploaded pictures keep the same link for good, so they never expire.

Logo, icon and colors#

FieldWhat it does
LogoYour logo, top left of every page and on share images
Browser tab iconA square image for the browser tab. help.ai's icon is used when it's empty.
Accent colorA hex color, such as #2f5bea, for buttons, links and focus rings. Pick it with the swatch or type it. Empty uses the default.
Color schemeMatch the visitor's device, Always light or Always dark
Cover imageA wide picture behind the home page heading and search, darkened so the text stays readable

Corners and fonts#

FieldWhat it does
Corner radiusThe roundness of cards and buttons, such as 4px or 0.75rem. The default is 0.75rem.
Text fontA font list for reading text that ends in a fallback, such as "Inter", system-ui, sans-serif
Heading fontA font list for titles. Georgia when it's empty.

A font shows only when the visitor's device has it, such as Georgia, Helvetica or Segoe UI, or when Custom CSS loads it with @import. Otherwise the next font in the list is used.

Add up to 8 Header links, such as back to your website, and up to 8 Footer links, such as terms, privacy or contact. Each link has a label of up to 40 characters and a full address, such as https://example.com/privacy.

Custom CSS#

Custom CSS is added to every portal page after the theme. Use it for what the fields above don't cover.

  • Up to 20,000 characters. The < character isn't allowed, because the field takes CSS only.
  • Change the theme with the variables --primary, --radius, --portal-font and --portal-heading-font.
  • Target a part of the page with [data-portal-region="header"], "hero", "main" or "footer".
  • Load a web font with @import, then name it in Text font or Heading font.
css
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
[data-portal-region="hero"] { background: var(--muted); }

Leave the field empty to keep the defaults.

Set the Accent color to your brand color first. Buttons, links and focus rings pick it up, which often does most of the work.

Was this helpful?

Still need help?

Ask the community