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 empowers modern developers to build world class search and discovery experiences without any DevOps. 

Libraries with every major language and framework make it easy to enrich your users' experiences. 

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