JS Fiddle Embed/ Algolia Search - Javascript

Design help Custom code
1

Hi,
I’m trying to add a JS Fiddle element to my page but really struggling to get it to work. Basically trying to integrate an Algolia search into my page and this seems like the easiest way. I would think there are a lot of people looking for search functionality and I’d prefer to use algolia compared to other versions posted on the webflow blog.

The JS Fiddle element is here

Preview link is here and the page I’m trying to alter is ‘Old Home 2’ (Second in page list)

I’ve tried to follow the guidance on embedding JS fiddle from the post here but it differs as there’s no source ID, I’ve tried to give different elements and ID and use script tags to no avail.

Any advice greatly appreciated (I also realise that the data is just a sample, I’ll upload my own to Algolia if this is successful).

2

Three external resources, place in page footer

<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch-theme-algolia.min.css" />

Everything in the JavaScript section, place after the three scripts above, and wrap between
<script> </script> tags

Re-create everything in “HTML” section in the designer by dragging and dropping them into the document. Use the same IDs in the settings tab.

Also, feel free to contact me for further code help and/or customization of third-party plugins

3

That’s brilliant. Thank you for the help!

This helped provide an understanding of how to connect to my own Algolia index and have the feed coming through. I’ve been playing around and followed the guide here.

One final request - do you know how I can get rid of the two search boxes that appear? Still need to reformat but this is the live page here

Once this is sorted then I’ll put together a guide on building search easily into a webflow site.

4

All sorted - I will start putting together a guide for Algolia soon

1 Like
5

Ping me when you have your guide @cbailey :slight_smile: thanks!

1 Like
6

Same @cbailey - cant wait for Algolia guide, will be very much appreciated!

1 Like