This tutorial outlines how to add Sajari site search to Webflow in less than 15 minutes.
1. Create a Sajari account
To get started, you will need sign up to Sajari. Click the Sign up button on the website and follow the instructions to create your account.
2. Create a Website collection
A collection in Sajari, 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.
3. Index your site
Enter the URL to your Webflow website and kick back and relax. Sajari will complete the initial index in less than a minute. Depending on the number of pages on your site, Sajari will continue the indexing process in the background.
4. Designing the Search UI
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 of what your visitors are looking for.
Now it’s time to install the search UI into your store. Click in the Integrate link at the bottom of the left-hand navigation.
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.
5. Installing the Search UI
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 Sajari 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.
6. Preview & publish
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!