Use the Builder Algolia plugin to integrate Algolia, a powerful search engine API, into your Builder app. By connecting Builder.io with Algolia, you can enhance your application's search and recommendation capabilities and improve user experience (UX).
The video below shows the complete process for setting up the algolia plugin and connecting your Algolia account with Builder. Detailed written instructions follow the video further down the page.
To use Algolia with Builder, you need to create a restricted API key. Be careful with this key as it enables permissions for features besides search.
To create a restricted key in Algolia:
- Go to your account settings for Algolia.
- Go to API Keys.
- Go to the All API Keys tab.
- Click the New API Key button.
- In the dialogue that opens, add a description of your API, for example, API Key for connecting to Builder.
- Optional: add an index or indices. An index in Algolia corresponds to a model in Builder, prefixed with the text
builder-. For example, you might addbuilder-pageif you want to sync your Builder Page model. You can leave it blank to sync all models. - In the access control list (ACL) field near the bottom, add search, addObject, and deleteObject. These allow Builder.io to connect to Algolia and make changes to your index.
- Click the Create button.
- When you've created the API Key for your Builder model, copy the API Key and head back to Builder.
The following video shows creating an API Key in Algolia from the Settings page.
Syncing Builder models (Algolia indices)
Builder models are known as indices in Algolia.
The specific models that get synchronized with Algolia depend on what you specify as the index in the Indices field within Algolia. If you specify a particular Builder model, the synchronization only applies to that model. If you don't specify any models (or indices in Algolia), all models sync.
All models in Algolia must be prefixed with builder-, such as builder-page.
After configuring the Algolia plugin and establishing a connection to Algolia, your Builder models automatically synchronize with Algolia when you publish or unpublish content.
For more information, visit Intro to Models.
To add the Algolia plugin:
- Go to Plugins in Builder.
- In the Algolia tile, set toggle to the on position.
- If a Settings button doesn't appear on the Algolia tile, refresh the page. Click on the Settings button.
- In the dialogue that opens, add the API Key you created for syncing with Builder and your Algolia App ID available in your Algolia account settings.
- Click Save.
- Go to Models and open the model you specified in Algolia.
- In the Advanced tab, click Sync next to Sync to Algolia.
- Accept the requests for access.
- To view or edit the resulting Webhook, click Edit, next to Webhooks.
The video below shows this process using a Page model as an example.
Below is an example of the payload that is delivered to Algolia. You can set up filters or facets using this payload shape as a reference.
{
"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"
}For even more functionality, you can use Algolia's JavaScript API Client or a library such as InstantSearch.
For the most up-to-date code for the Algolia Plugin, visit Builder's GitHub Repo.