---
title: Voice Search
slug: template-js/voice-search
docTags: 
createdAt: 2023-06-16T12:37:18.000Z
---



Enable Klevu to use the browser's built-in microphone access to capture voice-dictated search queries

:::hint{type="warning"}
**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](https://help.klevu.com/support/tickets/new)  for further assistance on this option.



## Display Options

The default display options can be customized using the below format:

:::BlockQuote
var klevu\_micOptions = \{
&#x20; micImage: "\<url-for-mic-image>",
&#x20; micAnimationImage: "\<url-for-mic-animation-image>",
&#x20; voiceSearchPlaceholder: "\<placeholder-message-for-voice-search>" &#x20;
&#x20;};
:::

CSS can be applied to further adjust display to fit your needs

:::BlockQuote
&#x20; \<style>
&#x20;   .klevuVoiceSearchImage \{
&#x20;     ...
&#x20;   }
&#x20; \</style>
:::

#

## Template JS implementation

The example below references an external reference to `klevu-voicesearch.js` that will tap into the browsers microphone access.

:::CodeblockTabs
JavaScript

```html
 <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>
```
:::

&#x20;