In this blog, we're going to take a quick dive into the world of search banners and how to effectively customize them using Algolia to enhance your user experience and drive engagement. This blog is based on a presentation I gave at DevCon last year. You can watch the complete presentation here. For context, I'm a senior software engineer at Algolia, and I've been working on the digital merchandising team for over two years. I'm excited to share my insights and expertise with you all. Let's get started!

What's a search banner?

Let's begin with the basics. Think of a search banner as that eye-catching visual element that appears alongside your search results. It's contextually relevant to the user's search query and can serve a variety of purposes:

• Navigation and guidance: You can use search banners to guide users to other relevant resources or sections of your website, helping them find what they need more efficiently.

• Product highlighting: You can showcase a new or featured product directly in the search results, grabbing the user's attention and potentially driving sales.

• Promotions and sales: Companies can also use banners to announce a sale, discount, or special offer to incentivize users to make a purchase or take a specific action.

• Personalized recommendations: Lastly, you might use a banner to leverage user data and search behavior to display personalized recommendations or offers in the banner.

Algolia's out-of-the-box solution

Earlier this year, Algolia introduced a convenient built-in banner solution to simplify the process of adding banners to your search results. Here's what you'll need to get started:

• An Algolia app and index: This is the foundation of your search implementation, where your data is stored and indexed.

• A web application using InstantSearch: Algolia's InstantSearch library provides the front-end components and tools for building a fast and relevant search experience.

• A rule with the new Banner consequence: Rules are the core of Algolia's search customization, and the new Banner consequence allows you to easily trigger the display of a banner based on specific conditions.

Assuming you have all the above, you can then create rules to implement the banner(s) on your site. 

Rules

Rules are the mechanisms that govern your search results. They consist of conditions (the triggers) and consequences (the actions). When a condition is met, the corresponding consequence is executed. For example, you might have a rule that says, "If the user searches for 'shoes', display a banner promoting a sale on shoes."

There are two ways to create a rule in the Algolia dashboard:

• Manual Rules Editor: This provides more granular control and flexibility for advanced use cases, allowing you to write custom code and logic.

• Visual Rules Editor: This offers a user-friendly interface for creating basic rules without writing code, making it accessible to non-developers.

For implementing out-of-the-box banners, the visual rule editor is the recommended approach. Here's a quick overview of the process:

1. Set a condition: Define the trigger for the rule, such as a specific search query, facet selection, or other criteria.

2. Add the banner consequence: Specify the image URL, alt text, and target URL (if applicable) for the banner.

Implementing and customizing banners

With our React InstantSearch libraries, integrating the banner into your search results is straightforward. (there are many other InstantSearch libraries to choose from besides React) By simply using the hits component, the banner will automatically appear when the conditions of your rule are met, requiring minimal configuration on your part.

InstantSearch widgets are designed to be flexible and customizable. Here are a few ways you can tailor the appearance of your banners:

• Overriding CSS classes: Algolia provides CSS classes for the banner root, banner image, and banner link, allowing you to apply your own styles and branding.

• Providing a template: For more extensive customization, you can use a template prop (or a slot for JavaScript React view) to completely redefine the structure and layout of the banner.

Custom search banners

While the out-of-the-box solution is convenient for many use cases, it does have some limitations. The banner data is restricted to an image URL, alt text, and target URL, which might not be sufficient for more complex scenarios. Additionally, the extent to which you can customize the CSS and HTML templates is somewhat limited.

When you require more intricate data structures, dynamic content, or advanced layouts, custom banners are the answer. Custom banners still rely on a trigger (condition) and a mechanism for displaying the data (consequence). You can leverage the manual rules editor to return custom data (in JSON format) along with your search results, providing greater flexibility and control.

Custom rule consequences offer a way to streamline the process of setting up custom banners for your non-developer colleagues. As a developer, you can create a custom form within the visual rule editor, abstracting away the complexities of JSON and enabling others to configure banners without writing code.

Next steps

This blog is a very brief introduction to search banners.  I encourage you to experiment with these techniques and leverage the power of Algolia to create captivating and effective search banners that elevate your user experience. If you’d like to learn more, you can always contact our team for a custom demo, or you can sign up today to try out banners for yourself.