Skip to main content
Displays the Algolia logo to redirect to the Algolia website.

​
Usage

import instantsearch from 'instantsearch.js';
import { poweredBy } from 'instantsearch.js/es/widgets';

const search = instantsearch({
  indexName: 'instant_search',
  searchClient
});

search.addWidgets([
  poweredBy({
    container: '#powered-by'
  })
]);

search.start();

​
Parameters

​
container
string | HTMLElement
required
CSS selector or HTMLElement to insert the widget.
​
theme
'light' | 'dark'
default:"light"
The theme of the logo. Choose between light or dark theme.
​
cssClasses
object
CSS classes to add to the widget elements.

​
Examples

​
Dark theme

poweredBy({
  container: '#powered-by',
  theme: 'dark'
});

​
Custom CSS classes

poweredBy({
  container: '#powered-by',
  theme: 'light',
  cssClasses: {
    root: 'my-powered-by',
    link: 'my-powered-by-link'
  }
});

​
HTML output

<div class="ais-PoweredBy ais-PoweredBy--light">
  <a class="ais-PoweredBy-link" href="https://www.algolia.com/" target="_blank" rel="noopener noreferrer">
    <span>Search by</span>
    <svg class="ais-PoweredBy-logo">...</svg>
  </a>
</div>

​
Notes

  • The logo is displayed as an SVG.
  • The link opens in a new tab with appropriate security attributes.
  • The theme changes the logo color to match your design.

Build docs developers (and LLMs) love

Get started for freeTalk to us