Modern search is about accessibility and speed. Relevanssi now includes a Voice Search feature that allows your visitors to search your site using their microphone. Instead of typing, they simply click a microphone icon and speak their query directly into the search bar.
This feature is powered by the Web Speech API. It is a “progressive enhancement” feature, meaning it stays out of the way if a browser doesn’t support it, but provides a high-end experience for users on modern browsers like Chrome, Edge, and Safari.
How to enable Voice Search
Voice search is disabled by default. You can enable it from the Relevanssi settings page under the “Searching” tab. There are three main controls for this feature:
- Voice search: Toggles the microphone icon on or off for all search forms on your site.
- Voice search autosubmit: If enabled, Relevanssi will automatically trigger the search once the user stops talking. If disabled, the text will stay in the search bar for the user to review before they manually click search.
- Voice search CSS: This enqueues a small stylesheet that positions the microphone icon inside your search bar. If your theme has a very unique layout and the icon looks misplaced, you can disable this and provide your own CSS.
Privacy and Local Processing
Relevanssi prioritizes user privacy by attempting to use on-device speech processing first. If the user’s device has the necessary language packs installed (common on modern mobile devices and macOS), the audio never leaves the user’s computer.
If local processing isn’t available, the browser will automatically fall back to a cloud-based recognition service (such as Google or Apple). This ensures that voice search works reliably across as many devices as possible.
Customizing the look
By default, Relevanssi attempts to place the microphone icon inside the right edge of your search field. It includes specific overrides for Gutenberg Search Blocks and Elementor search forms to ensure a perfect fit.
If you wish to customize the appearance, you can use the following CSS classes in your theme:
.relevanssi-voice-search-wrapper: The container around the search input..relevanssi-mic-button: The actual microphone button..is-active: A class added to the button while it is “listening.”.is-talking: A class added when the API specifically detects a human voice.
Browser Support
Voice search is currently supported by Chrome, Edge, and Safari. Because the technology requires a secure connection, voice search will only appear on sites running over HTTPS. Here is the list of compatible browsers.
Note on Firefox: As of now, Firefox does not support the Web Speech API. Relevanssi detects this and will silently hide the microphone icon on Firefox to ensure your site layout remains clean and consistent for those users.
