Add company logos to CRM records

Use case prompt

Add company logos to CRM records, following https://www.logo.dev/docs/use-cases/crm-logos.md

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

Show a small logo in each row of the account list and a larger one in the account record header. Take the domain from the account's website, then from a contact's work email, then from a Search endpoint match that a rep confirms. On the server, enrich each account once with the Logo.dev Brand endpoint to add a description and a brand color, and key that data by the brand id. Keep rep edits in separate fields, and show them before any enrichment.

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

Sales reps recognize a company’s logo faster than its name. A logo in each row of the account list and in each record header makes a CRM easy to scan. Your app decides where each domain comes from, what a record shows while enrichment is pending, and which values a rep can change.

Find the domain for each account

The logo needs only a domain, and most accounts already have one:

The account has a website. Store its bare hostname, such as stripe.com.
A contact has a work email. Use the part after @. Skip free email providers, such as gmail.com, because that domain is not the account’s company.
You have only the account name. Send it to Search from your server, and let the rep confirm a candidate. The company autocomplete shows this flow.

Render the list and the record header

Both views use the same Logo.dev CDN URL at a different size: 20px in list rows and 56px in the record header. An account with no logo shows the generated monogram:

const logoUrl = (domain: string, token: string, size: number) =>
  `https://img.logo.dev/${domain}?token=${token}&size=${size}&retina=true&format=webp`;

export function AccountRow({
  name,
  domain,
  token,
}: {
  name: string;
  domain: string;
  token: string;
}) {
  return (
    <div className="flex items-center gap-2.5 px-3 py-2.5">
      {/* Decorative: the account name is next to the logo. */}
      <img
        alt=""
        className="h-5 w-5 rounded object-contain"
        height={20}
        loading="lazy"
        src={logoUrl(domain, token, 20)}
        width={20}
      />
      <span className="text-sm font-medium">{name}</span>
    </div>
  );
}

export function AccountHeader({
  name,
  domain,
  token,
  description,
  accent,
}: {
  name: string;
  domain: string;
  token: string;
  description?: string | null;
  accent?: string | null;
}) {
  return (
    <div className="flex items-start gap-3">
      <img
        alt={`${name} logo`}
        className="h-14 w-14 rounded-xl object-contain"
        height={56}
        src={logoUrl(domain, token, 56)}
        width={56}
      />
      <div className="min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-base font-semibold">{name}</span>
          {accent ? (
            <span aria-hidden className="h-3 w-3 rounded-full" style={{ backgroundColor: accent }} />
          ) : null}
        </div>
        <div className="text-xs text-zinc-400">{domain}</div>
        {description ? <div className="mt-2 text-sm text-zinc-600">{description}</div> : null}
      </div>
    </div>
  );
}

import { AccountHeader, AccountRow } from "./AccountLogo";

export function Accounts() {
  return (
    <div>
      <AccountRow domain="stripe.com" name="Stripe" token="LOGO_DEV_PUBLISHABLE_KEY" />
      <AccountRow domain="figma.com" name="Figma" token="LOGO_DEV_PUBLISHABLE_KEY" />
      <AccountHeader
        accent="#533afd"
        domain="stripe.com"
        name="Stripe"
        token="LOGO_DEV_PUBLISHABLE_KEY"
      />
    </div>
  );
}

To show your own avatar for an account with no logo, use the component from logo from a domain.

Enrich the record on your server

The same domain gets the brand’s description and colors from Brand. Call it once when an account gets its domain, not on every page view:

api/enrich-account.ts

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

// GET /api/enrich-account?domain=stripe.com
export async function GET(request: Request) {
  const domain = new URL(request.url).searchParams.get("domain")?.trim();
  if (!domain) {
    return Response.json({ error: "domain is required" }, { status: 400 });
  }

  const res = await fetch(
    `https://api.logo.dev/v2/brands?domain=${encodeURIComponent(domain)}`,
    {
      // Secret key, server only: https://www.logo.dev/docs/platform/api-keys
      headers: { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` },
      signal: AbortSignal.timeout(20_000),
    }
  );

  if (res.status === 202) {
    // Still indexing: https://www.logo.dev/docs/platform/errors#not-found-vs-still-indexing-202
    const retryAfter = Number(res.headers.get("Retry-After") ?? 30);
    return Response.json({ status: "pending", retryAfter }, { status: 202 });
  }
  if (res.status === 404) {
    return Response.json({ status: "not_found" });
  }
  if (!res.ok) {
    // Any other 4xx or 5xx: an integration problem, not an empty record.
    // Status codes: https://www.logo.dev/docs/platform/errors#logo-api-status-codes
    return Response.json({ status: "error" }, { status: res.status });
  }

  const { data }: { data: Brand } = await res.json();
  return Response.json({
    status: "ready",
    brandId: data.id, // Key the enrichment on this id. It survives domain changes.
    name: data.name,
    description: data.description,
    colors: data.colors.map((color) => color.hex),
  });
}

Save the result with the account, and render the record from it:

Result	Save	Show
`ready`	Brand id, description, colors, lookup time	The logo, the description, and a brand color
`pending`	The retry time	The logo and the name. Retry when the brand is ready.
`not_found`	The lookup time	The logo and the name, with no description
Request failed	The attempt time	The logo and the name. Retry later with backoff.
Rep edit	The value, in a separate field	The rep’s value, before any enrichment

A palette often starts with black or white, so use the first color with an OKLCH chroma (oklch.c) of 0.08 or more as the accent. The brand kit import use case has a picker.

Test the account views

Test with an account that has a website, one with only a contact email, and one with only a name. Enrich a domain that Logo.dev has not indexed, and check that the pending state retries. Check that a not_found result shows the logo and the name with no description. Then enrich an account again, and check that the rep edit stays.

Brand

Every field, status, and identifier for brand lookups.

Company autocomplete

Capture a clean domain when a rep adds a company.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Add company logos to CRM records

Find the domain for each account

Render the list and the record header

Enrich the record on your server

Test the account views

Brand

Company autocomplete

​Find the domain for each account

​Render the list and the record header

​Enrich the record on your server

​Test the account views

Brand

Company autocomplete

Find the domain for each account

Render the list and the record header

Enrich the record on your server

Test the account views