Whitelabel Landing Pages by Domain: The Complete Blueprint

The Whitelabel Goal

You want a single website platform that can be branded and deployed per customer on their own subdomain or custom domain. Each tenant controls copy, colors, logo, and calls-to-action, while your team controls the template and infrastructure.

System Checklist

1) Create a Landing That Adapts to the Domain

The landing page should take a configuration payload and render brand, content, and CTA variations based on the request host. Store it as structured JSON so you can validate and version updates.

{
  "domain": "acme.example.com",
  "brand": {
    "name": "Acme",
    "logoUrl": "https://cdn.example.com/acme/logo.svg",
    "primaryColor": "#4f46e5"
  },
  "hero": {
    "headline": "Ship campaigns faster with Acme",
    "subheadline": "A private analytics stack branded for your team.",
    "ctaLabel": "Book a demo",
    "ctaUrl": "https://acme.example.com/book"
  },
  "sections": ["benefits", "testimonials", "pricing"],
  "tracking": {
    "pixelId": "fb-123",
    "analyticsKey": "lnr-tenant-001"
  }
}

Use safe defaults for missing fields and keep a fallback landing for unknown domains (so you do not show a broken page).

Next.js example: resolve the tenant by domain

In the App Router you can read the host header and load the right configuration before rendering. This example uses a server component to fetch a tenant config by domain and then renders the landing.

// app/(landing)/page.tsx
import { headers } from "next/headers"
import { getTenantConfig } from "@/lib/tenants"
import Landing from "@/components/landing/Landing"

export default async function LandingPage() {
  const host = headers().get("host") ?? ""
  const config = await getTenantConfig(host)

  if (!config) {
    return <Landing variant="default" />
  }

  return <Landing variant="tenant" config={config} />
}

Next.js example: edge middleware routing

If you want to separate public marketing pages from tenant landings, use middleware to route traffic based on the host header and attach the tenant id as a header.

// middleware.ts
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { lookupTenantByHost } from "@/lib/tenants"

export async function middleware(req: NextRequest) {
  const host = req.headers.get("host") ?? ""
  const tenant = await lookupTenantByHost(host)

  if (!tenant) return NextResponse.next()

  const requestHeaders = new Headers(req.headers)
  requestHeaders.set("x-tenant-id", tenant.id)

  return NextResponse.next({ request: { headers: requestHeaders } })
}

2) Configure Domains and Certificates

Customers can use subdomains (easy) or full custom domains (needs verification). A common flow is: add domain, verify via DNS (TXT or CNAME), then issue TLS certificates automatically and attach them to your edge or load balancer.

3) Create an Admin Page for Landing Configuration

Give tenants an admin page that edits their brand + content while keeping the core layout locked. Use a live preview so marketing teams can iterate without shipping code.

• Brand settings: logo, primary color, typography, favicon.
• Hero content: headline, subheadline, CTA label + link.
• Sections: toggle testimonials, pricing, integrations, FAQ.
• Tracking: analytics keys, pixels, and consent options.

4) Request Resolution Diagram

This flow shows how a landing request is resolved, which configuration is selected, and how the final page is rendered.

function handleRequest(req) {
  const host = req.headers["host"]
  const tenant = lookupTenantByHost(host)

  if (!tenant) return renderDefaultLanding()

  const config = fetchLandingConfig(tenant.id)
  return renderLanding(config)
}

Prompt Set: Build a Whitelabel Service with Open-Source Tools

Use these prompts with your coding assistant to scaffold a basic whitelabel platform. Each prompt assumes a popular open-source stack and focuses on one subsystem at a time.

Operational Tips