--- title: "Work in new ways by integrating Algolia with Uniform’s visual editor" description: "We’re delighted to release a major update to the Uniform + Algolia integration, which uses the power of Algolia search to accelerate and automate the creation of digital experiences - helping brands to create great apps and websites for marketing and commerce that drive conversions." date: "2023-07-20T07:57:52.000Z" url: "https://timbenniks.dev/videos/uniform/012-aoaqo3tlzpw" youtube_url: "https://www.youtube.com/watch?v=aOaQO3tlZpw" playlist: "uniform" image: "https://i.ytimg.com/vi/aOaQO3tlZpw/maxresdefault.jpg" tags: ["cms", "api-design", "content-ops", "performance", "frontend"] --- # Work in new ways by integrating Algolia with Uniform’s visual editor We’re delighted to release a major update to the Uniform + Algolia integration, which uses the power of Algolia search to accelerate and automate the creation of digital experiences - helping brands to create great apps and websites for marketing and commerce that drive conversions. Watch on YouTube: https://www.youtube.com/watch?v=aOaQO3tlZpw ## Transcript this is Tim from uniform and in this video we will dive in some of the latest features of our new integration between uniform and algolia alright let's go into the browser to look at some really fun stuff so here we are in our Java drip project which is our amazing demo project where we can throw anything at and as you can see this is an algolia version so when we go to Integrations you can actually see there's an algolia integration running here the application ID is set API key is set if you actually want to know how to get this done yourself there is another video in this series explaining how to get started for now let's go into a product page so I can show you how we utilize algolia in this e-commerce project for coffee this is a product page for the cosmic coffee unbreakable pour over coffee maker which is an amazing coffee maker as you can see we are officially editing everything so there's um certain components have some parameters others do not this one has a bunch of things as you can see and then here we read the related products and there are some things that come from uniform like explore related products or I can actually do something like this and you will see a change right there and then below here these things are actually coming from algolia and you can see there's a product selector here so when I click on this you can see that there's a query going towards our index and so this is the product index for the Java drip project and as you can see here we've actually selected the cosmic coffee value specifically to find other products that are also like Cosmic coffee you could actually change this up and maybe type something in here to find Cosmic as well so you can do a search term or you can select a brand or you can even select like beans if you wanted to and you can see this is directly changing up and well let's put it back otherwise I'm destroying our demo here we go so we are back in business and so this is a really nice way to if you have product pages like these or maybe you have blog posts or whatever if you wanted like related things or things in the same vein that you want to show to people you can just go to your list component in this case and then select something in algolia query it ready to go run so that's the first thing I wanted to show and this one is amazing because you have if you have a ton of different landing pages and some new thing comes up that has to be shown on all of these Pages the algolia query is actually Dynamic and it just if it's important enough to show through your query it will end up there so algolia really helps you with that so on to our next demo which is actually our product search page so this is like um a page where you can see all your products you can see all of them are here and these components that you see here are actually algolia's instant search components but styled in the style of java trip and uniform has a really unique way to actually content edit these because you can see this is the instant search it is actually connecting to the index and then there are a bunch of widgets in here so we have a search box and then we have a two column component with in the left side a refinement list and this refinement list is actually again for Mongolia so this is actually an instant search component and these components have properties and so you can actually say you know what I don't want this to look at categories you know what let's search for brand names right and I only want to see like three brand names and you can see in the background that now just changed and that's a really easy way to kind of fix it up and you can actually just say you know what I'm just going to move this one up here and then the one on the bottom that's no longer brand name let's just go here and edit my value and you know what we make this one category I want to sing five of them and we actually have only three but there you go um and so you have just quite easily changed this up and um you can see like if you look below there's some pagination here no there are some properties in these components that augurlia offers and we have mapped these so we have some padding show first your previous show next um total Pages you want to use so this offers you a lot of flexibility because if you didn't want the pager well why don't you just say okay how about we just delete the pager all good you don't actually have to ask a developer to do that at all and so this makes this a very interesting use case because content editors and marketers can actually choose what am I searching for and what you can even do is if you have one index with products and one index with something else maybe with coffee bean flavors or something you can even just go to your home page and add a little search that is just with facets for your coffee bean flavors and another one is for product later on on the page you get to choose and you can even use and this is more fancy uniform offers personalization so you can say for people in France where I live I'm going to show this search and for people in Germany where other people live I'm going to show that search and so it enriches your experience as a Content editor and you can see how well algolia works for this so this is what I wanted to show you thank you for watching and have fun using this cheers