> ## 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.

```ts Signature theme={"system"}
poweredBy({
  container: string | HTMLElement,
  // Optional parameters
  theme?: string,
  cssClasses?: object,
});
```

<CodeGroup>
  ```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()
  ```
</CodeGroup>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/js/?path=/story/metadata-poweredby--default" horizontal>
  Preview this widget and its behavior.
</Card>

## 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

<ParamField body="container" type="string | HTMLElement" required>
  The CSS Selector or `HTMLElement` to insert the widget into.

  <CodeGroup>
    ```js string theme={"system"}
    poweredBy({
      container: "#powered-by",
    });
    ```

    ```js HTMLElement theme={"system"}
    poweredBy({
      container: document.querySelector("#powered-by"),
    });
    ```
  </CodeGroup>
</ParamField>

<ParamField body="theme" type="'light'|'dark'" default="light">
  The version of the logo to use, legible on light or dark backgrounds.

  ```js JavaScript icon=code theme={"system"}
  poweredBy({
    // ...
    theme: "dark",
  });
  ```
</ParamField>

<ParamField body="cssClasses" type="object" default="{}">
  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"],
    },
  });
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<div class="ais-PoweredBy ais-PoweredBy--light">
  <a
    href="..."
    target="_blank"
    class="ais-PoweredBy-link"
    aria-label="Search by Algolia"
    rel="noopener noreferrer"
  >
    <!-- <svg> ... </svg> -->
  </a>
</div>
```

## 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.

<CodeGroup>
  ```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()
  ```
</CodeGroup>

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

<ParamField body="url" type="string">
  The URL to redirect to.

  ```js JavaScript icon=code theme={"system"}
  const renderPoweredBy = (renderOptions, isFirstRender) => {
    const { url } = renderOptions;

    document.querySelector("#powered-by").innerHTML = `
      <a href="${url}">Powered by Algolia</a>
    `;
  };
  ```
</ParamField>

<ParamField body="widgetParams" type="object">
  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"),
    }),
  ]);
  ```
</ParamField>

### 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

<ParamField body="url" type="string" default="https://algolia.com">
  The URL to redirect to.

  ```js JavaScript icon=code theme={"system"}
  customPoweredBy({
    url: "https://algolia.com/about",
  });
  ```
</ParamField>

### Full example

<CodeGroup>
  ```html HTML theme={"system"}
  <div id="powered-by"></div>
  ```

  ```js JavaScript theme={"system"}
  // Create the render function
  const renderPoweredBy = (renderOptions, isFirstRender) => {
    const { url, widgetParams } = renderOptions;

    widgetParams.container.innerHTML = `
      <a href="${url}">Powered by Algolia</a>
    `;
  };

  // Create the custom widget
  const customPoweredBy = connectPoweredBy(renderPoweredBy);

  // Instantiate the custom widget
  search.addWidgets([
    customPoweredBy({
      container: document.querySelector("#powered-by"),
    }),
  ]);
  ```
</CodeGroup>