Personalize onboarding from a work email

Use case prompt

Build a signup step that personalizes onboarding from a work email, following https://www.logo.dev/docs/use-cases/onboarding-personalization.md

Read that page and inspect this project's stack. Use this project's existing conventions.

Take the domain after the @ when the user leaves the email field, never from a partial email. Skip free email providers and show empty fields for them. For a work domain, show the company logo from the domain. Look the brand up on the server, and prefill the company name and an accent color. While the brand is still indexing, retry until the retry window ends. Rate limit the lookup route, because anyone can reach a signup page. If there is no brand or the lookup fails, leave the fields empty and do not block signup. Never overwrite a value the user typed. Store the brand id with the workspace.

For API details, read https://www.logo.dev/docs/logo-images/introduction.md and https://www.logo.dev/docs/brand/introduction.md

A new user types a work email, and the form fills in their company name, logo, and brand color. Fewer fields to type means more teams finish setup, and the workspace looks like theirs from the first screen. Logo.dev supplies the logo from the email domain, and the name and colors from the Brand endpoint. Your app decides which domains to skip, what to show while a new brand indexes, and which values the user can change.

Choose what to look up from the email

Show the logo at once. Build a Logo.dev CDN URL from the domain after the @. It needs no server call.
Prefill the rest on the server. Send the domain to Brand. It returns the brand’s name, colors, and a stable id.
Skip free email providers. A personal address says nothing about the company. Keep a short list of these domains.

This server route looks up one domain and returns a small result for the signup form:

api/company-profile.ts

type Color = { hex: string; oklch: { l: number; c: number; h: number } };

type Brand = {
  id: string;
  name: string;
  domain: string | null;
  colors: Color[];
};

type CompanyProfile =
  | { status: "ready"; id: string; name: string; accent: string | null }
  | { status: "indexing"; retryAfter: number; expiresIn: number }
  | { status: "not_found" }
  | { status: "error" };

// Anyone can reach a signup page, and each lookup spends API credits.
// Put this route behind your app's own rate limiting.
export async function GET(request: Request) {
  const domain = new URL(request.url).searchParams.get("domain")?.trim();
  if (!domain) {
    return Response.json({ status: "not_found" } satisfies CompanyProfile);
  }

  const url = new URL("https://api.logo.dev/v2/brands");
  url.searchParams.set("domain", domain);

  let res: Response;
  try {
    res = await fetch(url, {
      headers: { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` },
      // Logo.dev can prepare a new brand's assets during the request.
      signal: AbortSignal.timeout(15_000),
    });
  } catch {
    return Response.json({ status: "error" } satisfies CompanyProfile);
  }

  // Status codes: https://www.logo.dev/docs/brand/introduction#handle-each-status
  if (res.status === 202) {
    // Retry timing and the retry window:
    // https://www.logo.dev/docs/platform/errors#not-found-vs-still-indexing-202
    const body = await res.json().catch(() => null);
    const pending = body?.metadata?.pending;
    const retryAfter = Number(res.headers.get("Retry-After")) || pending?.retry_after_seconds || 30;
    const expiresIn = Number(pending?.expires_in_seconds) || 0;
    return Response.json({ status: "indexing", retryAfter, expiresIn } satisfies CompanyProfile);
  }
  if (res.status === 404) {
    return Response.json({ status: "not_found" } satisfies CompanyProfile);
  }
  if (!res.ok) {
    return Response.json({ status: "error" } satisfies CompanyProfile);
  }

  const { data }: { data: Brand } = await res.json();
  // Palettes often start with black or white. Use the first color with enough
  // chroma to work as an accent. Tune 0.08 to your design; neutrals are close to 0.
  const accent = data.colors.find((color) => color.oklch.c >= 0.08);
  return Response.json({
    status: "ready",
    id: data.id,
    name: data.name,
    accent: accent?.hex ?? null,
  } satisfies CompanyProfile);
}

Handle every lookup result

Result	Save	Show
Brand ready	The brand `id`, the domain, and the name the user confirms	The logo, the prefilled name, and the accent color
Still indexing	Nothing yet	The logo and an empty name field. Retry until the retry window ends.
No brand, or the request failed	The domain	The logo and an empty name field. Don’t block signup.
Free email provider	Nothing	A neutral placeholder and empty fields
User edits a field	The user’s value	The user’s value. A later lookup never replaces it.

Key the workspace on the brand id, not on the domain. A brand keeps its id when its domain changes. The form shows the logo from the CDN, not from the Brand response, because response image URLs expire:

import { useEffect, useState } from "react";

// The shape that api/company-profile.ts returns.
type CompanyProfile =
  | { status: "ready"; id: string; name: string; accent: string | null }
  | { status: "indexing"; retryAfter: number; expiresIn: number }
  | { status: "not_found" }
  | { status: "error" };

const FREE_EMAIL = new Set(["gmail.com", "outlook.com", "hotmail.com", "yahoo.com", "icloud.com", "proton.me"]);

function domainFromEmail(email: string) {
  const domain = email.split("@")[1]?.trim().toLowerCase() ?? "";
  if (!domain.includes(".") || FREE_EMAIL.has(domain)) {
    return null;
  }
  return domain;
}

export function OnboardingAutofill({ token }: { token: string }) {
  const [email, setEmail] = useState("");
  // The email the user finished typing. A partial email such as you@acme.co
  // would look up the wrong company and spend a lookup.
  const [committedEmail, setCommittedEmail] = useState("");
  const [name, setName] = useState("");
  const [nameEdited, setNameEdited] = useState(false);
  const [profile, setProfile] = useState<CompanyProfile | null>(null);
  const domain = domainFromEmail(committedEmail);
  // Pressing Enter submits without a blur, so submit what the field says now.
  const currentDomain = domainFromEmail(email);

  useEffect(() => {
    setProfile(null);
    if (!domain) {
      return;
    }
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout> | undefined;
    let deadline = 0;

    const lookup = async () => {
      let next: CompanyProfile;
      try {
        const res = await fetch(`/api/company-profile?domain=${encodeURIComponent(domain)}`);
        next = (await res.json()) as CompanyProfile;
      } catch {
        next = { status: "error" };
      }
      if (cancelled) {
        return;
      }
      setProfile(next);
      // Retry a 202 until the brand is ready or the retry window ends.
      if (next.status === "indexing") {
        deadline ||= Date.now() + next.expiresIn * 1000;
        if (Date.now() + next.retryAfter * 1000 < deadline) {
          timer = setTimeout(lookup, next.retryAfter * 1000);
        } else {
          // The window ended. Stop showing the lookup and leave the field empty.
          setProfile({ status: "error" });
        }
      }
    };
    lookup();
    return () => {
      cancelled = true;
      clearTimeout(timer);
    };
  }, [domain]);

  const ready = profile?.status === "ready" ? profile : null;
  useEffect(() => {
    // Only touch a name this form filled in. Without a ready profile for the
    // current domain, clear it so the previous company's name never submits.
    if (!nameEdited) {
      setName(ready ? ready.name : "");
    }
  }, [ready, nameEdited]);

  return (
    <form className="grid max-w-md gap-4">
      <label className="grid gap-2 text-sm font-medium">
        Work email
        <input
          className="rounded-xl border border-zinc-950/10 px-4 py-3 text-base dark:border-white/20 dark:bg-zinc-900"
          onBlur={() => setCommittedEmail(email)}
          onChange={(e) => {
            setEmail(e.target.value);
            // A filled-in name belongs to the old domain once the email changes.
            if (!nameEdited && domainFromEmail(e.target.value) !== domain) {
              setName("");
            }
          }}
          placeholder="you@company.com"
          type="email"
          value={email}
        />
      </label>
      <div className="flex items-center gap-3">
        {domain ? (
          <img
            alt=""
            className="h-10 w-10 rounded-lg object-contain"
            height={40}
            key={domain}
            src={`https://img.logo.dev/${domain}?token=${token}&size=40&retina=true&format=webp`}
            style={{ outline: ready?.accent ? `2px solid ${ready.accent}` : undefined }}
            width={40}
          />
        ) : (
          <div aria-hidden className="h-10 w-10 rounded-lg bg-zinc-200 dark:bg-zinc-700" />
        )}
        <label className="grid flex-1 gap-2 text-sm font-medium">
          Company name
          <input
            className="rounded-xl border border-zinc-950/10 px-4 py-3 text-base dark:border-white/20 dark:bg-zinc-900"
            onChange={(e) => {
              setName(e.target.value);
              setNameEdited(true);
            }}
            placeholder={profile?.status === "indexing" ? "Looking up your company…" : "Company name"}
            type="text"
            value={name}
          />
        </label>
      </div>
      <input name="brand_id" type="hidden" value={ready && currentDomain === domain ? ready.id : ""} />
      <input name="domain" type="hidden" value={currentDomain ?? ""} />
    </form>
  );
}

import { OnboardingAutofill } from "./OnboardingAutofill";

export function SignupStep() {
  return <OnboardingAutofill token="LOGO_DEV_PUBLISHABLE_KEY" />;
}

Try a work email at a well-known company, a gmail.com address, and a domain with no brand. Type an email slowly, and check that no lookup starts before you leave the field. Then try a small company’s domain that Logo.dev has not indexed yet, and check that the name fills in after the retry. Type a company name before a lookup finishes, and check that the lookup does not replace it.

Brand

Get the full brand profile: name, colors, logo, and brandmark.

Company autocomplete

Let users pick their company by name when the email is personal.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Personalize onboarding from a work email

Choose what to look up from the email

Handle every lookup result

Brand

Company autocomplete

​Choose what to look up from the email

​Handle every lookup result

​Render the signup step

​Test the signup step

Brand

Company autocomplete

Choose what to look up from the email

Handle every lookup result

Render the signup step

Test the signup step