website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Quickstart : Moi
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Templates
Modify Request
Modify Response
Modify Recommendations
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Facet Option Order
Facet Show/Hide
Infinite Scroll Results
Items Per Page
Magento B2B MSI
Multi-Currency
Ratings / Reviews
Recs Fallback Query
SortBy Options
Voice Search
Docs powered by
Archbee
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>


Updated 11 Jul 2023
Did this page help you?
PREVIOUS
SortBy Options
Docs powered by
Archbee
TABLE OF CONTENTS
Display Options
Template JS implementation
Docs powered by
Archbee