Quikturnv1.0
Integration Examples

HTML Integration

Integrate company logos using plain HTML and vanilla JavaScript

The simplest way to integrate the Quikturn Logo API is using standard HTML <img> tags. This approach works with any website, framework, or static site generator—no backend needed.

Basic Usage

The most straightforward integration uses the API endpoint directly as the image source:

<img
  src="https://logos.getquikturn.io/apple.com?token=pk_your_publishable_key&size=128"
  alt="Apple logo"
  width="100"
  height="100"
/>

Replace pk_your_publishable_key with your actual publishable key from the dashboard.

With Fallback Image

Handle cases where a logo might not be available by providing a fallback:

<img
  src="https://logos.getquikturn.io/example.com?token=pk_your_publishable_key"
  alt="Company logo"
  onerror="this.src='https://via.placeholder.com/100x100?text=Logo'"
  width="100"
  height="100"
/>

The onerror handler replaces the image with a placeholder if the logo fails to load.

Dynamic Integration

For dynamic content, use JavaScript to generate logo URLs:

<div id="company-logos"></div>

<script>
  const API_TOKEN = 'pk_your_publishable_key';
  const companies = ['apple.com', 'google.com', 'microsoft.com', 'amazon.com'];

  const logosContainer = document.getElementById('company-logos');

  companies.forEach(domain => {
    const img = document.createElement('img');
    img.src = `https://logos.getquikturn.io/${domain}?token=${API_TOKEN}&size=96`;
    img.alt = `${domain} logo`;
    img.width = 80;
    img.height = 80;
    img.onerror = function() {
      this.src = 'https://via.placeholder.com/80x80?text=Logo';
    };

    logosContainer.appendChild(img);
  });
</script>

Advanced: Loading States

Show a loading placeholder while logos are being fetched:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Company Logos</title>
  <style>
    .logo-container {
      position: relative;
      width: 100px;
      height: 100px;
      display: inline-block;
    }

    .logo-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
      border-radius: 8px;
    }

    .logo-image {
      display: none;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }

    .logo-image.loaded {
      display: block;
    }

    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
  </style>
</head>
<body>
  <div class="logo-container">
    <div class="logo-placeholder"></div>
    <img
      class="logo-image"
      data-domain="apple.com"
      alt="Apple logo"
    />
  </div>

  <script>
    const API_TOKEN = 'pk_your_publishable_key';
    const logoImage = document.querySelector('.logo-image');
    const placeholder = document.querySelector('.logo-placeholder');
    const domain = logoImage.getAttribute('data-domain');

    // Set the source
    logoImage.src = `https://logos.getquikturn.io/${domain}?token=${API_TOKEN}`;

    // Handle successful load
    logoImage.onload = function() {
      this.classList.add('loaded');
      placeholder.style.display = 'none';
    };

    // Handle errors
    logoImage.onerror = function() {
      this.src = 'https://via.placeholder.com/100x100?text=Logo';
      this.classList.add('loaded');
      placeholder.style.display = 'none';
    };
  </script>
</body>
</html>

Security Best Practices

1. Use Environment Variables

For static sites with build steps, use environment variables:

<img
  src="https://logos.getquikturn.io/apple.com?token={{LOGO_API_TOKEN}}"
  alt="Apple logo"
/>

Replace {{LOGO_API_TOKEN}} with your build tool's environment variable syntax.

2. Validate User Input

If domains come from user input, validate them first:

function isValidDomain(domain) {
  const domainPattern = /^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]?\.[a-zA-Z]{2,}$/;
  return domainPattern.test(domain);
}

function getLogoUrl(domain, token) {
  if (!isValidDomain(domain)) {
    throw new Error('Invalid domain format');
  }
  return `https://logos.getquikturn.io/${encodeURIComponent(domain)}?token=${token}`;
}

// Usage
try {
  const logoUrl = getLogoUrl(userInputDomain, API_TOKEN);
  img.src = logoUrl;
} catch (error) {
  console.error(error);
  img.src = 'fallback-image.png';
}

Common Use Cases

Logo Grid

Display multiple company logos in a responsive grid:

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem;">
  <img src="https://logos.getquikturn.io/apple.com?token=pk_your_key" alt="Apple" />
  <img src="https://logos.getquikturn.io/google.com?token=pk_your_key" alt="Google" />
  <img src="https://logos.getquikturn.io/microsoft.com?token=pk_your_key" alt="Microsoft" />
  <img src="https://logos.getquikturn.io/amazon.com?token=pk_your_key" alt="Amazon" />
</div>

Partner Logos Section

Create a partners/clients section:

<section class="partners">
  <h2>Our Partners</h2>
  <div class="partner-logos">
    <img src="https://logos.getquikturn.io/salesforce.com?token=pk_your_key" alt="Salesforce" />
    <img src="https://logos.getquikturn.io/slack.com?token=pk_your_key" alt="Slack" />
    <img src="https://logos.getquikturn.io/shopify.com?token=pk_your_key" alt="Shopify" />
  </div>
</section>

<style>
  .partners {
    text-align: center;
    padding: 2rem;
  }

  .partner-logos {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .partner-logos img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s;
  }

  .partner-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
</style>

Performance Tips

  1. Lazy Loading - Use native lazy loading for images below the fold:

    <img src="..." loading="lazy" />

  2. Specify Dimensions - Always set width and height to prevent layout shift:

    <img src="..." width="100" height="100" />

  3. Use CDN - The API automatically serves logos from a global CDN for optimal performance

  4. Cache Headers - Logos are cached with appropriate headers for browser caching

Troubleshooting

Logo Not Displaying

  1. Check that your publishable key is correct
  2. Verify the domain format (e.g., "apple.com", not "https://apple.com")
  3. Check browser console for any errors
  4. Ensure you haven't exceeded your API rate limits

Slow Loading

  1. Check your network connection
  2. Verify the API status at status.getquikturn.io
  3. Use browser DevTools Network tab to inspect request timing

Next Steps

Integration Examples

Learn how to integrate the Quikturn Logo API into your applications with practical examples

React Integration

Direct embeds with a publishable key (no backend proxy needed)

On this page

Basic UsageWith Fallback ImageDynamic IntegrationAdvanced: Loading StatesSecurity Best Practices1. Use Environment Variables2. Validate User InputCommon Use CasesLogo GridPartner Logos SectionPerformance TipsTroubleshootingLogo Not DisplayingSlow LoadingNext Steps