Voice searches

08 Jul, 2024 Configuration

What is Voice search?

Voice Search will allow your website visitors to search via speech-to-text. This feature adds a microphone icon to your search bar. When clicked, the user will be prompted to record what they wish to search for. When the prompt ends, the search will be initiated.

Voice Search activity is tracked for your MyCludo analytics for you to see which searches were done via Voice Search and whether they were successful.

If Voice Search is a part of your subscription, you can follow this guide to implement Voice Search in one simple step.
If you wish to add Voice Search to your Cludo subscription, do not hesitate to reach out!

Note: As the Voice Search feature is based on Web Speech API, it is not supported by all browsers. Please note that as of now, the feature is not available on Firefox. Go here for an up-to-date view of which browsers support SpeechRecognition and thereby Voice Search.

How to implement Voice search

To enable the Voice Search feature, add the following value to the cludoSettings object of your search script:

enableVoiceSearch: true

For context, here’s an example of what the full code snippet could look like:

<script type="text/javascript" src="//customer.cludo.com/scripts/bundles/search-script.min.js"></script>
    <script>
        var CludoSearch;
        (function () {
            var cludoSettings = {
                customerId: XXXX,
                engineId: XXXX,
                searchUrl: "/search/",
                searchInputs: ["cludo-search-form"],
                loading: "<img src='//customer.cludo.com/img/loading.gif' class='loading' />",
                enableVoiceSearch: true
            };
            CludoSearch = new Cludo(cludoSettings);
            CludoSearch.init();
        })();
</script>

Note: The Voice Search feature is based on WebSpeech API, which is not supported by all browsers. Please note that as of now, the feature is not available on Firefox. Go here for an up-to-date view of which browsers support voice search.

How to style Voice search

Once Voice Search is implemented on a website, it is possible to use the following CSS selectors and cludoSettings to style how elements should appear on the website.

Disable voice search animation

disableVoiceSearchActiveAnimation: true

Voice icon button

.cludo-voice-icon {
  /* Insert styling */
}

Voice icon

.cludo-voice-icon svg {
  /* Insert styling */
}

Voice icon SVG path

.cludo-voice-icon path{
  /* Insert styling */
}

Active voice search icon

.cludo-voice-active:after{
  /* Insert styling */
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  box-shadow: 0 0 8px rgb(0 0 0 / 30%);
  animation: pulse-dot 1.25s cubic-bezier(.455,.03,.515,.955) -.4s infinite;
}

Tags:  

Related Posts