API Reference / Vue InstantSearch Widgets / ais-powered-by
Apr. 24, 2019

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