How To
Voice Search

5min
﻿
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 11 Jul 2023
Did this page help you?
TABLE OF CONTENTS
Template JS implementation
Voice Search

Display Options

﻿

Template JS implementation
