How to Enable Voice Search in Sitecore Content Editor

How to Enable Voice Search in Sitecore Content Editor

Voice search is transforming the way users interact with digital content, and integrating it into the Sitecore Content Editor can greatly enhance content management efficiency.

 In this blog, we’ll walk you through implementing a voice search feature in Sitecore, enabling content editor to find items faster using speech recognition.

Customizing the Sitecore Search Bar in the Content Editor

Step 1: Locate and edit the Default.aspx file, where the search bar of the Content Editor can be found. The file is located at the following path.

C:\inetpub\wwwroot\sc.dev.local\sitecore\shell\Applications\Content Manager\Default.aspx


You will need to add some custom code to display the voice recognition icon on the search bar.



<div class="speech" style="position:relative">
 <input id="TreeSearch" class="scSearchInput scIgnoreModified" value="<%= Translate.Text(Texts.SEARCH) %>" 
  onkeydown="javascript:if(event.keyCode==13){var result = scForm.postEvent(this,event,'TreeSearch_Click',true);scContent.fixSearchPanelLayout();return result;}"
  onfocus="javascript:scContent.watermarkFocus(this,event);" onblur="javascript:scContent.watermarkBlur(this,event);" />
 <img src="/temp/iconcache/Apps/32x32/Microphone.png" border="0" alt="" width="16px" height="16px" 
  style="position:absolute;right:10px;top:10px;cursor:pointer" title="voice recognition" onclick="startDictation()">
</div>

Once you’ve added the code to the page, the content editor's search bar will look like this


Step 2: To capture text via voice recognition, you need to set up a script that will be called when the voice recognition icon is clicked.

Add the following scripts to the `<head>` tag of the Default.aspx page to trigger the dictation method. Upon clicking the icon, the system will request permission to access the microphone. 

Once permission is granted, your speech will be converted to text and displayed in the search bar. Additionally, the search click event will be triggered automatically
<script>
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = 'en-US';
      recognition.start();

      recognition.onresult = function (e) {
        document.getElementById('TreeSearch').value = e.results[0][0].transcript;
        recognition.stop();
	document.getElementsByClassName('scSearchButton')[0].click();
      };

      recognition.onerror = function (e) {
        recognition.stop();
      };
    }
  }
</script>

Here's how to assign the value from the speech transcript to the search box:
document.getElementById('TreeSearch').value = e.results[0][0].transcript;


And here's the code for triggering the click event of the search button
document.getElementsByClassName('scSearchButton')[0].click();




    That's it! You should now see the results displayed as expected.
    


If you encounter any difficulties or have questions, don’t hesitate to get in touch with me. I’m here to help and support you in any way I can.

Comments

Post a Comment

Popular posts from this blog

How to Create a Component in Next.js for XM Cloud

Image
Let’s create a component in the Next.js app.  If you want to know how that component is created in XM Cloud, please refer to my previous blog for more information. https://sitecoresathiya.blogspot.com/2024/10/how-to-create-component-in-nextjs-for-xmc.html I have pulled down the startup branch to my local environment. https://github.com/sitecorelabs/xmcloud-foundation-head Refer to the README file to learn how to run the Next.js app locally.  Navigate to the headapps/nextjs-starter folder and execute the following command to scaffold a new component:  jss scaffold "TextCard". Let's check if the component is rendered correctly. Run the command below to start your Next.js app locally in connected mode. npm run start:connected After that, your app will run on http://localhost:3000/ with the default port if the port is not in use.   Yes, it shows what I had in my TextCard.tsx file. How can we display the content from XMC? To map the component fields into my TextCardFields...
Read more

How to Create a Custom Component in XM Cloud.

Image
The best practice for creating a component module is to navigate to Settings -> Project -> [Site Name].  This allows us to use the component across different sites as well.  To create the module, right-click on the project, select "Insert," and then click on "Headless Module." A popup modal will appear.   Specify the module name as the component name. Choose the desired path for grouping the components. The best way to organize them is to select your site name folder under the project. Create a rendering. Instead of creating a rendering, it’s best to clone a rendering and then update it accordingly. For example, clone a Promo rendering and rename it to Text Card. /sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Page Content/Promo To clone the rendering, right-click on the promo, select "Scripts," and then choose "Clone Rendering."   Update the rendering name and select the path to your component folder that was created during ...
Read more