Building Instant Search - Algolia and Webflow Guide

Right guys - I’ve finally done it. I’ve built an instant search for my site that I can stylize on my own and is also free! Quick note, rushing through this guide. No idea how to share some of the code properly (amateur hour) - if someone can help with formatting, I’ll make the changes.

You might have come across Algolia before - here’s a quick guide.

Disclaimer - I have a very very basic knowledge of Java Script. There will be better ways to do this - so please add to this guide.

The key Algolia guide you’ll need is here and the other relevant docs for adding more widgets can be found here.

As some background, Algolia provides insanely fast search results and provides users with the ability to stylise results easily and use other prebuilt ‘widgets’ like hierarchical categories, pagination, sliders etc to refine results. You can upload results in CSV (that’s what I did) or use other tools like Python to upload the date.

You can find a live version of the website here and the preview link here

Process:

  1. I downloaded my sitemap (had about 3k records to search) and just created categories, headings, descriptions and relevant links in excel.

  2. Login to Algolia, fairly straightforward - do the walkthrough and upload your data or use their own if you CBA and everything you need will be in the “Indices” tab. In the “Browse” tab you can see an overview of your data, you can search through the data and you can see what the JSON looks like when you click the “<> Raw” button

  3. Go to the “Ranking” tab and put in the relevant attributes that you want to search (like Product Name, Description etc), change ranking formula accordingly then little to no change on this page.

  4. “Display” is the vital tab. For attributes for faceting put in all the different attributes that you want to create anything like categories for. Under atttributes to retrieve - put in everything that you’d like to use in some way in the end search results - even URLs etc.

  5. Let’s build!

  6. Headover to Webflow to the page where you’d like to include search. Click the Cog icon/ edit page details. Under the custom code section, you’re going to stick the Javascript content from my codepen here into the “Before /Body Tag” section of the page (Review the Algolia guide too which should help explain further)

  7. Go back to Algolia and go into the “API Keys” section on the left. This is where you need to grab your “Application ID” and “Search Only Key” (make sure you change from mine) and then put in the relevant name of whatever you’ve called your Index/ Indices.

  8. Click into the main page, create an HTML embed element, now take the code in the HTML section of my codepen here. Each of the items in {{{ }}} are the relevant items I want to show from Algolia - go back to your Indices in Algolia and click the button to see how the items are configured.

  9. Change the defined heading and div classes in my code to the relevant versions you’d like to use from your classes for the search results (I basically created a div block that I styled to the format that I wanted search results to look)

  10. For each of the widgets that you’ve added - 4 in total - “hits3”, “search-input3”, “pagination3” and “categories” - create a new HTML embed element for each of these widgets and under the settings tab for each of them, change object ID to the relevant tag above. Then for hits3, pagination3 and categories, within the embed element use the below.

<div id="hits"> </div> <div>

You should hopefully be up and running I think - let me know if I’ve missed something.

Big shoutout to @samliew who helped me with the first part of this and also all the great webflow staff for all their responses to my queries - you can find my original post here

13 Likes

@cbailey - this looks awesome, and I’m really excited about playing with this.

In another thread, you were looking to automate it with the API (I think?) — was that still possible? Or did you ultimately have to resort to the manual CSV upload?

Hey @dchou - no worries at all, let me know how you get on!

I didn’t explore much of the API as I was looking for a pretty quick fix so just manual CSV for now. Eventually I will look at this but not for a while. If you manage to get anything working then let me know!

Thanks for this guide, your page helped me get started using algolia to mockup a search page.

I built this data-table using algolia and webflow:
https://www.ui-demo.tazworks.com/admin/manage-templates/all

For the mockup data I used a tool called mockaroo:

I figured out sorting, and adding an infinite scroll (though I have it set to only autoload 2 times, and then allow clicking a button to load more)

I love the idea of using algolia as a site search tool, I want to look into using the webflow api to update algolia records. that would be amazing!

2 Likes

Thank you so much for posting this guide. It is going to be extremely helpful for the site I am working on. I was wondering if any of you have more to share, or have you played around with the API?

Hey @cbailey, this is awesome! I am trying to integrate Algolia and Webflow too! I think your guide will help me do exactly what I want but I am having a hard time grasping some of the concepts. Would it be possible for you to share the site (or an example) where this integration is applied? I want to visualize how this works and how every part ends up looking in Webflow.

Would appreciate it a lot!

I found this tool for integrating Webflow and Algolia: https://nocodeapi.com/marketplace

2 Likes

Thankd a million for taking the time to write this up. Super helpful! :raised_hands: