Add Voice Search to Your Website with a Few Lines of Code

Add Voice Search to Your Website with a Few Lines of Code

Speechly turns tedious category filters and search refiners into efficient and natural voice search experience.

Just want to develop? Click here

Voice search means for most optimizing your website to support natural language queries. This is important, because many are searching on Google by using voice instead of typing and typically these queries are somewhat different.

For instance, searching for the population of US by typing the keywords might result in a query such as "us population" whereas searching for the same thing by voice might be natural by asking "what is the population of the United States?". In fact, already 20% of Google App searches are done by using voice.

However, when the user eventually lands to a page they were looking for by using their voice, they are back to the "old-school" way of operating websites. Instead of voice, they'll have to resort to typing, clicking and scrolling.

While most of us are very familiar with those UI patterns, they are nowhere near perfect. A typical eCommerce search with a few category filters (such as blue Nike t-shirts in size large for men) takes easily around half a minute or more, even for a somewhat experienced user.

This is because the order, names, and even the existence of these filters vary widely in eCommerce stores. Some stores don't offer color filters, some categorize t-shirts under shirts and some have a separate category for them and so on. Sometimes the filters are on the sidebar, sometimes on top and sometimes they require opening a hamburger menu.

What if this tedious filtering could be replaced with voice? Let's see an example.

{% youtube Q2gwzTWADns %}

Voice is a very natural way for creating search experiences. While a text-based menu can't include all the synonyms because of lack of screen real estate, voice UI can support as many synonyms and different ways to express things as required. As the filters are updated in real time as the user keeps on speaking, the user gets visual feedback and is encouraged to go on with filtering. On the other hand, if they misspeak or if the system recognizes something wrong, they can naturally correct themselves.

We have created a fully streaming voice UI API that enables building this kind of experiences very easily. Instead of the traditional "voice assistant" style that resembles Microsoft's Clippy, our solution is based on directly manipulating the graphical user interface with voice.

As most of the eCommerce stores have already implemented some kind of a category filtering, adding Speechly enables their users to replace searching and selecting for the correct filters by simply saying out loud their preferences. The user interface stays the same and doesn't require any other updates than adding the microphone button. We even provide a customizable microphone button for easy integration.

We have productized voice search as a very simple solution that enables developers to add voice search to their website in a few lines of code. We have also created a demo to showcase a real-life application using this pattern. You can try out the demo here.

Instructions for integrating voice search to your website can be found here. There's also a simple Codepen example that you can edit yourself and see the full code for a simple implementation.

You can use Speechly for free for up to 20 hours a month. If you need any help creating your models or integrating it, you can contact our support at [email protected].

Would be great to hear your thoughts!

voice javascript react search frontend

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Javascript String Search: How to Search String in JavaScript

Javascript String search() is an inbuilt function that executes the search for a match between a regular expression and this String object.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

React.js Redux Github API Username Search With Repositories Data Using React Router in Javascript

React.js Redux Github API Username Search With Repositories Data Using React Router in Javascript

Search Filter React Tutorial - Search Bar in React

In this React tutorial, I will teach you guys how to make a Search Bar with a Search Filter in React. The values are filtered as you write on the search bar, and you are able to find the information you need.