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

ais-powered-by

Widget signature 
<ais-powered-by
  // Optional parameters
  theme="string"
  :class-names="object"
/>
See code examples
See Live example

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

Copy 
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.
Copy 
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.
Copy 
1
2
3
4
5
6
7

<ais-powered-by
  :class-names="{
    'ais-PoweredBy': 'MyCustomPoweredBy',
    'ais-PoweredBy--light': 'MyCustomPoweredByLight',
    // ...
  }"
/>

HTML output

Copy 
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?

Vue InstantSearch v3