Populate onboarding

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 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 to see everything the Brand API returns.

Preview
Code

OnboardingEmailStep.tsx

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>
  );
}

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.

Open in Cursor

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.

Preview
Code

EmployerProfile.tsx

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>
  );
}

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.

Open in Cursor

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.

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.

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;
}

Request the brand

Look the domain up with the Brand API. 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.

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, or see the Brand API reference.

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.

“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 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 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, 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 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

Brand API reference

The full record: name, logo, colors, description, and firmographics.

Brand Context API

Add positioning and tone of voice for AI-generated onboarding copy.

Get started

Create a free account and start building.

Use cases

Sales & ABM

Product & PLG

Finance

AI Workflows

Prefill brand for a faster onboarding

Welcome users with their brand

Implementation

Pricing

Measuring impact

Going further

Brand API reference

Brand Context API

Get started

​Prefill brand for a faster onboarding

​Welcome users with their brand

​Implementation

​Pricing

​Measuring impact

​Going further

Brand API reference

Brand Context API

Get started

Prefill brand for a faster onboarding

Welcome users with their brand

Implementation

Pricing

Measuring impact

Going further