Skip to main content
Signature
queryRuleCustomData({
  container: string | HTMLElement,
  // Optional parameters
  templates?: object,
  cssClasses?: object,
  transformItems?: function,
});

​
Import

import { queryRuleCustomData } from "instantsearch.js/es/widgets";

const { queryRuleCustomData } = instantsearch.widgets;
// or directly use instantsearch.widgets.widgets()

See this widget in action

Preview this widget and its behavior.

​
About this widget

The queryRuleCustomData widget displays custom data from index rules. You can use this widget to display banners or recommendations returned by rules when they match search parameters.

​
Examples

JavaScript
queryRuleCustomData({
  container: "#queryRuleCustomData",
  templates: {
    default({ items }, { html }) {
      return html`
        ${items
          .map((item) => {
            const { title, banner, link } = item;

            if (!banner) {
              return;
            }

            return `
            <div>
              <h2>${title}</h2>
              <a href="${link}">
                <img src="${banner}" alt="${title}">
              </a>
            </div>
          `;
          })
          .join("")}
      `;
    },
  },
});

​
Options

​
container
string | HTMLElement
required
The CSS Selector or HTMLElement to insert the widget into.
queryRuleCustomData({
  container: "#queryRuleCustomData",
});

queryRuleCustomData({
  container: document.querySelector("#queryRuleCustomData"),
});
​
templates
object
The templates to use for the widget.
JavaScript
queryRuleCustomData({
  // ...
  templates: {
    // ...
  },
});
​
cssClasses
object
The CSS classes you can override:
  • root. The root element of the widget.
JavaScript
queryRuleCustomData({
  // ...
  cssClasses: {
    root: "MyCustomQueryRuleCustomData",
  },
});
​
transformItems
function
A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.
JavaScript
queryRuleCustomData({
  // ...
  transformItems(items) {
    return items.filter((item) => typeof item.banner !== "undefined");
  },
});

// or, combined with results
queryRuleCustomData({
  // ...
  transformItems(items, { results }) {
    return items.map((item) => ({
      ...item,
      visible: results.page === 0,
    }));
  },
});

​
Templates

You can customize parts of a widget’s UI using the Templates API. Each template includes an html function, which you can use as a tagged template. This function safely renders templates as HTML strings and works directly in the browser—no build step required. For details, see Templating your UI.
The html function is available in InstantSearch.js version 4.46.0 or later.
​
default
function
The template to use for the custom data. It exposes the items returned by the rules.The following example assumes a rule returned this custom data.
JSON
{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}

queryRuleCustomData({
  // ...
  templates: {
    default({ items }, { html }) {
      return html`
        ${items
          .map((item) => {
            const { title, banner, link } = item;

            if (!banner) {
              return null;
            }

            return `
            <div>
              <h2>${title}</h2>
              <a href="${link}">
                <img src="${banner}" alt="${title}">
              </a>
            </div>
          `;
          })
          .join("")}
      `;
    },
  },
});

// String-based templates are deprecated, use functions instead.
queryRuleCustomData({
  // ...
  templates: {
    default: `
      {{#items}}
        {{#banner}}
          <div>
            <h2>{{title}}</h2>
            <a href="{{link}}">
              <img src="{{banner}}" alt="{{title}}">
            </a>
          </div>
        {{/banner}}
      {{/items}}
    `,
  },
});

​
HTML output

HTML
<div class="ais-QueryRuleCustomData"></div>

​
Customize the UI with connectQueryRules

If you want to create your own UI of the queryRuleCustomData widget, you can use connectors.
This connector is also used to build the queryRuleContext widget.
To use connectQueryRules, you can import it with the declaration relevant to how you installed InstantSearch.js. 
import { connectQueryRules } from "instantsearch.js/es/connectors";

const { connectQueryRules } = instantsearch.connectors;
// or directly use instantsearch.connectors.connectQueryRules()
Then it’s a 3-step process:
JavaScript
// 1. Create a render function
const renderQueryRuleCustomData = (renderOptions, isFirstRender) => {
  // Rendering logic
};

// 2. Create the custom widget
const customQueryRuleCustomData = connectQueryRules(renderQueryRuleCustomData);

// 3. Instantiate
search.addWidgets([
  customQueryRuleCustomData({
    // 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).
JavaScript
const renderQueryRuleCustomData = (renderOptions, isFirstRender) => {
  const { items, widgetParams } = renderOptions;

  if (isFirstRender) {
    // Do some initial rendering and bind events
  }

  // Render the widget
};

​
Render options

​
items
object[]
The items that matched the Rule.
JavaScript
const renderQueryRuleCustomData = (renderOptions, isFirstRender) => {
  const { items } = renderOptions;

  document.querySelector("#queryRuleCustomData").innerHTML = `
    <ul>
      ${items.map((item) => `<li>${item.title}</li>`).join("")}
    </ul>
  `;
};
​
widgetParams
object
All original widget options forwarded to the render function.
JavaScript
const renderQueryRuleCustomData = (renderOptions, isFirstRender) => {
  const { widgetParams } = renderOptions;

  widgetParams.container.innerHTML = "...";
};

// ...

search.addWidgets([
  customQueryRuleCustomData({
    container: document.querySelector("#queryRuleCustomData"),
  }),
]);

​
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.
JavaScript
const customQueryRuleCustomData = connectQueryRules(renderQueryRuleCustomData);

search.addWidgets([
  customQueryRuleCustomData({
    // Optional parameters
    transformItems,
  }),
]);

​
Instance options

​
transformItems
function
A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.
JavaScript
customQueryRuleCustomData({
  transformItems(items) {
    return items.filter((item) => typeof item.banner !== "undefined");
  },
});

// or, combined with results
customQueryRuleCustomData({
  transformItems(items, { results }) {
    return items.map((item) => ({
      ...item,
      visible: results.page === 0,
    }));
  },
});

​
Full example

<div id="queryRuleCustomData"></div>

// Create the render function
const renderQueryRuleCustomData = (renderOptions, isFirstRender) => {
  const { items, widgetParams } = renderOptions;

  if (isFirstRender) {
    return;
  }

  widgetParams.container.innerHTML = `
    <ul>
      ${items.map((item) => `<li>${item.title}</li>`).join("")}
    </ul>
  `;
};

// Create the custom widget
const customQueryRuleCustomData = connectQueryRules(renderQueryRuleCustomData);

// Instantiate the custom widget
search.addWidgets([
  customQueryRuleCustomData({
    container: document.querySelector("#queryRuleCustomData"),
  }),
]);
Last modified on May 19, 2026