# Advanced Algolia Search 🕵️

## 🔗 Links

> [Demo](https://algoliasearch.bubbleapps.io/version-test) | [Editor](https://bubble.io/page?name=index\&id=algoliasearch\&tab=tabs-1)

> [Plugin Page](https://bubble.io/plugin/advanced-algolia-search-1620829006228x939199669208350700)

> [Forum](https://forum.bubble.io/t/plugin-advanced-algolia-search/151196)

## ℹ️ Introduction

This plugin is the easiest way to bring blazing fast search using [Algolia](https://www.algolia.com) 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](https://www.algolia.com/doc/guides/getting-started/what-is-algolia/).

## 📚 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:

![](/files/-M_fJEFyT8aIHt4vaq-P)

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

![](/files/-M_fJgNw-gcDvNfQguQg)

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:

![](/files/-M_fLT3ra_-xMlevayCI)

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.

![](/files/-M_fKwhH7eGijRjGE22n)

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):

![](/files/-M_fMeas9mdjwkoT1Pe5)

| 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:

![](/files/-M_fNyHz57ZRxZJJ7_8H)

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.

![](/files/-M_z4aPdSHxt8p7WLmB7)

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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bubble.digital-bird.com/plugins/algolia-search.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.