API Reference / Vue InstantSearch Widgets / ais-powered-by
Aug. 23, 2019

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 are on a Community or Free 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?