How To Add Voice Search on Wapkiz Site

Make your search box advance by adding a voice search icon.

• 

Just add below codes as mentioned…

External CSS

Go to Meta Header under System and add below font-awesome stylesheet

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

CSS

Go to Css Theme under System and add below css

.searchContainer {display: inline-flex;  flex: 1 1 300px; position: relative; border: 1px solid #ccc; border-radius: 5px; overflow: hidden;}
.searchIcon {padding: 0.5rem;}
.searchBox {border: 0; padding: 0.5rem 0.5rem 0.5rem 0; flex: 1;}
.searchButton {background: #538AC5; border: 0; color: white; padding: 0.6rem; border-radius: 0;}

JavaScript

Add below javascript where you will add search box

<!-- Voice Search by www.Wapmash.xyz -->
<script>  function startDictation() {    if (window.hasOwnProperty("webkitSpeechRecognition")) {      var recognition = new webkitSpeechRecognition();      recognition.continuous = false;      recognition.interimResults = false;      recognition.lang = "En-IN";      recognition.start();      recognition.onresult = function(e) {        document.getElementById("transcriptt").value                                 = e.results[0][0].transcript;        recognition.stop();        document.getElementById("voicesearch")      };      recognition.onerror = function(e) {        recognition.stop();      }    }  }</script>

HTML

Now add below Search box html code

<div class="searchContainer"><form id="voicesearch" method="get" action="/site-search.html">  <i onclick="startDictation()" class="fa fa-microphone searchIcon"></i>  <input class="searchBox" type="search" name="to-search" id="transcriptt" value=":to-search:" placeholder="Search...">  <input type="submit" value="Search" class="searchButton"></form></div>

Note: Voice search only work when you activate SSL ( https:// ) on your site.

Any inquires feel free to comment below.