Skip to content
All docs Self-hosting

White-labelling Wazzly

Make it yours

You own this copy of Wazzly. Pay once, run it forever — and put your own name on it. White-labelling is just editing assets and a handful of design tokens. No build voodoo, no per-seat checks phoning home.

A full rebrand takes about fifteen minutes:

  1. Replace the logo and favicon assets.
  2. Set your brand colors via the design tokens.
  3. Change the product name and domain.
  4. Remove the leftover Wazzly branding.

Heads up: white-label rights require the Self-hosted or Agency license. The starter license runs Wazzly as-is, with our branding intact. If you bought Self-hosted or Agency, you’re cleared to ship it under your own name.

1. Replace the logo and favicon

All brand assets live in one folder so you never have to hunt:

/public/brand/
  logo.svg          # full wordmark — top nav, login, emails
  logo-mark.svg     # square icon — collapsed sidebar, avatars
  favicon.svg       # browser tab
  favicon-32.png    # fallback for older browsers
  apple-touch.png   # 180×180 home-screen icon
  og-image.png      # 1200×630 social share card

Drop your files in with the same names and you’re done — nothing else references them. A few notes that save headaches later:

  • Keep logo.svg on a transparent background. It renders on both light and dark surfaces.
  • Make the mark legible at 24px. The sidebar squeezes it small.
  • SVG favicons stay crisp on every screen; keep the PNG fallbacks for old browsers.

2. Set your brand colors

Wazzly’s whole look is driven by CSS custom properties — design tokens. You never edit hex values scattered through the app. You set the tokens once, and every button, badge, and chart follows.

Open /public/brand/theme.css and override the tokens you care about:

:root {
  /* Primary action — buttons, links, active states */
  --green-500: #2bb673;
  --green-600: #1f9e61;
  --green-700: #157a4a;

  /* Brand surfaces — sidebar, login panel, branded fields */
  --green-800: #0f5c38;

  /* Accent — highlights, "new" pills, focus glows */
  --lime-400: #b9f227;

  /* Optional: warm the neutrals toward your palette */
  --gray-50:  #f7f8f7;
  --text-strong: #0d1b13;
}

Stick to the existing token names — the full scale is --green-50 through --green-800, the lime accent --lime-100/300/400/500, the gray ramp --gray-0 through --gray-900, plus the text and border tokens. Override a token and every component that reads it updates at once.

Pick your primary, let the rest follow. Start with --green-500 (your main action color). Set --green-600 and --green-700 a few shades darker for hover and pressed states, and --green-800 for large branded panels. Leave the semantic tokens — --danger, --warning, --success, --info — alone unless you have a strong reason; people expect red to mean trouble.

Tip: run your primary color through a contrast checker against white text. Action buttons use white labels, so you want at least a 4.5:1 ratio for readable, accessible buttons.

3. Set your product name and domain

Names and URLs live in one config file, separate from the design tokens. Edit /config/brand.json:

{
  "productName": "Replyly",
  "company": "Acme Messaging Co.",
  "domain": "app.replyly.com",
  "supportEmail": "help@replyly.com",
  "tagline": "Pay once. Reply forever.",
  "footerNote": "© 2026 Acme Messaging Co. All rights reserved."
}

These values feed the browser title bar, transactional emails, the login screen, and the footer. After saving, set the public URL in your environment so links and webhooks resolve correctly:

# .env
PUBLIC_APP_URL=https://app.replyly.com
PUBLIC_PRODUCT_NAME=Replyly

Restart the app to pick up the new environment values.

4. Remove the leftover Wazzly branding

Once your assets and config are in, sweep up the last traces:

  • Email templates — /config/email/ holds the header and footer partials. Swap the logo src and the sign-off line.
  • Login & onboarding copy — /config/brand.json covers the headings; check /config/copy/onboarding.json for any welcome text that still says “Wazzly.”
  • PWA manifest — /public/manifest.json sets the installed-app name and icon. Update name, short_name, and the icon paths.
  • Meta tags — confirm og-image.png and the <title> reflect your brand. They drive how shared links look.

Then do a final grep to catch anything hardcoded:

grep -ri "wazzly" ./config ./public --exclude-dir=node_modules

A clean result means your install is fully yours. No “powered by,” no hidden watermark — the Self-hosted and Agency licenses remove the attribution requirement entirely.

You’re done

Ship it. Your customers see your name, your colors, your domain — and you paid once to get here. That’s the whole promise: own the source, make it yours, reply forever.

Need to push branding across many client installs at once? See the Agency license docs for a shared theme overlay you can reuse across deployments.