Integrate Algolia

Ask us anything How do I?
1

Hi everyone!

I’m working on a digital content marketplace project right now and I would like to know if anyone was able to integrate Algolia for the search function?

Any ideas would be great! TIA

1 Like
2

Hi,
are you comfortable with a bit of code?
Weweb elements are Vue components + some conventions specific to the platform.

You can integrate the algolia libraries creating a custom element. Algolia has also a library of vue components that you can use in the custom element.

You can have a look to the developer docs to have an idea of the process.

Feel free to ask if you have any questions.

3

im not that comfortable though. anyways, thanks for guiding me in the right direction.

4

Hi @cbpcanda :wave:

We added your request to our public roadmap to help us prioritize it.

No need to upvote it on your side, we’ve already logged your upvote :slight_smile:

1 Like
5

thank you @Joyce . that’s highly appreciated

1 Like
6

@cbpcanda I have been working on Algolia integration the past two days. There are two main things that you need to achieve:

  • Send your data to Algolia to index. Indexing is something that search engines do on a database to make querying blazing fast. I’m using Xano as my backend for Weweb so I set up a simple function that sends the data to an Algolia URL with my API key (Algolia only accepts JSON format). Once you get this going, you’ll be able to start seeing the blazing fast search experience on your data on the Algolia dashboard, which is quite amazing!

  • Next you need to bring this experience to your website. Algolia has a library called Instantsearch.js whose documentation you can go through and basically hack your way through by cutting and pasting snippets if you understand some HTML/CSS/JS. I used the REST API (basically urls) documentation instead of the API CLIENT because it was my first time building anything with APIs.

Use a code editor like Visual Studio to create an HTML file that contains all the snippets and urls.

Finally, you’ll need to put this content in the custom code section of your website. And some code will be in HTML embed elements. You’ll need a paid plan to publish your site to view if the custom code is working properly! This should be easy though.

Please let me know if you have any queries, I’ll try my best to help you!

2 Likes
7

Thank you so much @switchfuseunit . This is very helpful. I’m not that well versed though with hard coding (custom code) but I guess our hard coding guys can get some insights from this. :slight_smile:

1 Like
8

FYI for anyone looking to use WeWeb’s Algolia data source - there is currently a confirmed WeWeb bug you should be aware of.

If you bind a search parameter and then unbind it, the “Add” button becomes nonfunctional.

image

The only way to fix it is to delete the collection and start over, which obviously isn’t ideal.

So be very careful before binding a search parameter until WeWeb resolves this issue.

This bug was reported on 8/29, 47 days ago, hopefully will get resolved soon!

1 Like
9

Hi @ryanev

This issue will be fixed tomorrow.

1 Like
10

Awesome news, thanks @danlopes!

I’ve been patiently waiting nearly two months for this WeWeb platform bug to get resolved, so it’s great to have an end in sight!

1 Like
11

Team @ryanev for the win!!! Who says persistence doesn’t pay off? :slight_smile: On behalf of the community, THANK YOU!!!

1 Like
12

Patience pays off - I just confirmed that WeWeb’s native Algolia data connector is back working again!

Thanks WeWeb team!

PS: for anyone that hasn’t looked into Algolia, it’s a great way to build a powerful and super performant search functionality into any WeWeb web app!