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. As an example, you might add
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.
The screenshot below is of the Create an API Key dialogue in Algolia with the description, an optional index (a Builder model name), and ACL fields filled in. This screenshot is a still image of the one in the demo video above and is included here for easier reference.
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.
After configuring the Algolia plugin and establishing a connection to Algolia, your Builder models will 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.
