Integration Examples

The Quikturn Logo API is designed to be simple and flexible, working seamlessly with any web framework or programming language. This section provides practical integration examples for popular frameworks and use cases.

Quick Start

The Logo API endpoint follows a simple pattern:

https://logos.getquikturn.io/{domain}?token={publishable_key}

• {domain} - The domain name (e.g., "apple.com", "google.com")
• {publishable_key} - Your API publishable key

The API returns a 302 redirect to the actual logo URL, making it easy to use directly in image tags.

Before vs After (tl;dr)

• Before: Proxy through your backend (/api/logo/[domain]) using a secret key, then redirect to the logo.
• After: Direct embed with a publishable key—no backend needed:

function CompanyLogo({ domain }) {
  return (
    <img
      src={`https://logos.getquikturn.io/${domain}?token=pk_your_key&size=128`}
      alt={`${domain} logo`}
      loading="lazy"
    />
  );
}

Integration Options

• HTML & Static Sites: Examples
• React: Examples
• Next.js (App Router): Examples
• Vue / Nuxt: Examples
• Svelte: see plain HTML pattern

Common Patterns

All integration examples demonstrate:

• Error Handling - Gracefully handle missing or invalid logos
• Loading States - Show placeholders while logos load
• Fallback Options - Display alternatives when logos are unavailable
• Performance - Optimize loading and caching strategies
• Accessibility - Proper alt text and ARIA attributes
• Display Controls - Optional size (default 128, max 800), greyscale, and theme=light|dark query params for consistent rendering.

Framework Integration: Before vs After

Direct embeds replace the old server-side proxy pattern. Examples:

• React (Before): /api/logo/[domain] route fetched with a secret key, then redirected.
  After: <img src={https://logos.getquikturn.io/${domain}?token=pk_abc123`} />`
• Next.js App Router (Before): app/api/logo/[domain]/route.ts proxied with sk_*.
  After: <Image src="https://logos.getquikturn.io/stripe.com?token=pk_abc123" unoptimized />
• Vue / Nuxt / Svelte: Bind :src directly to the Quikturn URL with a publishable key.
• Static / No-code: Paste the URL into an image source—no backend needed.

Reusable component (React):

function QuikturnLogo({ domain, size = 64, className }) {
  const token = process.env.NEXT_PUBLIC_QUIKTURN_PUBLISHABLE_KEY;
  return (
    <img
      src={`https://logos.getquikturn.io/${domain}?token=${token}&size=${size}`}
      alt={`${domain} logo`}
      loading="lazy"
      className={className}
    />
  );
}

Best Practices

1. Cache API Keys - Store your publishable key in environment variables
2. Handle Errors - Always provide fallback UI for missing logos
3. Optimize Loading - Use lazy loading and image optimization where available
4. Validate Domains - Sanitize user-provided domain names
5. Monitor Usage - Track API usage through your dashboard

Next Steps

Pick an integration example that matches your technology stack and start building!