1. Home
  2. Helpie
  3. Customisation
  4. Styling with the Designer

Styling with the Designer

Everything customers see from Helpie — the chat widget, the portal, the emails — should look like your business, not like a plugin. The Tracksies Designer is where that happens: one place for your logo, colours, and styling, shared across every Tracksies plugin you run.

Find it at Tracksies > Designer. It works whether Helpie is your only Tracksies plugin or one of several — standalone, Helpie provides the Designer page itself; alongside siblings like HQ or Trustie, they all share the same one, and a colour you set once applies everywhere.

Branding

The Branding tab holds the identity basics:

  • Logo — upload a primary logo (PNG or JPEG works best), set its maximum width and position. It appears in your helpdesk emails.
  • Business Info — business name, tagline, email, phone, and address, used in emails.
  • Frontend Typography — your theme’s fonts are detected automatically, so the chat widget and portal inherit whatever your site already uses. If auto-detection gets it wrong, override fields let you name the body and heading fonts directly.
  • Email Typography — a separate pair of font choices for emails, limited to web-safe fonts (Arial, Georgia, Verdana, and friends). Email clients are a rougher neighbourhood than browsers, and only web-safe fonts render reliably in all of them.

Colours

The Colours tab starts with your site-wide brand palette — primary, secondary, surface, text, and the rest. These flow into everything Helpie renders, and into any sibling Tracksies plugins too.

Below the shared palette, Helpie adds its own Chat Widget section with fine-grained colours for the floating bubble and chat panel:

  • Bubble disk — the filled circle behind the icon; defaults to your primary colour
  • Bubble icon — the icon itself; defaults to white
  • AI message background and AI message text — the assistant’s side of the conversation; default to your surface and text colours
  • Customer message background and Customer message text — the customer’s side; default to the bubble colour and white

Every field falls back to a sensible default drawn from your main palette — only override the ones you actually want to control. (The bubble’s shape and icon — disk style, custom icon image, header greeting — are functional settings and live with the chat configuration instead; see Chat Widget.)

Interface

The Interface tab sets the feel:

  • Border Radius — Square, Subtle, Medium, or Rounded. Corner rounding for the chat window, cards, and buttons.
  • Drop Shadows — None (flat look), Subtle (hover only), or Visible (always on). Applies to the chat window and floating bubble.
  • Animations — a toggle for hover animations and transitions.

Emails

The Emails tab shapes your helpdesk emails — the confirmations, agent replies, and notices described in Helpdesk Emails:

  • Show Header with a choice of style: Standard (coloured background), Banner (logo + tagline), or Minimal (white background)
  • Show Footer with Standard (business name + address), Minimal (text only), or Detailed (full business info)
  • Footer Text — your own custom text at the bottom of every helpdesk email (HTML allowed)
  • Social Links — toggle them on and fill in your Facebook, Instagram, X, LinkedIn, TikTok, and YouTube URLs

Header and footer colours are set back on the Colours tab, under Email Colours; the logo comes from Branding. Each tab owns one job.

The Preview Pane

As you adjust settings, the preview pane on the right shows a live mock-up — including a Chat Window preview so you can see your bubble and message colours together before a single customer does. Save, and the styling applies everywhere at once.

Common Questions

Why does the chat widget’s font not match my dropdown choice?
The chat widget follows your theme’s fonts (via the auto-detection on the Branding tab), not the email font dropdowns — those two lists serve different destinations. If the widget font looks wrong, set the Frontend Typography override.

I run several Tracksies plugins — do I style each one?
No, and that’s the point. The brand palette, logo, and interface styles are shared. Set them once in the Designer and Helpie, HQ, Trustie, and the rest all follow.

Do I need another Tracksies plugin for the Designer to work?
No. Helpie carries the full Designer on its own — standalone installs get the same page, minus preview types that belong to plugins you don’t have.

How can we help?