API Reference / Vue InstantSearch Widgets / ais-powered-by

ais-powered-by

Widget signature
<ais-powered-by
  // Optional parameters
  theme="string"
  :class-names="object"
/>

About this widget

The ais-powered-by widget is used to display the Algolia logo to redirect to our website.

Algolia requires that you use this widget if you only use your free usage credits, or are on a Community or Free legacy plan.

Examples

1
<ais-powered-by />

Props

theme
type: string ("dark"|"light")
default: light
Optional

The version of the logo to use, legible on light or dark backgrounds.

1
<ais-powered-by theme="dark" />
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-PoweredBy: the root of the widget.
  • ais-PoweredBy--light: the root of the widget with the light theme.
  • ais-PoweredBy--dark: the root of the widget with the dark theme.
  • ais-PoweredBy-link: the link of the widget.
  • ais-PoweredBy-logo: the illustration of the widget.
1
2
3
4
5
6
7
<ais-powered-by
  :class-names="{
    'ais-PoweredBy': 'MyCustomPoweredBy',
    'ais-PoweredBy--light': 'MyCustomPoweredByLight',
    // ...
  }"
/>

HTML output

1
2
3
4
5
6
<div class="ais-PoweredBy">
   <span class="ais-PoweredBy-text">Search by</span>
   <a href="..." class="ais-PoweredBy-link" aria-label="Algolia">
      <!-- <svg> ... </svg> -->
   </a>
</div>

Did you find this page helpful?