Skip to content
HelSup Help Center
Help Center/Administration & troubleshooting
Administration & troubleshooting

Customize the agent workspace appearance

Choose a workspace appearance and adjust the supported branding, colors and reading density.

2 min read · HelSup product documentation
On this page
  1. Overview
  2. When to use this
  3. Where to find the controls
  4. Who can make these changes
  5. Before you begin
  6. Follow these steps
  7. Settings reference
  8. Example workflow
  9. Good practices
  10. Important considerations
  11. If something does not work

Overview

Appearance is Settings → System → Appearance at #/settings/system/appearance. It controls presets (Elegant Default), brand kit, design tokens, dark mode, density, and custom CSS. The admin SPA sets data-es-theme and data-es-preset on the document. Live Chat uses the same tokens so dark mode is not a second theme engine. You can change colors here — that is the supported way.

When to use this

Tokens keep Inbox, settings, and the widget aligned when a visitor uses dark mode or you switch presets. Hardcoded hex in custom CSS fights the token system.

Where to find the controls

#/settings/system/appearance. Onboarding mentions Elegant Default. User preference appearance (system/dark/light) can follow bootstrap.preferences.

Who can make these changes

manage_settings. Individual agents may still have a personal appearance preference if the preferences API exposes it.

Before you begin

Pick a preset, set brand colors via tokens, choose appearance light/dark/system, density comfortable/compact, optional custom CSS. Live Chat inherits tokens — do not fork widget colors unless you must.

Follow these steps

  1. Open Appearance.
  2. Keep Elegant Default or pick another shipped preset.
  3. Adjust tokens.
  4. Toggle dark and reload Inbox + the chat widget.
  5. Add CSS only for leftovers.
  6. Save.

Settings reference

Preset, brand kit, tokens (background, text, accent), appearance mode, density, custom CSS. data-es-theme=dark|light, data-es-preset, data-es-density.

Example workflow

Marketing sets accent to brand teal. Inbox buttons, settings primary, and the chat header all shift. Dark mode inverts surfaces via tokens, not a separate “night CSS file”.

Good practices

System mode follows prefers-color-scheme. After a plugin update, hard-refresh so CSS tokens reload.

Important considerations

Custom CSS can hide the filter popover (overflow/z-index) and make Filters look “broken”. Test Inbox filters after CSS changes.

If something does not work

Dark mode not applying: appearance not saved, cache, or a theme CSS override. Widget still light: tokens not passed into chat.css. Contact support if data-es-theme is dark but Inbox stays light after a hard-refresh.

Continue learning

Choose the right HelSup product→Set up website chat→General settings→

Let’s solve it together.

Can’t find what you need? Our support team can help with your next step.

Contact support ↗
LIFETIME PARTNER POLICY

One introduction.
A lifetime of shared growth.

Introduce HelSup to your customers, readers or community. Earn 30% on their first purchase and 20% on every subsequent purchase and renewal throughout their customer lifetime with HelSup.

Read our invitation to partners ↗
30%FIRST PURCHASE
20%Every subsequent
purchase & renewal

From recommendation to reward

  1. 01

    Get your personal link

    Sign in to your HelSup customer account and open Partner program to access your referral link.

  2. 02

    Recommend with confidence

    Share the link in a useful review, tutorial, customer proposal or with your community. Explain your partner relationship.

  3. 03

    Track your commission

    Follow attributed purchases and commission status in your partner dashboard. Eligible commissions are reviewed before payout.

YOUR LINK, IN PRACTICE

What does a referral link look like?

https://helsup.com/?ref=HS-EXAMPLE

Here, HS-EXAMPLE illustrates a partner code. Your dashboard gives you your own code and complete link. Copy that full link and share it with the customer; do not use this example as your personal link.

For example: “Looking for a customer support solution? Explore HelSup through my partner link: [paste your personal link here].” When an eligible customer purchases through your link, their first purchase earns 30%; later purchases and renewals earn 20%.

Open my partner dashboard →
YOUR CUSTOMER RELATIONSHIP KEEPS WORKING

A $100 first purchase earns $30.
A later $100 purchase or renewal earns $20.

Illustrative amounts, after discounts and excluding tax.

A customer relationship that lasts

30% first, 20% thereafter. Receive 30% on the customer’s first eligible paid purchase, then 20% on subsequent purchases and renewals throughout that customer’s lifetime on HelSup.

From link to lifetime attribution. The initial referral link is remembered for 30 days in the same browser. Once the referred customer’s first paid purchase is recorded, their partner relationship continues without needing another referral click.

Completed payments. Commission is calculated after discounts and before tax. Free orders and self-referrals do not qualify. Refunds reduce or reverse the associated commission.

Review and payout. Earnings appear as pending until reviewed by HelSup. Payout is processed manually after approval. Contact partner support for payment arrangements.