Recommend Vanilla JS for web

React 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 React JS that remain independent from external frameworks
  • Integrate into your existing react 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)

1import { RelatedProducts } from "@algolia/recommend-react";
2import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';

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

1class App extends Component {
2  render() {
3    return (
4      <div className="recommend-demo">
5        <section className="items-wrapper">
6          <RelatedProducts
7            recommendClient={recommendClient}
8            indexName="demo_recommend"
9            objectIDs={['object1', 'object2']}
10            itemComponent={RelatedItem}
11            view={HorizontalSlider}
12            maxRecommendations={5}
13            translations={{
14              title: "Complete your look",
15            }}
16          />
17        </section>
18      </div>
19    )
20  }
21}
22
23function RelatedItem (props) {
24  return (
25    <div>
26      <img align="center" src={props.item.image} alt={"product"} />
27      <div className="item-content">
28        <div className="item-name">{props.item.name}</div>
29        <div className="item-description">{props.item.description}</div>
30        <div className="item-price">${props.item.price}</div>
31      </div>
32    </div>
33  )
34}
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