Voice Integration (Summer '21 Release)

We’ve taken the Answers experience to the next level with our Voice Search.

3.25 billion people are using voice search on programs like Alexa, Siri, and Google assistant. People want the ability to vocalize their intentions instead of having to type out a search. Using Yext Natural Language Processing technology, we can provide Answers to real questions asked by real voices.

A microphone icon in the search bar will notify the user that voice search is available and act as the interface to start/stop a voice search. The feature is currently available for Chrome, Edge, Safari, and Samsung internet, as well as supporting most languages.

Upgrade Implications:
You must be on Theme 1.23 to take advantage of Voice Search. In config/index.json, the admin can set the new field voiceSearch enabled to true to enable voice search:


{
  "pageTitle": "Search", // !!!REPLACE THIS VALUE!!! The contents of the title tag and meta open graph tag for title
  // "metaDescription": "", // The meta tag for open graph description
  // "canonicalUrl": "", // The link tag for canonical URL as well as the meta tag for open graph url
  // "keywords": "", // The meta tag for keywords
  "componentSettings": {
    /**
    "QASubmission": {
      "entityId": "", // Set the ID of the entity to use for Q&A submissions, must be of entity type "Organization"
      "privacyPolicyUrl": "" // The fully qualified URL to the privacy policy
    },
    **/
    "DirectAnswer": {
      "defaultCard": "allfields-standard"
    },
    "SearchBar": {
      "placeholderText": "Search", // The placeholder text in the answers search bar
      "voiceSearch": {
         "enabled": false // Whether or not voice search is enabled for all pages
 	  }
    }
  }
}

Settings for voice search will appear by default as an object within the SearchBar component for any new pages.

To modify the colors of the loading indicator, target the .yxt-SearchBar-dot[NUMBER] in your answers.scss, like this:

  .yxt-SearchBar-dot1 { fill: red }
  .yxt-SearchBar-dot2 { fill: yellow }
  .yxt-SearchBar-dot3 { fill: blue }
  .yxt-SearchBar-dot4 { fill: green }

Voice search is hidden by default on mobile (users are more likely to use their keyboard’s native dictation button). However, if you’d like to enable it on mobile, add the following to your answers.scss:

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

:spiral_calendar: This feature will be available in GA

1 Like

For existing Answers users/clients, will this feature be auto-enabled?

Hi Sarah,

Voice integration will not be automatically enabled for existing Answers experiences, but can be enabled once the experience is upgraded to Theme 1.23!

Best,
DJ

Hello!

I managed to get the voice integration for a client, everything seems OK for desktop. For mobile, we can use the IOS (Safari) keyboard function for voice search, but we do not see the “microphone” icon within the search bar, is this always the case? can we integrate it? The client wants to have it, as they don’t think it is obvious to users to know they have that option.

Hey Juan,

To get voice search working on mobile, make sure you include the media query at the end of the first post here in your answers.scss file.