@brandfetch/autocomplete

Brand Autocomplete API

The Free Brand Autocomplete API lets you auto-complete brand names, display their logo and retrieve their domain information. Use the web component to have a quick integration matching your UI.

⏳ Installation

You can install the SDK using npm & import it

npm install @brandfetch/autocomplete

import '@brandfetch/autocomplete';

Or directly import the CDN link.

<script type="module" src="https://unpkg.com/@brandfetch/autocomplete@latest/dist/umd/brandfetch-autocomplete.min.js"></script>

👨‍💻 How to use it

Insert the autocomplete tag

<brandfetch-autocomplete></brandfetch-autocomplete>

Get the selected brand

<script>
  document.getElementById('search').addEventListener('change', (e) => {
    console.log(JSON.stringify(e.detail));
  });
</script>

🎨 How to customize it

HTML

Modify the number of brands returned with max parameter

<brandfetch-autocomplete max="3"></brandfetch-autocomplete>

Edit the placeholder with the placeholder parameter

<brandfetch-autocomplete
  placeholder="Start typing a brand you know"
></brandfetch-autocomplete>

CSS

The web component is designed to be highly customizable. Adapt it to your UI using the parameters below:

brandfetch-autocomplete {
  /* Global params */
  --brandfetch-background-color: #ffffff;
  --brandfetch-text-primary-color: #000000;
  --brandfetch-text-secondary-color: #444444;
  --brandfetch-link-color: #0084ff;
  --brandfetch-font-family: 'Arial';
  --brandfetch-font-size: 14px;
  /* Search box params */
  --brandfetch-search-height: 52px;
  --brandfetch-search-border-size: 3px;
  --brandfetch-search-border-radius: 26px;
  --brandfetch-search-border-color: #0084ff;
  --brandfetch-search-border-focus-color: #75bcff;
  --brandfetch-search-text-color: #000000;
  --brandfetch-search-placeholder-color: #888888;
  /* Search loop icon params */
  --brandfetch-search-icon-size: 15px;
  --brandfetch-search-icon-color: #0084ff;
  --brandfetch-search-icon-focus-color: #369eff;
  /* Results params */
  --brandfetch-result-text-color: #000000;
  --brandfetch-result-background-hover-color: #fafafa;
  --brandfetch-result-border-color: #f4f4f4;
  --brandfetch-result-icon-empty-color: #cbcbcb;
  --brandfetch-result-icon-border-radius: 4px;
  --brandfetch-result-icon-size: 28px;
  /* Horizontal padding params */
  --brandfetch-max-horizontal-padding: 24px;
  --brandfetch-min-horizontal-padding: 20px;
  --brandfetch-horizontal-padding: 5.33%;
  /* Vertical padding params */
  --brandfetch-max-vertical-padding: 12px;
  --brandfetch-min-vertical-padding: 12px;
  --brandfetch-vertical-padding: 2%;
  /* Icon margins params */
  --brandfetch-max-horizontal-margin-icon-brand: 12px;
  --brandfetch-horizontal-margin-icon-brand: 3px;
  --brandfetch-horizontal-margin-icon-brand: 2%;
}

⚖️ License

TBD

LIT

We are using LIT to power the web component which falls under the BSD 3-Clause License license.

👀 About Brandfetch

Brandfetch is the global brand registry, making brands universally accessible and empowering organizations with better control over their brand assets.

👉 Claim your brand and take control over your brand identity across the internet.

✨ REST API

If the web component doesn't fit your use case, contact us to get access to the REST API.