Webflow is the modern visual website builder for all developers, if it's coder, nocoders, or desginers. You can build anything with this tool like blogs, portfolio websites, e-commerce business, marketplace, landing pages for marketing, & lot's of ideas.

One thing webflow don't have that is advanced search API to integrte with the website. So, it's now possible without any coding.

In this blog post, we are going to show you how you can sync your webflow cms data into algolia and use the Algolia endpoint into your project for the Advanced search feature.

If you want to skip this blog then watch the YouTube video in action ↳ Sync Webflow CMS data to Algolia

There are three steps:

  • Setup Webflow CMS API
  • Setup Algolia API
  • Use Integromat to automate

Setup Webflow CMS API

Login to NoCodeAPI, find the Webflow CMS into the Marketplace and activate this. You will see a page to set up Webflow CMS API endpoints. Click on Make Webflow CMS API

To set up Webflow CMS API you need an API Access of the project. You can watch the video below ↓

Setup Algolia API

Go to NoCodeAPI Marketplace, find Algolia API, and activate this. Click on the Make Algolia API.

To set up Algolia API you need Admin API Key and Application Id. You can watch the video below ↓

Use Integromat

Integromat is an automation tool to connect multiple apps. It's easy to set up. Let's start and login on Integromat

After login in there, you can see a button Create a new scenario to set up one.

Create Screnario

Then select an Action call Make a request and you will see a form to input your Webflow CMS endpoint for Get all items.

So, your endpoint should look like this ↓

https://v1.nocodeapi.com/<username>/webflow/<token>

Now put your endpoint into the URL field, Choose GET method, check on Parse response, and click on OK button.

Sheet HTTP form

Now run this module, right-click on the module, and click on Run this module only. You will see the result.

Run Step

Now, we need a second module, called Iterator. Click on the green color tools icon in Tools to select Iterator and connect with the first HTTP module.

Click on the Iterator to iterate our Google rows to filter the data we want to push into Algolia. You will see a module with an Array label. Click on the input box and select array data by click on that.

Iterator Setup

Now, we need our third module Aggregate to JSON to make JSON Array from the Iterator module. To add JSON Aggregator, click on Plus Icon on the button to search for JSON and select Aggregate to JSON option.

JSON aggregator

You will see two input fields ↓

  • Source module- Select Iterator option
  • Data structure- Your data schema that you want to push into Algolia

In the Data structure field, click on Add button and give a name to your data structure and add items you want to push.

You can see above in the picture, we add three items title, slug and content and bind these values from iterator module.

Now, we need our last module HTTP to Make a request. This module will push your formatted JSON data to the Algolia endpoint.

So, your Algolia endpoint should look like this ↓

https://v1.nocodeapi.com/<username>/algolia/<token>/index?indexName=<indexName>&type=replace

Now put your endpoint into URL field, Choose POST method, select Body type Raw, Content type JSON (application/json), Request content JSON string from Aggregate to JSON, and click on OK

Algolia Module

Now it's time to test this automation. So, click on the button Run once to test this and on end, you will see the data into your Algolia dashboard.

Schedule the scenario

So, you can run this scenario at a regular interval. Like you can do every 1 hour, every day, day of the week, or custom date.

Click on the timer icon on the starting module.

Timer

This is it

I hope you liked this article. Help us write better by giving your feedback on our twitter channel at @nocodeapi.

Thank you for reading. Happy Coding !! ✌️