Skip to content

Customise branding for a white-label deployment

Goal: rebrand the player-facing site (ebit-fe aka dropbet) for a customer deployment — logo, colour palette, copy, email templates, domain. Audience: customer engineering team (front-end + ops) shipping a white-label. Time: 0.5–2 days code, plus translation/copy turnaround on the customer side. Friction: low for visuals; medium for copy review and SendGrid template provisioning.

What you'll change

Layer Path Action
Logos / favicon / static assets ebit-fe/public/ Replace files.
Brand colour tokens ebit-fe/src/styles/globals.css, ebit-fe/src/styles/mixins.scss, ebit-fe/src/styles/modules/ Edit CSS variables / Tailwind theme.
Custom fonts ebit-fe/src/styles/fonts.css Add @font-face declarations.
Player-facing copy ebit-fe/messages/{en,de}.json (i18n via next-intl) Edit string values.
Email templates SendGrid (template ids in Doppler SENDGRID_*_TEMPLATE_ID) Update template body in SendGrid UI.
Domain / canonical URLs ebit-fe/next.config.js, environment Set the production hostname.
Admin panel branding ebit-admin-fe/ Out of scope for player-facing white-label.

Canonical references

  • ebit-fe/public/ — current static asset layout (animations/, assets/, favicon.ico, sounds/).
  • ebit-fe/src/styles/globals.css — root CSS variables for colour, spacing, typography.
  • ebit-fe/messages/en.json and messages/de.json — every UI string. Adding/changing copy is a JSON edit.
  • Doppler keys (per .example.env): SENDGRID_VERIFY_EMAIL_TEMPLATE_ID, SENDGRID_WELCOME_EMAIL_TEMPLATE_ID, SENDGRID_RESET_PASSWORD_EMAIL_TEMPLATE_ID, SENDGRID_DEPOSIT_SUCCESSFUL_EMAIL_TEMPLATE_ID, SENDGRID_FROM_EMAIL.

Steps

1. Customer asset checklist [non-engineering]

Collect from the customer before writing code:

  • [ ] Brand name + legal entity (for the footer, ToS/PP, email "From" header).
  • [ ] Logo set: full-colour, monochrome (light + dark), favicon (16/32/180/512), social-card (1200×630).
  • [ ] Brand colour palette (primary, secondary, accent, surface, semantic — success/warning/error). Include tokens, not just hex.
  • [ ] Typography: headline, body, monospace. Customer-licensed font files OR Google Fonts handles.
  • [ ] Domain + subdomain plan. Confirm certificate ownership / Cloudflare zone / DNS controller.
  • [ ] Email "From" address + reply-to. Confirm SPF / DKIM / DMARC for that domain.
  • [ ] Copy review responsibility: who signs off on player-visible strings?
  • [ ] Privacy policy + ToS URLs (often customer-hosted; the FE just links).

2. Replace static assets

cd ebit-fe
# Backup existing assets if you need to revert:
cp -r public public.bak
# Drop the customer's logo set into public/, replacing the existing files.
# Keep the file names so existing imports continue to resolve.

The favicon is referenced from app/[locale]/layout.tsx head metadata (and the static public/favicon.ico). Replace both forms.

3. Update colour tokens

Open ebit-fe/src/styles/globals.css and locate the CSS-variable root block. Adjust the tokens — keep semantic names (--color-primary, --color-surface), don't introduce per-customer literals.

If the customer wants a Tailwind palette extension instead, add it to ebit-fe/tailwind.config.ts under theme.extend.colors. Both routes co-exist; pick one and stay consistent.

4. Add custom fonts

Edit ebit-fe/src/styles/fonts.css:

@font-face {
  font-family: "CustomerHeadline";
  font-display: swap;
  src: url("/fonts/customer-headline.woff2") format("woff2");
}

Drop the WOFF2 files into ebit-fe/public/fonts/. Reference from Tailwind:

// tailwind.config.ts
fontFamily: {
  display: ['"CustomerHeadline"', 'system-ui', 'sans-serif'],
}

5. Edit player-facing copy

Open ebit-fe/messages/en.json. The structure is namespaced by feature — games.*, account.*, wallet.*, etc.

{
  "common": {
    "brand": "DropBet",   // <-- change to customer brand
    "tagline": "..."
  },
  …
}

Mirror every change into messages/de.json. If the customer ships a third language, follow add-locale.md before editing copy.

The common.brand key is referenced from many components — grep useTranslations('common').brand to confirm coverage.

6. Update email templates via SendGrid [non-engineering — needs SendGrid access]

The template ids are pinned in Doppler (SENDGRID_*_TEMPLATE_ID). The content lives in SendGrid's UI.

Steps for each template:

  1. Sign in to SendGrid → Email API → Dynamic Templates.
  2. Find the template id (e.g. d-7db4ff41012b428bb9548d1c77797a77 for verify-email per .example.env).
  3. Either edit the existing template (overwrites for all environments using that id) or create a new template, then update the Doppler value for the customer's environment.
  4. Verify variables: the backend passes {{brandName}}, {{ctaUrl}}, {{firstName}}, etc. — keep the variable names.

Recommended: create a customer-specific template with a fresh id, set the Doppler value in the customer's environment only. This keeps staging and prod template content separable.

7. Domain / canonical URL

Set NEXT_PUBLIC_SITE_URL (or equivalent — verify in ebit-fe/next.config.js) to the customer's domain. Update OAuth callback URLs in Doppler (GOOGLE_CALLBACK_URL, STEAM_*_RETURN_URL).

DNS / certificate / CDN setup is out of scope for this recipe — see docs/runbooks/ and docs/delivery/prerequisites.md.

8. SEO / social cards

Edit the metadata helpers under ebit-fe/src/app/[locale]/layout.tsx (and any per-page metadata exports). Replace the OG title, description, and image with customer-supplied versions.

9. Customer copy review checkpoint [non-engineering]

Before merging to staging:

  • [ ] Customer's marketing/legal team reads through every screen.
  • [ ] Specific attention: game disclaimer copy, withdrawal terms, KYC prompt copy, jurisdiction-specific compliance text.
  • [ ] Sign-off recorded in the change ticket.

10. Build + visual QA

cd ebit-fe
pnpm build && pnpm start

Visit every top-level route in the docs/api-reference/ sitemap: - /, /casino, /games/originals/<each>, /account, /promotions, /leaderboard, /legal/{tos,pp}, /faq, /affiliates, /sportsbook, /vip-program.

Take screenshots for the customer to sign off on.

Verification

  1. Visual: customer's brand is visible across every top-level route, no leftover dropbet logos.
  2. Email: trigger a verification email (sign-up flow); the email body matches the customer's template.
  3. Localised: switch the locale picker; copy renders in the customer's chosen languages.
  4. OG: paste the production URL into a social-card validator (Twitter, LinkedIn) — confirms the OG image and title render.
  5. OAuth: Google / Steam OAuth round-trip works against the new domain (callback URLs updated).

Notes

  • Branding the admin panel (ebit-admin-fe/) is a separate task. By default the admin panel is internal-only and stays generic.
  • If the customer wants their own admin theme: open ebit-admin-fe/, repeat steps 2–5 (logos, colour tokens, fonts) — the admin uses NextUI + Ant Design, the same tokens apply.
  • x-captcha-token: pass bypass is local-only (per docs/api-reference/index.md) — don't rely on it for the customer's prod sign-up flow.