Recommend Vanilla JS for web

Vanilla JS + Algolia Recommend

Build recommend experiences with UI components and libraries.

Sign up
A computer on a search page, with recommendations being inserted on the side

What is Algolia

Algolia is a hosted, API-first platform used to build world-class search & discovery experiences. 

Start building quickly using libraries for every major language and framework. Scale your solution with a platform that serves over 85 billion queries for more than 13k customers every month.

Algolia UI Components - Recommend JS

Add recommendations to your javascript applications

A little more about Recommend Vanilla JS UI library - 

  • Add recommendations to your search experiences using pre-built, flexible and customizable library
  • Learn how to display recommended items in your front-end
  • Open source, production-ready and maintained by Algolia 

Features

  • Provides pre-built UI components following best practice principles for Vanilla JS that remain independent from external frameworks
  • Integrate into your existing UI or app 
  • If you already have instant search or autocomplete implemented, recommend can be added
  • Comes with a basic CSS theme, completely customizable (in fact, we highly recommend you customize it)
  • Progressive customization of components (use, extend, or customize) 
  • Manages all business logic for search requests, responses, and states for the recommend models
  • Read documentation about how Algolia Recommend works

Version

Related Integrations

Key links


Get started

HTML (get a free account here)

1<div class="recommend-demo">
2  <div class="title">My product page</div>
3  <div class="items-wrapper">
4    <div id="relatedProducts"></div>
5  </div>
6</div>

CSS

1body { font-family: sans-serif; padding: 1em; }
2.items-wrapper { display: flex; justify-content: space-evenly; gap: 1rem; }
3.recommend-demo { margin: 1rem auto; }

Recommendation

1relatedProducts<ProductHit>({
2  container: '#relatedProducts',
3  recommendClient,
4  indexName: 'demo_recommend',
5  objectIDs: ['object1', 'object2'],
6  itemComponent({ item }) {
7    return (
8      <div>
9        <img src={item.image} alt={'product'} />
10        <div className="item-content">
11          <div className="item-name">{item.name}</div>
12          <div className="item-description">{item.description}</div>
13          <div className="item-price">${item.price}</div>
14        </div>
15      </div>
16    );
17  },
18  view: horizontalSlider,
19  maxRecommendations: 10,
20  translations: {
21    title: 'Complete your look',
22  },
23});
Get started for freeExplore all developer docs

Use cases & demos for Algolia Recommend

Showcase
Sample Applications

Personalized Email Recommendations

This app shows how to leverage Algolia Personalization to display product recommendations in emails

  • javascript
  • nodejs