Advanced Algolia Search 🕵️

Easy to use plugin to implement blazing fast search through thousands of data records.

🔗 Links

Demo | Editor

Plugin Page

Forum

ℹ️ Introduction

This plugin is the easiest way to bring blazing fast search using Algolia into your Bubble app.

What Is Algolia?

Your users almost certainly use at least one of YouTube, Amazon, and Facebook. An essential feature that these big websites share is great search. The reason they have great search is because they have hundreds (if not thousands) of people working on it full-time.

Because your users are constantly exposed to great search on these platforms, they expect to find it on every site and application that they use. But your company isn’t a search company: it doesn’t make sense for you to hire a dedicated team of developers to reinvent search.

Algolia provides software and tools to help you implement efficient, flexible, and insightful search on your sites and applications.

What can Algolia do for my users?

Algolia provides your users with a fast and rich search experience. Your Algolia search interface can contain a search bar, filters, infinite scrolling, query suggestions, sorting, refinements, etc. These help your users find what they’re looking for and discover new products.

Find more info about Algolia here.

📚 Documentation

Pre-requirements (5 minutes)

1. Go to https://www.algolia.com and create an account

2. Navigate to your Algolia Dashboard and create a new index here:

3. Now you need to populate the newly created index with data. You can import your database data directly or use a sample dataset:

4. Go to API keys page and copy your Application ID and Search-Only API key.

Please do not use the Admin API Key and keep it secret.

Plugin Configuration (2 minutes)

Install the Advanced Algolia Search plugin. Paste your keys directly on the plugin page:

Now add the Algolia Search element into your app. Insert your Index name. For the Data type please choose Algolia (Search Result). This field is used internally by the plugin.

You are ready to make your first search!

Searching the data

Plugin provides you a very straightforward way to search the data. Just call the Search action (for example, when user clicked a search button or search input value changed):

Field	Type	Description
Query	String	String to search
Attributes to retrieve	String	Comma-separated values. Example: "name, description, price". Attributes are the field names in your data structure.
Page	Number	Page to retrieve (starting from 0)
Results per page	Number	Number of records per page

Once Algolia returns the search results, you can access the Result shared state:

It provides you a set of fields:

Field	Type	Description
processingTimeMs	Number	Query processing time (ms)
page	Number	Current page index (starting from 0)
nbPages	Number	Total pages number in the final result
nbHits	Number	Total number of found results
hitsPerPage	Number	Number of results on the current page
field1 .. field20	Array of Strings	Requested data attributes (in the order defined by Attributes to retrieve field).

FieldN is an array of strings. For example:

• field1 (id): ["123", "542", "941"]

• field2 (name): ["iPhone", "Android", "Samsung"]

• ...

Therefore you can iterate over arrays to display your data in tables, Repeating Groups etc.

Sending the data to Algolia

There are several ways to push your data to an Algolia index:

• Using the Algolia dashboard by sending a JSON file.

• Using a Plugin action "Send Data" as explained below.

1. From your workflow call the "Send Data" action

2. Provide the index name, your APP ID and Admin API Key

3. Provide the object fields (name, age and country in the example above)

4. The returned object has 2 fields: error (Yes/No) and message (text)