Real-Time Search in Webflow using Jetboost
In the world of web development, every project comes with its unique set of challenges and opportunities. Recently, I had the chance to work on a fascinating project that required implementing a search functionality for the FAQs page. While I had prior experience with a similar feature on Wix, the current project was on Webflow, and it proved to be a different ballgame. The native search feature in Webflow wasn’t yielding the results I wanted, prompting me to embark on a quest to find the perfect solution. That’s when I discovered Jetboost, a game-changing third-party tool that made real-time search a reality. Join me as I recount my journey of integrating Jetboost into Webflow and achieving the seamless real-time search experience I envisioned.
Understanding Jetboost and Real-Time Search
Jetboost is a feature-rich platform that extends Webflow’s capabilities, enabling users to implement advanced functionalities without complex coding. Real-time search is one such feature that lets visitors search through your website’s content instantaneously, enhancing navigation and user satisfaction.
Use Case
Prior to delving further, it’s important to note that certain websites, such as Google, LinkedIn, todaytvseries, Netflix, and others, offer this particular feature. As you conduct your search, these websites utilize their extensive databases to filter and provide highly accurate and relevant results based on your queries.
Here’s a sample: https://drive.google.com/file/d/1G94ZX2btuKs3qA231NszVU2-o1q-kGbd/view?usp=sharing
Things to note before using this third-party application:
- Use the same email for both webflow and Jetboost for synchronization between both applications.
- Real-time search would only work with CMS. In this case, we want to search in FAQs section, so we have to ensure your question and answers are collated in CMS and already on the FAQs page.
- Ensure you’ve subscribed to webflow' s CMS and workspace plan
So, without further ado, let’s jump right into this.
- Authentication
Register and log in using your Google account for a quicker and simpler process. Once done, Jetboost will request authorization to link with your Webflow account. Remember to use the same email for both Jetboost login and your Webflow account to ensure better synchronization.
- Boosters
After webflow authorization, then you can start adding boosters to your site. But for the purpose of this article, we’ll be looking at “Real-Time List Search”
- Settings
After adding boosters, you’d select what collection list from your CMS you want to use this booster on. For our case we’re using FAQs collection which has been documented in CMS. If you do not see your collection, check your webflow. Then you can proceed to adding filter type.
- Jetboost Script
Click on the link to be redirected to the Custom code section of your Webflow. Copy the script from Jetboost and paste it directly into Webflow. Then proceed to publish the staging site. If you encounter any difficulties, you can watch a short video on Webflow that will guide you on how to complete the process.
- Collection List
In the Webflow designer, find the CMS collection that you used for your FAQs list wrapper element. Copy the first class from that collection and add it to the current class of the list wrapper. This action will allow Jetboost to interact and locate the specific data.
Next, insert an embedded element within your collection item. Copy the provided code and paste it into the embed code editor, then save your changes.
Crucially, ensure that you include the name of the page in Webflow where you are applying these boosters. Failing to do so will result in errors, as Jetboost won’t be able to locate the page accurately.
If you encounter any lingering difficulties with this section, refer to the videos provided by Jetboost for additional guidance. Should the issues persist, don’t hesitate to reach out to Jetboost support for further assistance.
- Search Box
Place a form block on your page with a single input field and hide the submit button. By doing so, users won’t be prompted to click enter, allowing the results to show automatically as the search is being performed, enabling automatic filtering. Then, duplicate this style and add it to the input class.
Verify that the page is correct as mentioned in number 2. Once you have confirmed it, proceed to conduct the testing phase.
- Final Checks
We have completed all the necessary steps. Now you can preview the website on Webflow to verify if the booster is working as intended. Congratulations, we have achieved success!
Conclusion
Engaging in this project has been an extraordinary learning journey for me. It served as a powerful reminder that within the constantly evolving realm of web development, challenges present opportunities in disguise. The discovery of Jetboost and witnessing its profound impact on the Webflow project underscored the importance of exploring innovative solutions beyond the conventional toolkit. With the invaluable support from Jetboost’s team, not only did I successfully implement the desired real-time search functionality, but I also cultivated a newfound confidence in embracing new technologies and expanding my skill set.
As you set out on your web development journey, always keep in mind that embracing novel tools can lead to extraordinary outcomes, and the entire experience is a pathway of growth and success. Happy developing!
Follow me on social media:
- Twitter: @bode_tamara
- Behance: @tamarabode_
- LinkedIn: Tamara-Bode
- Portfolio: Tamaraa
