> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brandfetch.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Populate onboarding

> Boost conversion and activation by personalizing your users' onboarding from their email domain

export const EmployerProfileDemo = () => <div className="w-full max-w-[380px] rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f] overflow-hidden">
    <img noZoom src="https://cdn.brandfetch.io/domain/stripe.com/banner/w/760/fallback/transparent?c=1bfwsmEH20zzEfSNTed" alt="Stripe banner" className="w-full h-24 rounded-none z-[-1] object-cover bg-[#635BFF]" />
    <div className="px-5 pb-5">
      <div className="-mt-8 w-16 h-16 rounded-[20px] border-4 border-white dark:border-[#1c1d1f] box-border overflow-hidden">
        <img noZoom src="https://cdn.brandfetch.io/domain/stripe.com/type/icon/w/128/h/128/fallback/lettermark?c=1bfwsmEH20zzEfSNTed" alt="Stripe logo" className="w-full h-full rounded-2xl" />
      </div>
      <div className="mt-3 font-bold text-lg">Stripe</div>
      <div className="text-[13px] text-[#6b7280]">
        Financial infrastructure for the internet
      </div>
      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-[12px] text-[#6b7280]">
        <span>🌐 stripe.com</span>
        <span>👥 8,000 employees</span>
        <span>📍 San Francisco</span>
      </div>
      <button className="mt-4 w-full py-2 rounded-lg text-white text-sm font-medium" style={{
  background: "#635BFF"
}}>
        View 142 open roles
      </button>
    </div>
  </div>;

export const OnboardingPersonalizationDemo = () => {
  const brands = {
    "stripe.com": {
      name: "Stripe",
      color: "#635BFF",
      description: "Financial infrastructure platform for the internet.",
      founded: 2010,
      employees: "8,000+",
      industry: "Fintech",
      colors: ["#635BFF", "#0A2540", "#00D4FF"]
    },
    "dropbox.com": {
      name: "Dropbox",
      color: "#0061FF",
      description: "One place to keep life organized and keep work moving.",
      founded: 2007,
      employees: "2,600+",
      industry: "File storage",
      colors: ["#0061FF", "#1E1919", "#B4DC19"]
    },
    "shopify.com": {
      name: "Shopify",
      color: "#95BF47",
      description: "The commerce platform powering millions of businesses.",
      founded: 2006,
      employees: "12,000+",
      industry: "E-commerce",
      colors: ["#95BF47", "#002E25", "#FBF7ED"]
    },
    "linear.app": {
      name: "Linear",
      color: "#5E6AD2",
      description: "The purpose-built tool for planning and building products.",
      founded: 2019,
      employees: "60+",
      industry: "Dev tools",
      colors: ["#5E6AD2", "#222326", "#F4F5F8"]
    }
  };
  const [email, setEmail] = useState("sarah@stripe.com");
  const domain = email.includes("@") ? email.split("@")[1].trim().toLowerCase() : "";
  const brand = brands[domain];
  return <div className="w-full max-w-[340px]">
      <style>{`@keyframes bf-fade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }`}</style>
      <label className="text-[13px] font-medium text-[#6b7280]">Work email</label>
      <input readOnly className="mt-1 w-full box-border py-2 px-3 rounded-lg border border-[#63636333] text-sm outline-none bg-transparent text-inherit" value={email} placeholder="you@company.com" />
      {brand ? <div key={domain} className="mt-3 rounded-lg border border-[#63636326] bg-white dark:bg-[#1c1d1f] p-3.5 animate-[bf-fade-in_150ms_ease_both]">
          <div className="flex items-center gap-3">
            <img noZoom src={`https://cdn.brandfetch.io/domain/${domain}/w/80/h/80/fallback/lettermark?c=1bfwsmEH20zzEfSNTed`} alt={`${brand.name} logo`} className="w-10 h-10 rounded-lg shrink-0" />
            <div className="min-w-0">
              <div className="text-[12px] text-[#6b7280]">We found your company</div>
              <div className="font-semibold">{brand.name}</div>
            </div>
            <div className="ml-auto flex gap-1 self-start">
              {brand.colors.map(c => <span key={c} className="w-3.5 h-3.5 rounded-full border border-[#0000001a]" style={{
    background: c
  }} />)}
            </div>
          </div>
          <div className="mt-2.5 text-[13px] leading-snug text-[#6b7280] dark:text-[#9ca3af]">
            {brand.description}
          </div>
          <div className="mt-2.5 flex flex-wrap gap-1.5">
            {[brand.industry, `Founded ${brand.founded}`, `${brand.employees} employees`].map(t => <span key={t} className="py-0.5 px-2 rounded-full border border-[#63636326] text-[11px] text-[#6b7280] dark:text-[#9ca3af]">
                {t}
              </span>)}
          </div>
        </div> : <div className="mt-3 text-[13px] text-[#9ca3af]">Enter a work email to personalize your workspace.</div>}
      <button className="mt-3 w-full py-2 rounded-lg text-white text-sm font-medium transition-colors" style={{
    background: brand ? brand.color : "#9ca3af"
  }}>
        {brand ? `Continue to ${brand.name}` : "Continue"}
      </button>
    </div>;
};

export const Preview = ({children}) => <div className="relative rounded-xl border border-[#63636333] bg-[#6363630d] pt-12 px-8 pb-8 mt-4 mb-4 overflow-hidden">
    <style>{`
      .bf-preview-body img { margin: 0 !important; max-width: none; }
      .bf-preview-body ul, .bf-preview-body ol { margin: 0; padding: 0; }
      .bf-preview-body li { margin: 0 !important; padding-left: 0 !important; }
      .bf-preview-body li::before, .bf-preview-body li::marker { content: none !important; display: none !important; }
      .bf-preview-body p { margin: 0; }
    `}</style>
    <span className="absolute top-3.5 left-[18px] text-[11px] font-semibold tracking-[0.06em] uppercase text-[#636363b3]">
      Preview
    </span>
    <div className="bf-preview-body flex justify-center">{children}</div>
  </div>;

A new workspace shouldn't start empty. When someone signs up with their work email, you already know their company from the email domain. Instead of asking them to upload a logo, choose colors, or describe their business, you can populate the workspace automatically with a single [Brand API](/brand-api/overview) request.

The result is an onboarding experience that feels like home, and this increases conversion and activation.

## Prefill brand for a faster onboarding

As the user types a work email, extract the domain, look up the brand, and personalize the form. And it's more than a logo and a name: the same record carries the company's description, industry, size, founded year, and full color palette, enough to pre-fill a whole workspace profile. That's only a slice of the record, run any domain through the [Playground](https://brandfetch.com/developers/playground) to see everything the Brand API returns.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <OnboardingPersonalizationDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx OnboardingEmailStep.tsx theme={null}
    import { useState, type ChangeEvent } from "react";

    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    // In production this comes from the Brand API; hardcoded here for the demo.
    type Brand = {
      name: string; color: string; description: string;
      founded: number; employees: string; industry: string; colors: string[];
    };

    const BRANDS: Record<string, Brand> = {
      "stripe.com": { name: "Stripe", color: "#635BFF", description: "Financial infrastructure platform for the internet.", founded: 2010, employees: "8,000+", industry: "Fintech", colors: ["#635BFF", "#0A2540", "#00D4FF"] },
      "dropbox.com": { name: "Dropbox", color: "#0061FF", description: "One place to keep life organized and keep work moving.", founded: 2007, employees: "2,600+", industry: "File storage", colors: ["#0061FF", "#1E1919", "#B4DC19"] },
      "shopify.com": { name: "Shopify", color: "#95BF47", description: "The commerce platform powering millions of businesses.", founded: 2006, employees: "12,000+", industry: "E-commerce", colors: ["#95BF47", "#002E25", "#FBF7ED"] },
      "linear.app": { name: "Linear", color: "#5E6AD2", description: "The purpose-built tool for planning and building products.", founded: 2019, employees: "60+", industry: "Dev tools", colors: ["#5E6AD2", "#222326", "#F4F5F8"] },
    };

    export function OnboardingEmailStep() {
      const [email, setEmail] = useState("sarah@stripe.com");
      const domain = email.includes("@") ? email.split("@")[1].trim().toLowerCase() : "";
      const brand = BRANDS[domain];

      return (
        <div className="w-full max-w-[340px]">
          <style>{`@keyframes bf-fade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }`}</style>
          <label className="text-[13px] font-medium text-[#6b7280]">Work email</label>
          <input
            className="mt-1 box-border w-full rounded-lg border border-[#63636333] bg-transparent px-3 py-2 text-sm text-inherit outline-none"
            value={email}
            onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
            placeholder="you@company.com"
          />
          {brand ? (
            <div key={domain} className="mt-3 animate-[bf-fade-in_150ms_ease_both] rounded-lg border border-[#63636326] bg-white p-3.5 dark:bg-[#1c1d1f]">
              <div className="flex items-center gap-3">
                <img
                  src={`https://cdn.brandfetch.io/domain/${domain}/w/80/h/80/fallback/lettermark?c=${CLIENT_ID}`}
                  alt={`${brand.name} logo`}
                  className="h-10 w-10 shrink-0 rounded-lg"
                />
                <div className="min-w-0">
                  <div className="text-[12px] text-[#6b7280]">We found your company</div>
                  <div className="font-semibold">{brand.name}</div>
                </div>
                <div className="ml-auto flex gap-1 self-start">
                  {brand.colors.map((c) => (
                    <span key={c} className="h-3.5 w-3.5 rounded-full border border-[#0000001a]" style={{ background: c }} />
                  ))}
                </div>
              </div>
              <div className="mt-2.5 text-[13px] leading-snug text-[#6b7280] dark:text-[#9ca3af]">{brand.description}</div>
              <div className="mt-2.5 flex flex-wrap gap-1.5">
                {[brand.industry, `Founded ${brand.founded}`, `${brand.employees} employees`].map((t) => (
                  <span key={t} className="rounded-full border border-[#63636326] px-2 py-0.5 text-[11px] text-[#6b7280] dark:text-[#9ca3af]">{t}</span>
                ))}
              </div>
            </div>
          ) : (
            <div className="mt-3 text-[13px] text-[#9ca3af]">Enter a work email to personalize your workspace.</div>
          )}
          <button
            className="mt-3 w-full rounded-lg py-2 text-sm font-medium text-white transition-colors"
            style={{ background: brand ? brand.color : "#9ca3af" }}
          >
            {brand ? `Continue to ${brand.name}` : "Continue"}
          </button>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want signup to auto-detect the user's company and personalize itself? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a signup step with a work-email field that personalizes itself. When the user enters an email, take the part after the `@` as the domain, then look the company up and show a "We found your company" card with its logo, name, short description, quick-fact chips (industry, founded year, employee count), and a row of its brand-color swatches, and tint the primary button with the brand's accent color.

  Fetch the brand record from Brandfetch's Brand API (server-side, so the key stays secret; get one at `https://developers.brandfetch.com/register`):

  ```
  GET https://api.brandfetch.io/v2/brands/domain/{domain}
  Authorization: Bearer YOUR_API_KEY
  ```

  Use `brand.name` and `brand.description` for the card, `brand.company` for the facts (`industries`, `foundedYear`, `employees`, `location`), the `brand.colors` array for the swatches, and `brand.colors.find(c => c.type === "accent").hex` for the button. Render the logo with the Logo API (no key needed client-side): `https://cdn.brandfetch.io/domain/{domain}/w/40/h/40/fallback/lettermark?c=YOUR_CLIENT_ID`

  Skip free/personal email domains (gmail.com, outlook.com, etc.) so you only personalize for real company domains.

  Use the Logo API the intended way: hotlink the CDN URL directly in the image `src`, don't download, cache, or re-host the file. Requests are free with a client ID and always return the brand's current logo.
</Prompt>

## Welcome users with their brand

Careers sites and talent marketplaces need a polished profile header for every employer. Instead of asking each company to upload assets, generate the header from its domain, a banner cover image, the logo, tagline, and firmographics, all from Brandfetch.

A company header with the brand's own banner as the cover, the icon overlapping it, tagline, and quick facts, plus a call-to-action into open roles.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <EmployerProfileDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx EmployerProfile.tsx theme={null}
    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    const DOMAIN = "stripe.com";
    const ACCENT = "#635BFF"; // brand.colors accent in production

    export function EmployerProfile() {
      return (
        <div className="w-full max-w-[380px] overflow-hidden rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f]">
          <img
            src={`https://cdn.brandfetch.io/domain/${DOMAIN}/banner/w/760/fallback/transparent?c=${CLIENT_ID}`}
            alt="Stripe banner"
            className="h-24 w-full object-cover"
            style={{ background: ACCENT }}
          />
          <div className="px-5 pb-5">
            <div className="-mt-8 box-border h-16 w-16 overflow-hidden rounded-2xl border-4 border-white dark:border-[#1c1d1f]">
              <img
                src={`https://cdn.brandfetch.io/domain/${DOMAIN}/type/icon/w/128/h/128/fallback/lettermark?c=${CLIENT_ID}`}
                alt="Stripe logo"
                className="h-full w-full rounded-2xl"
              />
            </div>
            <div className="mt-3 text-lg font-bold">Stripe</div>
            <div className="text-[13px] text-[#6b7280]">Financial infrastructure for the internet</div>
            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-[12px] text-[#6b7280]">
              <span>🌐 stripe.com</span>
              <span>👥 8,000 employees</span>
              <span>📍 San Francisco</span>
            </div>
            <button className="mt-4 w-full rounded-lg py-2 text-sm font-medium text-white" style={{ background: ACCENT }}>
              View 142 open roles
            </button>
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want auto-generated employer profile headers for a careers site? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a company profile header for a careers or directory page. Show the brand's banner as a full-width cover image, the company icon overlapping its bottom edge with rounded corners and a thin border ring matching the card background (so it reads as a cutout), then the company name, tagline/description, and a row of quick facts (website, employee count, location), with a primary call-to-action button linking to open roles.

  Render the banner and icon straight from Brandfetch's Logo API (get a free client ID at `https://developers.brandfetch.com/register`):

  * Banner cover: `https://cdn.brandfetch.io/domain/{domain}/banner/w/760?c=YOUR_CLIENT_ID`
  * Icon: `https://cdn.brandfetch.io/domain/{domain}/type/icon/w/128/h/128/fallback/lettermark?c=YOUR_CLIENT_ID`

  For the tagline, firmographics, and an accent color for the button, fetch the full record from the Brand API (server-side, `GET https://api.brandfetch.io/v2/brands/domain/{domain}` with `Authorization: Bearer YOUR_API_KEY`) and read `brand.description`, `brand.company`, and `brand.colors.find(c => c.type === "accent").hex`.

  Use the Logo API the intended way: hotlink the CDN URL directly in the image `src`, don't download, cache, or re-host the file. Requests are free with a client ID and always return the brand's current logo.
</Prompt>

## Implementation

The whole flow is three steps: extract the domain, request the brand, populate the workspace, with a fallback when there's nothing to apply.

<Steps>
  <Step title="Extract the domain">
    Take what comes after the `@`, and filter out personal email providers so you only personalize for real company domains. Only the domain is sent to the API, the email address itself never leaves your system.

    ```ts theme={null}
    const FREE_PROVIDERS = new Set([
      "gmail.com", "outlook.com", "hotmail.com", "yahoo.com", "icloud.com", "proton.me",
    ]);

    function domainFromEmail(email: string): string | null {
      const domain = email.split("@")[1]?.trim().toLowerCase();
      if (!domain || FREE_PROVIDERS.has(domain)) return null; // → default onboarding
      return domain;
    }
    ```
  </Step>

  <Step title="Request the brand">
    Look the domain up with the [Brand API](/brand-api/overview). Keep this call on your server so the API key stays secret, and fire it as soon as the email field validates, the response is ready by the time onboarding begins. Since many users from the same company sign up over time, cache the response by domain.

    ```bash theme={null}
    curl "https://api.brandfetch.io/v2/brands/domain/stripe.com" \
      --header "Authorization: Bearer YOUR_API_KEY"
    ```

    The response carries the company's name, logos, colors, fonts, description, and firmographics. Explore the full record for any domain in the [Playground](https://brandfetch.com/developers/playground), or see the [Brand API reference](/reference/brand-api-domain).
  </Step>

  <Step title="Populate the workspace">
    In most cases that means the company name and logo, plus the accent color if your UI supports theming. If the domain can't be resolved or the user signed up with a personal email, fall back to your default onboarding flow, personalization is a layer on top, never a blocker.
  </Step>
</Steps>

> "We capture the domain from the user's email, hit the Brand API, cache the result, and we're done."
>
> **Haris Ali**, Head of Product, LottieFiles

If you're generating onboarding content with AI, you can also call the [Brand Context API](/brand-context-api/overview) to retrieve the company's positioning, tone of voice, products, and target audience.

## Pricing

This flow typically requires one Brand API request per signup, or two if [Brand Context](/brand-context-api/overview) is also used. Domain-level caching reduces usage further for larger teams.

Self-serve plans support up to 10,000 requests per month. Higher volumes are available through [enterprise plans](https://brandfetch.com/developers/enterprise), with SOC 2 and DPA documentation available during procurement.

## Measuring impact

The simplest experiment is an A/B test comparing a personalized first session with your existing onboarding.

[Typeform measured free-to-paid conversion](https://brandfetch.com/developers/customers/typeform) and reported a 5% improvement after introducing branded onboarding. You can also measure activation metrics such as workspace completion, first project created, or time to first value.

## Going further

<CardGroup cols={3}>
  <Card title="Brand API reference" icon="code" href="/reference/brand-api-domain">
    The full record: name, logo, colors, description, and firmographics.
  </Card>

  <Card title="Brand Context API" icon="sparkles" href="/brand-context-api/overview">
    Add positioning and tone of voice for AI-generated onboarding copy.
  </Card>

  <Card title="Get started" icon="rocket" href="https://developers.brandfetch.com/register">
    Create a free account and start building.
  </Card>
</CardGroup>