Como podemos ajudar?

Encontre os artigos que irão ajudá-lo a melhorar sua loja virtual

Produtos
Filtros da busca:
Filtrando por:

FC 15058 :: Como buscar na loja virtual usando a voz?

Veja como ativar a busca por produtos e notícias no mobile através da voz.

Buscar por voz no celular é mais fácil do que usar o teclado, melhorando a usabilidade e a acessibilidade da loja virtual.

Ao contrário das buscas digitadas que geralmente são simples (tênis nike), as buscas por voz costumam ser mais detalhadas (tênis nike feminino tamanho 37 cor laranja). Por isto as buscas por voz ajudam a entender melhor o usuário e trazem resultados mais relevantes.

Os termos ditados por voz ajudarão também na criação de palavras-chaves (long tail) nos nomes, títulos e descrições dos produtos.

Veja como implementar:


1º Passo

No arquivo barratopo.htm localize o form referente à busca. Verifique se existem IDs na tag <form id="autocomplete-form"> e no <input id="autocomplete">

<form name="TopSearchForm" method="GET" id="autocomplete-form" action="/listaprodutos.asp">
<input type="text" id="autocomplete" value="<SearchText>" name="Texto" class="InputTextBusca" placeholder="Digite sua busca aqui">

Se não existirem estes IDs, será necessário criá-los. Se já existirem, anote os nomes dos IDs existentes. Eles serão usados no script do 5º passo.


2º Passo

Abaixo do <input id="autocomplete"> insira o ícone do microfone.

<input type="text" id="autocomplete" value="<SearchText>" name="Texto" class="InputTextBusca" placeholder="Digite sua busca aqui">
<img class="header-speech-icon" id="voiceSearch" onclick="fnStartDictation()" src="<BaseLoja>images/icon-speech.svg?cccfc=1" width="30" height="30" alt="Fale" />

3º Passo

Insira o ID id="voiceSearchMGlass" no ícone da lupa ou no botão referente à busca.

<img src="<BaseLoja>images/iconsearch.svg?cccfc=1" width="25" height="25" alt="Buscar" id="voiceSearchMGlass">

4º Passo

A tag <form> está dentro de uma <div>. Insira a classe speech dentro dessa <div>.

<div class="fc-header-form speech">
<form name="TopSearchForm" method="GET" id="autocomplete-form" action="/listaprodutos.asp">

5º Passo

No final do arquivo lojalib.js inclua os scripts abaixo:

//Voice Search
function fnStartDictation(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = "pt-BR";
    recognition.start();
    recognition.onresult = function(e) {
      document.getElementById('autocomplete').value = e.results[0][0].transcript;
      recognition.stop();
      document.getElementById('autocomplete-form').submit();
    };
    recognition.onerror = function(e) {
      recognition.stop();
    }
  }
}

/* Disable Speech Recognition IOS  */
function fnSpeechRecognitionIOS(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    document.getElementById("voiceSearch").style.display="block";
  }else{
    document.getElementById("voiceSearch").style.display="none";
    document.getElementById("voiceSearchMGlass").style.display="block";
  }
}

Obs: No código acima os IDs estão em negrito. Verifique no seu form se são os mesmos nomes anotados no 1º passo.


6º Passo

No final do arquivo rodape.htm insira a chamada da função fnSpeechRecognitionIOS().

<script>fnSpeechRecognitionIOS();</script>

7º Passo

No arquivo lojasite.css inclua o CSS abaixo:

/* Voice Search */
.speech .header-speech-icon{display:none;}
@media only screen and(max-width:640px){
.speech .header-speech-icon{float:right;display:block;position:relative;top:1px;left:-10px;}
button#search-button img{display:none;}
}

8º Passo

Clique aqui para baixar os ícones utilizados neste procedimento. Envie este arquivo ZIP para a pasta IMAGES, onde ele será automaticamente descompactado.


Obs: Se sua loja utiliza nossos modelos de design, siga os passos abaixo:

Modelo

Versão Desktop Responsivo


Arquivo: barratopo.htm

<form name="TopSearchForm" method="GET" id="autocomplete-form" action="/listaprodutos.asp">
  <input type="hidden" name="idloja" value="<IDLojaNum>">
  <input type="hidden" name="digitada" value="true">
  <div class="HeaderSearchFC">
    <div id="DivSearch" class="collapse">
      <div class="col-small-9 col-medium-9 col-large-9 col-xlarge-9">
        <input type="text" id="autocomplete" value="<SearchText>" name="Texto" class="InputTextBusca" placeholder="Digite sua busca aqui">
      </div>
      <div class="col-small-3 col-medium-3 col-large-3 col-xlarge-3 speech">
        <a href="#search" class="btn1 btn-sent HeaderIconSearchButtonFC">
          <img class="header-speech-icon" id="voiceSearch" onclick="fnStartDictation()" src="<BaseLoja>images/icon-speech.svg?cccfc=1" width="30" height="30" alt="Fale" />
          <span class="HeaderSerachIMGIconFC" onclick="sF$.fnSearchSubmit(document.TopSearchForm);"><img id="voiceSearchMGlass" src="<BaseLoja>images/iconsearch.svg" width="25" height="25" alt="Buscar" title="Buscar"></span>
        </a>
      </div>
    </div>
  </div>
</form>

Arquivo: rodape.js

<script>
//Voice Search
function fnStartDictation(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = "pt-BR";
    recognition.start();
    recognition.onresult = function(e) {
      document.getElementById('autocomplete').value = e.results[0][0].transcript;
      recognition.stop();
      document.getElementById('autocomplete-form').submit();
    };
    recognition.onerror = function(e) {
      recognition.stop();
    }
  }
}

/* Disable Speech Recognition IOS  */
function fnSpeechRecognitionIOS(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    document.getElementById("voiceSearch").style.display="block";
  }else{
    document.getElementById("voiceSearch").style.display="none";
    document.getElementById("voiceSearchMGlass").style.display="block";
    document.getElementById("voiceSearchMGlass").style.position="relative";
    document.getElementById("voiceSearchMGlass").style.left="15px";
  }
}
fnSpeechRecognitionIOS();</script>

Arquivo: lojasite.css

/* Voice Search */
.speech .header-speech-icon{display:none;}
@media only screen and (max-width:640px){
.speech .header-speech-icon{float:right;display:block;position:relative;top:5px;left:-8px;width:23px;height:23px;}
#voiceSearchMGlass{position:relative;top:3px;left:-5px;width:20px;height:20px;}
}
@media only screen and (min-width:641px) and (max-width:1024px) {
.speech .header-speech-icon{display:none!important}
.HeaderSerachIMGIconFC img{display:block!important;position:relative;left:12px;}
}
@media only screen and (min-width:1025px){
.speech .header-speech-icon{display:none!important}
.HeaderSerachIMGIconFC img{display:block!important;position:relative;left:12px;}
}

Versão Mobile


Arquivo: mbhbarratopo.htm

<div class="amp-search-container speech">
  <form name="TopSearchForm" id="autocomplete-form" method="GET" target="_top" action="/listaprodutos.asp">
    <input type="hidden" name="idloja" value="<IDLoja>">
    <input type="hidden" name="digitada" value="true">
    <input type="text" id="autocomplete" value="<SearchText>" name="Texto" class="InputTextBusca amp-search-input" placeholder="Digite sua busca aqui">
    <div class="amp-search-btn" id="amp-search-btn-size">
      <img src="<BaseLoja>images/amp-search.svg" onclick="fnSearchSubmit(document.TopSearchForm);" id="voiceSearchMGlass" width="22" height="22" title="Buscar">
      <img class="header-speech-icon" id="voiceSearch" onclick="fnStartDictation()" src="<BaseLoja>images/icon-speech-mobile.svg?cccfc=1" width="24" height="24" alt="Fale" />
    </div>
  </form>
</div>

Arquivo: mbhrodape.htm

<script>
//Voice Search
function fnStartDictation(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = "pt-BR";
    recognition.start();
    recognition.onresult = function(e) {
      document.getElementById('autocomplete').value = e.results[0][0].transcript;
      recognition.stop();
      document.getElementById('autocomplete-form').submit();
    };
    recognition.onerror = function(e) {
      recognition.stop();
    }
  }
}

/* Disable Speech Recognition IOS  */
function fnSpeechRecognitionIOS(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    document.getElementById("voiceSearch").style.display="block";
    document.getElementById("voiceSearch").style.position="relative";
    document.getElementById("voiceSearch").style.left="20px";
    document.getElementById("voiceSearch").style.top="8px";    
    document.getElementById("amp-search-btn-size").style.width="75px";
  }else{
    document.getElementById("voiceSearch").style.display="none";
    document.getElementById("voiceSearchMGlass").style.display="block";
    document.getElementById("voiceSearchMGlass").style.position="relative";
    document.getElementById("voiceSearchMGlass").style.left="8px";
    document.getElementById("voiceSearchMGlass").style.top="7px";
    document.getElementById("amp-search-btn-size").style.width="41px";
  }
}
fnSpeechRecognitionIOS();</script>

Arquivo: mbhlojasite.css

/* Voice Search */
#voiceSearchMGlass{display:block;position:relative;top:9px;left:9px;}
.amp-search-btn{display:flex;}

Modelo 2

Versão Mobile


Arquivo: mbhbarratopo.htm

<div class="amp-search-container speech">
  <form name="TopSearchForm" id="autocomplete-form" method="GET" target="_top" action="/listaprodutos.asp">
    <input type="hidden" name="idloja" value="<IDLoja>">
    <input type="hidden" name="digitada" value="true">
    <input type="text" id="autocomplete" value="<SearchText>" name="Texto" class="InputTextBusca amp-search-input" placeholder="Digite sua busca aqui">
    <div class="amp-search-btn" id="amp-search-btn-size">
      <img src="<BaseLoja>images/amp-search.svg" onclick="sF$.fnSearchSubmit(document.TopSearchForm);" id="voiceSearchMGlass" width="22" height="22" title="Buscar">
      <img class="header-speech-icon" id="voiceSearch" onclick="fnStartDictation()" src="<BaseLoja>images/icon-speech-mobile.svg?cccfc=1" width="24" height="24" alt="Fale" />
    </div>
  </form>
</div>

Arquivo: mbhrodape.htm

<script>
//Voice Search
function fnStartDictation(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = "pt-BR";
    recognition.start();
    recognition.onresult = function(e) {
      document.getElementById('autocomplete').value = e.results[0][0].transcript;
      recognition.stop();
      document.getElementById('autocomplete-form').submit();
    };
    recognition.onerror = function(e) {
      recognition.stop();
    }
  }
}

/* Disable Speech Recognition IOS  */
function fnSpeechRecognitionIOS(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    document.getElementById("voiceSearch").style.display="block";
    document.getElementById("voiceSearch").style.position="relative";
    document.getElementById("voiceSearch").style.left="20px";
    document.getElementById("voiceSearch").style.top="8px";    
    document.getElementById("amp-search-btn-size").style.width="75px";
  }else{
    document.getElementById("voiceSearch").style.display="none";
    document.getElementById("voiceSearchMGlass").style.display="block";
    document.getElementById("voiceSearchMGlass").style.position="relative";
    document.getElementById("voiceSearchMGlass").style.left="8px";
    document.getElementById("voiceSearchMGlass").style.top="7px";
    document.getElementById("amp-search-btn-size").style.width="41px";
  }
}
fnSpeechRecognitionIOS();
</script>

Arquivo: mbhlojasite.css

/* Voice Search */
#voiceSearchMGlass{display:block;position:relative;top:9px;left:9px;}
.amp-search-btn{display:flex;}

Modelo 3


Arquivo: barratopo.htm

<div class="child-header-mainbar header-mainbar-flex-search speech" id="search-box">
  <form name="TopSearchForm" method="GET" id="autocomplete-form" action="/listaprodutos.asp">
    <input type="hidden" name="idloja" value="<IDLojaNum>">
    <input type="hidden" name="digitada" value="true">
    <input type="text" id="autocomplete" value="<SearchText>" name="Texto" class="InputTextBusca" placeholder="Digite sua busca aqui">
    <img class="header-speech-icon" id="voiceSearch" onclick="fnStartDictation()" src="<BaseLoja>images/icon-speech.svg?cccfc=1" width="24" height="24" alt="Fale" />
    <button id="search-button" type="submit" aria-label="Buscar">
      <img src="<BaseLoja>images/iconsearch.svg?cccfc=1" width="22" height="22" alt="Buscar" id="voiceSearchMGlass">
    </button>
  </form>
</div>

Arquivo: lojalib.js

//Voice Search
function fnStartDictation(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = "pt-BR";
    recognition.start();
    recognition.onresult = function(e) {
      document.getElementById('autocomplete').value = e.results[0][0].transcript;
      recognition.stop();
      document.getElementById('autocomplete-form').submit();
    };
    recognition.onerror = function(e) {
      recognition.stop();
    }
  }
}

/* Disable Speech Recognition IOS  */
function fnSpeechRecognitionIOS(){
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    document.getElementById("voiceSearch").style.display="block";
    document.getElementById("search-button").style.width="85px";
  }else{
    document.getElementById("voiceSearch").style.display="none";
    document.getElementById("voiceSearchMGlass").style.display="block";
    document.getElementById("search-button").style.width="55px";
  }
}

Arquivo: rodape.htm

<script>fnSpeechRecognitionIOS();</script>

Arquivo: lojasite.css

/* Voice Search */
.speech .header-speech-icon{display:none;}
@media only screen and (min-width:1px) and (max-width:355px) {
.speech .header-speech-icon{position:relative;top:8px!important;}
}
@media only screen and (min-width:1px) and (max-width:640px){
.speech .header-speech-icon{float:right;display:block;position:relative;top:9px;left:-10px;z-index:9;}
#voiceSearchMGlass{margin:initial!important;position:relative;left:8px;}
}
@media only screen and (min-width:641px) and (max-width:1024px){
.speech .header-speech-icon{float:right;display:block;position:relative;top:9px;left:-10px;z-index:9;}
#voiceSearchMGlass{margin:initial!important;position:relative;left:8px;}
}
@media only screen and (min-width:1025px){
.speech .header-speech-icon{display:none!important;}
}

Adicione à busca por voz nas notícias da loja.



1º Passo

Insira o script abaixo no final do arquivo lojalib.js.

/* Enable Speech Recognition News */
function fnNewsVoiceSearch(){
  if(FC$.Page=="News"){
    function fnStartDictationNews(){
      if (window.hasOwnProperty('webkitSpeechRecognition')) {
        var recognition = new webkitSpeechRecognition();
        recognition.continuous = false;
        recognition.interimResults = false;
        recognition.lang = "pt-BR";
        recognition.start();
        recognition.onresult = function(e) {
          document.getElementById('TextoBuscaNews').value = e.results[0][0].transcript;
          recognition.stop();
          document.getElementById('fc-news-voice-search').submit();
        };
        recognition.onerror = function(e) {
          recognition.stop();
        }
      }
    }
    var oForm = document.forms["BuscaNoticia"];
    oForm.setAttribute("id", "fc-news-voice-search"); 
    var newDivSpeech = document.createElement("div");
    newDivSpeech.innerHTML="<div id='fc-icon-voice-news'><img src='"+ FC$.PathImg +"icon-speech-news.svg?cccfc=1' class='header-speech-icon' id='voiceSearch'  width='30' height='30' alt='Fale'></div>"
    var btnSpeech = newDivSpeech;
    btnSpeech.addEventListener('click', function () {
       fnStartDictationNews();
    });
    var reference = document.getElementById('Procurar');
    reference.parentNode.insertBefore(newDivSpeech, reference);
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      document.getElementById("voiceSearch").style.display="block";
    }else{
      document.getElementById("voiceSearch").style.display="none";
      document.getElementById("fc-icon-voice-news").style.display="none";
    }
  }
}

2º Passo

No final do arquivo rodape.htm insira a chamada da função fnNewsVoiceSearch().

<script>fnNewsVoiceSearch();</script>

3º Passo

No arquivo lojasite.css inclua o CSS abaixo:

/* News Speech Recognition */
#fc-icon-voice-news{display:none;}
@media only screen and (max-width:640px){
#fc-icon-voice-news{display:block;background:#03A9F4;;border-radius:2px;width:100%;height:40px;}
#fc-icon-voice-news img{position:relative;top:4px;}
}

4º Passo

Clique aqui para baixar o ícone utilizado neste procedimento. Envie este arquivo ZIP para a pasta IMAGES, onde ele será automaticamente descompactado.



Atenção: Atualmente a busca por voz (Speech Recognition API) funciona somente em smartphones com o sistema operacional Android, que são a maioria do mercado.

Obs: Além da voz, o campo de busca pode ser utilizado também através de digitação normal.


Referências:

Google: Voice Driven Web Apps
Mozilla: Web Speech API
Can I use: Speech Recognition API

 Avaliações dos clientes:
Este produto ainda não recebeu avaliações de clientes.
Clique aqui e seja o primeiro a avaliá-lo

Seu sucesso não pode esperar,

Criar agora sua
Loja Virtual!

Veja Nossos Planos

Ou fale com um de nossos
consultores
especializados
em e-commerce.

Veja nossos Planos e Serviços

Visão Geral

Saiba Mais

Download

Contato

Siga Nossos Canais

Você sabia?

A 1ª plataforma de comércio eletrônico do Brasil é também a mais escolhida pelos lojistas!

Clique aqui e experimente grátis!