Made in Builder.io

Join us for an AI launch event by

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Algolia is a search and recommendation engine API you can integrate into your Builder app using the Builder Algolia plugin.

The Builder.io Algolia plugin sends page data from the Builder.io API to a configured Algolia Index.

Below is an example of the payload that is delivered to Algolia. You can set up filters or facets from this payload.

{
  "id": "f87e7603575a438e9c8a3af0f0c11206",
  "variations": {},
  "lastUpdatedBy": "eN5ERlll3vRab83WDgoFPIJM9jp2",
  "metrics": {
    "impressions": 0,
    "clicks": 0
  },
  "createdDate": 1643722997011,
  "meta": {
    "kind": "page",
    "hasLinks": false
  },
  "modelId": "b9544d8e828e4c188ab4585c72ede2ed",
  "ownerId": "6314dcbfce4d40698c53786a58829190",
  "@version": 3,
  "lastUpdated": 1643723175362,
  "data": {
    "title": "home",
    "blocksString": "[...]",
  "name": "home",
  "published": "archived",
  "createdBy": "eN5ERlll3vRab83WDgoFPIJM9jp2",
  "priority": 0,
  "testRatio": 1,
  "query": [
    {
      "operator": "is",
      "@type": "@builder.io/core:Query",
      "value": "/",
      "property": "urlPath"
    }
  ],
  "lastUpdateBy": null,
  "objectID": "f87e7603575a438e9c8a3af0f0c11206"
}

Adding the plugin

To add the plugin to your site, navigate to your Builder space and access account settings.

In the list of settings, click the pencil icon next to Plugins to add the Algolia Plugin.

👉 Tip: Note: If you don't see these settings, you may need to request access from your Builder administrator.

Next, add the new Algolia plugin by typing the following command into the Edit Plugins dialog shown below.

@builder.io/plugin-algolia

Adding your API keys

Open your Algolia Dashboard and navigate to your Account API Keys.

The first key that you will need is your Application ID. You will find it on the main API Keys page.

You will need to create the second key in the All API Keys tab. This is what Algolia calls a Restricted Key. Be careful with this key as it enables permissions for features besides search.

After selecting the All API Keys tab, click the New API Key button to open a modal dialog for creating your new API Key.

For this key you will need to add items to the access control list (ACL). Add search, addObject, and deleteObject. These allow Builder.io to connect to Algolia and make changes to your index. If you want to choose a specific index you can also select your Index under Indices.

Now that you have the correct keys, you can return to Builder.io and edit your Algolia plugin to include these new keys.

Your pages will now sync with Algolia any time they are published or unpublished.

Making changes to your plugin

If you ever have trouble with the plugin, or you would like to remove the integration you can always access the plugin settings to make changes. You can also purge your index on Algolia.

There are settings on your model type page that will allow you to re-sync or remove the webhook that's called.

Builder.io Algolia plugin GitHub repo

You will always find the most up-to-date code for the Algolia Plugin on our GitHub Repo.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Features

Pricing

What's New

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Headless CMS: Visual Guide

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Use Cases

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms