How can I integrate voice search?

1. Voice search is supported only in Google Chrome browser, version 26 and above and only works on HTTPS URLs.
2. 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 us at support@klevu.com.

1. Javascript Changes

M1 / Magento 1

1. Open file: \app\design\frontend\base\default\template\klevu\search\form_js.phtml
2. Add the below script at the end of the file.
3. Save the file.

M2 / Magento 2

1. Open \vendor\klevu\module-productsearch\view\frontend\templates\klevu\search\form_js.phtml
2. Add the below script at the end of the file.
3. Save the file.

For a Shopify store:

1.  Login into Shopify Admin
2. Go to Online Store → Select Action - Edit code
3. Go to Edit layout
4. Open theme.liquid file
5. Add the below script before tag
6. Save the file.

For Other Platforms:

1. Please include the following Javascript on your store before closing the body tag.

The JavaScript:

Options :

micImage : URL for mic image to be shown in the search input field. micAnimationImage : URL for the animated image which is shown after someone clicks the micImage. The recommended size for the mic images is 32X32 pixels.voiceSearchPlaceholder : Placeholder to show in search input field after someone clicks the micImage. Default is "Listening..."

2. CSS Changes:

Please include the following CSS at your end,

.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;
}

Note: Depending on the store's UI, you may have to update the mic icon's CSS for setting its position in the search box correctly.