How To
Voice Search

4min
﻿
Enable Klevu to use the browser's built-in microphone access to capture voice-dictated search queries
Important : Voice search is supported only in Google Chrome browser, version 26 and above and only works on HTTPS URLs.
﻿
To get the best out of voice search, we advise enabling Klevu's Advanced NLP feature for your store. Enabling the Advanced NLP feature will ensure Klevu is able to understand and interpret long tail queries (i.e. anything beyond 5 words in a single query). 
If you are not sure whether you have this feature enabled or not, please contact Klevu support  for further assistance on this option.
﻿
Display Options
The default display options can be customized using the below format:
var klevu_micOptions = {
  micImage: "<url-for-mic-image>",
  micAnimationImage: "<url-for-mic-animation-image>",
  voiceSearchPlaceholder: "<placeholder-message-for-voice-search>"  
 };
CSS can be applied to further adjust display to fit your needs
  <style>
    .klevuVoiceSearchImage {
      ...
    }
  </style>
﻿
Template JS implementation
The example below references an external reference to klevu-voicesearch.js that will tap into the browsers microphone access.
JavaScript
 <script type="text/javascript">
    /* required to accmodate Klevu Template JS */
    var klevu_layout = true;
  </script>

  <script type="text/javascript" src="https://js.klevu.com/klevu-js-v1/js/klevu-voicesearch.js"></script>

  <script type="text/javascript">
    (function () {
      /* example options modifications */
      var klevu_micOptions = {
        micImage: "https://js.klevu.com/klevu-js-v1/img-1-1/speech.png",
        micAnimationImage: "https://js.klevu.com/klevu-js-v1/img-1-1/mic-animate.gif",
        voiceSearchPlaceholder: "Listening..."
      };
      klevu_voiceSearch.init(klevu_micOptions);
    })();
  </script>
  <style>
    .klevuVoiceSearchImage {
      position: absolute;
      right: 34px;
      top: 50%;
      line-height: 24px;
      cursor: pointer;
      width: 24px;
      height: 24px;
      background: #ededed;
      border-radius: 50px;
      padding: 3px;
      margin-top: -12px;
      box-sizing: border-box;
    }
  </style>
 <script type="text/javascript">
    /* required to accmodate Klevu Template JS */
    var klevu_layout = true;
  </script>

  <script type="text/javascript" src="https://js.klevu.com/klevu-js-v1/js/klevu-voicesearch.js"></script>

  <script type="text/javascript">
    (function () {
      /* example options modifications */
      var klevu_micOptions = {
        micImage: "https://js.klevu.com/klevu-js-v1/img-1-1/speech.png",
        micAnimationImage: "https://js.klevu.com/klevu-js-v1/img-1-1/mic-animate.gif",
        voiceSearchPlaceholder: "Listening..."
      };
      klevu_voiceSearch.init(klevu_micOptions);
    })();
  </script>
  <style>
    .klevuVoiceSearchImage {
      position: absolute;
      right: 34px;
      top: 50%;
      line-height: 24px;
      cursor: pointer;
      width: 24px;
      height: 24px;
      background: #ededed;
      border-radius: 50px;
      padding: 3px;
      margin-top: -12px;
      box-sizing: border-box;
    }
  </style>
﻿
 
Updated 30 Oct 2023
Did this page help you?
SortBy Options
Compare Products on Results Page
Voice Search

Display Options

﻿

Template JS implementation
