Add advanced search and discovery capabilities to any Webflow site in minutes using Search.io's Crawler.
A collection in Search.io, stores an index of your website and all the information required to create a great search. Choose "Website" when prompted for your use-case and give your Collection a name in the next step.
Enter the URL to your Webflow website and kick back and relax. Search.io will complete the initial index in less than a minutes. Depending on the number of pages on your site, Search.io will continue the indexing process in the background.
After the initial index is complete, you will land on the dashboard. Once your search is up and running, the dashboard will display search analytics and the most popular search terms, helping you get a better understanding what your visitors are looking for.
This is the Search UI Designer. On the left you have a number of configuration options to adjust the filters and the look and feel of your search UI. On the right is a live preview, showing your search results.
In this guide we will install the search in overlay mode, which not only looks great but is also easy to install.
In the interface designer, choose the overlay option in the top left.
Further down in the Button selector field enter the selector of the link or the search bar that should trigger the search. For example, on the Search.io website we are using a text field with the class selector .search-box (shown in the UI as Search Box).
Lastly click the Install link at the bottom. Follow the instructions and copy the code. In Webflow, under Project Settings > Custom Code paste the code snippet you copied into the Footer Code section.
Preview your changes and make sure that the search works as expected. If you are happy with it, hit publish.
🎉 Congratulations, you now have a fancy new Search in your Webflow site!