> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# poweredBy
> Shows the Algolia logo with a link to the Algolia homepage.
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
FlavorSwitcher requires at least one option.
;
}
const selected = options.find(option => option.value === current) ?? options[0];
return ;
};
```ts Signature theme={"system"}
poweredBy({
container: string | HTMLElement,
// Optional parameters
theme?: string,
cssClasses?: object,
});
```
```js Package manager theme={"system"}
import { poweredBy } from "instantsearch.js/es/widgets";
```
```js CDN theme={"system"}
const { poweredBy } = instantsearch.widgets;
// or directly use instantsearch.widgets.poweredBy()
```
Preview this widget and its behavior.
## About this widget
The `poweredBy` widget is used to display an Algolia logo and to redirect to Algolia's homepage.
[Algolia requires](https://www.algolia.com/policies/free-services-terms) that you use this widget if you're on a community plan
(open source, not-for-profit, or [DocSearch](https://docsearch.algolia.com)).
## Examples
```js JavaScript icon=code theme={"system"}
poweredBy({
container: "#powered-by",
});
```
## Options
The CSS Selector or `HTMLElement` to insert the widget into.
```js string theme={"system"}
poweredBy({
container: "#powered-by",
});
```
```js HTMLElement theme={"system"}
poweredBy({
container: document.querySelector("#powered-by"),
});
```
The version of the logo to use, legible on light or dark backgrounds.
```js JavaScript icon=code theme={"system"}
poweredBy({
// ...
theme: "dark",
});
```
The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#style-your-widgets):
* `root`. The root element of the widget.
* `link`. The link element.
* `logo`. The SVG element.
```js JavaScript icon=code theme={"system"}
poweredBy({
// ...
cssClasses: {
root: "MyCustomPoweredBy",
link: ["MyCustomPoweredByLink", "MyCustomPoweredByLink--subclass"],
},
});
```
## HTML output
```html HTML icon=code-xml theme={"system"}
```
## Customize the UI with `connectPoweredBy`
If you want to create your own UI of the `poweredBy` widget, you can use connectors.
To use `connectPoweredBy`, you can import it with the declaration relevant to how you installed InstantSearch.js.
```js Package manager theme={"system"}
import { connectPoweredBy } from "instantsearch.js/es/connectors";
```
```js CDN theme={"system"}
const { connectPoweredBy } = instantsearch.connectors;
// or directly use instantsearch.connectors.connectPoweredBy()
```
Then it's a 3-step process:
```js JavaScript icon=code theme={"system"}
// 1. Create a render function
const renderPoweredBy = (renderOptions, isFirstRender) => {
// Rendering logic
};
// 2. Create the custom widget
const customPoweredBy = connectPoweredBy(renderPoweredBy);
// 3. Instantiate
search.addWidgets([
customPoweredBy({
// instance params
}),
]);
```
### Create a render function
This rendering function is called before the first search (`init` lifecycle step)
and each time results come back from Algolia (`render` lifecycle step).
```js JavaScript icon=code theme={"system"}
const renderPoweredBy = (renderOptions, isFirstRender) => {
const { url, widgetParams } = renderOptions;
if (isFirstRender) {
// Do some initial rendering and bind events
}
// Render the widget
};
```
#### Rendering options
The URL to redirect to.
```js JavaScript icon=code theme={"system"}
const renderPoweredBy = (renderOptions, isFirstRender) => {
const { url } = renderOptions;
document.querySelector("#powered-by").innerHTML = `
Powered by Algolia
`;
};
```
All original widget options forwarded to the render function.
```js JavaScript icon=code theme={"system"}
const renderPoweredBy = (renderOptions, isFirstRender) => {
const { widgetParams } = renderOptions;
widgetParams.container.innerHTML = "...";
};
// ...
search.addWidgets([
customPoweredBy({
container: document.querySelector("#powered-by"),
}),
]);
```
### Create and instantiate the custom widget
First, create your custom widgets using a rendering function.
Then, instantiate them with parameters.
There are two kinds of parameters you can pass:
* **Instance parameters**. Predefined options that configure Algolia's behavior.
* **Custom parameters**. Parameters you define to make the widget reusable and adaptable.
Inside the `renderFunction`, both instance and custom parameters are accessible through `connector.widgetParams`.
```jsx JavaScript icon=code theme={"system"}
const customPoweredBy = connectPoweredBy(renderPoweredBy);
search.addWidgets([
customPoweredBy({
url?: string,
}),
]);
```
#### Instance options
The URL to redirect to.
```js JavaScript icon=code theme={"system"}
customPoweredBy({
url: "https://algolia.com/about",
});
```
### Full example
```html HTML theme={"system"}
```
```js JavaScript theme={"system"}
// Create the render function
const renderPoweredBy = (renderOptions, isFirstRender) => {
const { url, widgetParams } = renderOptions;
widgetParams.container.innerHTML = `
Powered by Algolia
`;
};
// Create the custom widget
const customPoweredBy = connectPoweredBy(renderPoweredBy);
// Instantiate the custom widget
search.addWidgets([
customPoweredBy({
container: document.querySelector("#powered-by"),
}),
]);
```