First, learn how to add a hook correctly in our documentation here.
Next, read about the widget you'll be using here, and the general guide on banners here.
The userData
in this example would be {"banner_img": "someValueHere"}
.
The container has the id youridhere
. This is an example, with placeholder text, to help you get started developing your own banner.
require(['algoliaCommon'], () => {
algolia.registerHook('beforeInstantsearchStart', function(search, algoliaBundle) {
var widgetConfig = {
container: "#youridhere",
templates: {
default({items}) {
if (items.length > 0) {
return `<img src="`+ items[0].banner_img + `"></img>`;
}
}
},
};
search.addWidget(algoliaBundle.instantsearch.widgets['queryRuleCustomData'](widgetConfig));
return search;
});