Enabling Voice Search Icon for Search Bar Integration

Search Best Practices - Integration
1

Is it possible to add the search bar icon (and voice search in general) into the Search Bar which is integrated on the homepage/header of the site?

While I have enabled voice search on the search bar on the Answers results page, as per the Voice Integration details on the Summer '21 Release Notes, there does not seem to be any mention of how to enable the voice search on the search bar which will be integrated elsewhere on the site. Similarly, there doesn’t seem to be anything mentioned in the Search Bar integration guide.

Thanks!

2

Hey Gabriel,

You should be able to do it with the following piece of code:

ANSWERS.addComponent("SearchBar", {
     container: ".search-bar-container",
     name: "search-bar",
     redirectUrl: "https://www.domain.com/search-results",
     voiceSearch: {
         enabled: true
     }
});

Let me know if this doesn’t work!

Best,

Daniel

3

Thanks @Daniel_Baigel! Once we upgraded the serach bar to v1.3 (was previously v1.0), the code you provided worked!

As a follow up, is there a way to enable the icon in the search bar on mobile too, in the same way you can for the search bar on the Asnwers reuslts page by including this code, as per this release note?:

  @media (max-width: 47.9375rem) {
    .yxt-SearchBar-voiceSearch {
        display: block;
    }
  }

Thanks,
Gabriel