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.
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
- Compatible with all current versions of the Instantsearch (vanilla, react, vue) and Autocomplete libraries.
- Library is open source and available on GitHub.
- Explore the playground with the latest version.
Related Integrations
- Works with Instantsearch.js and Autocomplete.js.
- Take advantage of all our API clients and frameworks.
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});
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
Showcase
Demo
Algolia Recommend Demo for eCommerce
Apply different filters and fallback strategies to visualize and customize which recommendations to display on product description or checkout pages.