I’ve been using Algolia on my personal blog for years now, and it handles my nearly 7,000 blog posts without breaking a sweat. Their pricing is ridiculously good: the free tier covers a lot of ground and can handle quite a few sites, which means at minimum, it gets you started before you need to consider graduating to a higher paid plan. In this post, I’ll walk you through integrating it with a Webflow site, keeping things as simple as possible.

What do you need?

On the Webflow side, you’ll need a CMS plan as that’s how I’m going to do the integration. Algolia also has a web crawler option but we’ll be focusing on the CMS option for this post.

For Algolia, you will want an account there. I’ll be using the free tier so there’s no cost involved. That free tier covers 10,000 requests and one million records. There’s more setup required, but I’ll cover that later.

Alright, let’s get started!

The content

Before I get started, note that Algolia can work with any type of data – blog posts, products, reviews, cats, and more. Algolia doesn’t care about the shape of your data as long as it can be turned into JSON. You can also work with multiple different types of content. In order to keep things simple for this demo, I’ll use a Blog Posts collection. This is based on the default Webflow CMS sample for blog posts and consists of:

• Name
• Slug
• Body
• Date Published

Create this collection, and make note of the ID value. This will be needed later.

When Webflow offers to make AI generated content for you, I’d take it up on the offer as it will create some good seed content for testing. Obviously, if you have a CMS collection already with content and you’re following along with this guide, you don’t have to worry about that!

The Algolia index

Algolia works by having an index of your content. You can think of it as a copy of your content, but not necessarily a one to one copy. For example, your content may include properties that don’t make sense for search. Your content may also include properties you want to modify before they’re indexed. What goes in the index is up to you and your particular site and search needs.

But the crucial point is this: Algolia can’t search for something that’s not in your index. That means you’re going to need to ensure your Webflow site’s content stays in sync with your index.

Earlier, I asked you to create an Algolia account, and if you’ve done that and logged into your dashboard, you can click “Search” in the left-hand nav under ‘Products.’ (Note: you may be asked to create an Application initially.) This application is much like a workspace in Webflow. You can use an application as a container for your indexes and create multiple applications if you would like.

You need to create an index for your site, typically named something relevant to your site to make it easy to find later.

After creating your index, you’ll land on a new Index page. You’ll be able to browse content here and test search – once you’ve actually indexed something.

As I mentioned, there is quite a lot of configuration you can do to customize how your content is discovered. The Algolia documentation is quite intensive and I absolutely urge you to check it out.

At this point, you should have:

• A Webflow site with a CMS collection and some content. It doesn’t really matter how much, but at least a couple entries.
• An empty Algolia index, waiting for your data.

Get your Algolia credentials

The next few steps will require certain credentials from the Algolia side, namely:

• The Algolia App ID
• The Algolia API key
• The Algolia Search API key
• The Algolia index name

You already have the index name, just be sure to remember it. To get your App ID, in the dashboard, note the “Application” dropdown on top of the screen. Clicking that will show a list of applications, along with their ID:

You can click the little “copy” icon there to copy the value to your clipboard, or just have better memory than I do.

For your API key, go into your settings (gear icon on the bottom left), click “API Keys”, and on this page, you’ll see a few different keys. The one marked “Search API Key” and documented as “safe in your front end code” will be used later when we build the search interface on our Webflow site. Copy it so you have it handy.

The next one, “Write API Key,” is what our code will use to work with the Algolia index. This is not safe for the public, but safe in our backend code. Copy that down as well.

Seeding the index

At this point, we’re ready to begin our integration, but there’s something that needs to happen first. I have existing content I want to seed into the index. If you’re building a new site and don’t have content yet, feel free to skip to the next section. In the future, if you need to build a new index and re-populate it, this script will do exactly that! Our script is a Node.js file that can run on your machine, there is no need to host it.

In order for our script to work, we’ll need the Algolia API key mentioned above, the CMS ID, and a Webflow API key that allows for CMS Read operations.  I created a .env file with these settings:

WF_API_KEY=my secret key
WF_COLLECTION_ID=6998dce17a56281f1afc766c

ALGOLIA_APP_ID=0FJBPN4K5D
ALGOLIA_API_KEY=my secret key
ALGOLIA_INDEX_NAME=webflow1

Our script needs to do two basic things:

• First, connect to Webflow and get our CMS items.
• Send this data to Algolia

Let’s break the script down, bit by bit.

First, I read from the environment all the information I need and create an instance of the Algolia SDK:

/*
I'm responsible for reading from the Webflow CMS and populating into an Algolia index.

In theory, I should only be run once, but if you clear out the index you can run this again.
*/
import { algoliasearch as algoliaSearch } from 'algoliasearch';

const WF_API_KEY = process.env.WF_API_KEY;
const WF_COLLECTION_ID = process.env.WF_COLLECTION_ID
const ALGOLIA_APP_ID = process.env.ALGOLIA_APP_ID;
const ALGOLIA_API_KEY = process.env.ALGOLIA_API_KEY;
const ALGOLIA_INDEX_NAME = process.env.ALGOLIA_INDEX_NAME;

if(!WF_API_KEY || !WF_COLLECTION_ID|| !ALGOLIA_APP_ID || !ALGOLIA_API_KEY || !ALGOLIA_INDEX_NAME) {
  console.error('Missing environment variables. Please set WF_API_KEY, WF_COLLECTION_ID, ALGOLIA_APP_ID, ALGOLIA_API_KEY, and ALGOLIA_INDEX_NAME.');
  process.exit(1);
}

const algolia = algoliaSearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY);

Next, I need to get all the data from the CMS collection. The List Live Items endpoint will do this. It returns a paginated set of data, so I wrote my function to handle that and keep getting data until everything is retrieved.