Is there a way to be able to get this to work for search in the header

Hey Luke

Do you mean the (black) admin bar on top of the website? Or is there a specific search form in your theme that isn’t supported yet?

Nope the search bar in the header.

https://www.standardplumbing.com/

Cheers
Luke

Alright, thanks for the link to the website in question.

I made some changes to the JavaScript. Could you please try the 1.1.0-alpha version? Download: https://cloudup.com/cchPT5fZwgL

You probably have to add some custom CSS to make the microphone button match perfectly with your design. I can help you with that if necessary.

Hi Pascal,

Let me try this on the staging site.

Cheers
Luke

It is active on

https://test.standardplumbing.com/

Cheers
Luke

Hi Pascal:

Please have a look at my site and Search Bar. Is it not displaying the voice search because I have it in the Header (and do I resolve this per Luke’s issue)? Where else and how would you suggest it be placed on the Home Page?

https://www.palmspringsgreathomes.com

Thanks,

Steve

Luke: Great, the microphone button is displayed! Now, let’s fix the positioning.

1. I made two small fixes to the development version. Please update it on your staging site. Download: https://cloudup.com/cnJUg66bCt5
2. In your theme options you should have a field to enter some custom CSS. Add the following to that box: .voice-search-button { top: 16px; }
3. Flush your browser cache

Let me know if that works.

Steve: Thanks for your report. Although it isn’t the same issue as Luke’s, but the following should fix the button positioning on your site:

1. Download the current development version: https://cloudup.com/cnJUg66bCt5
2. In the Jetpack Custom CSS module (or similar), add the following: .voice-search-button { top: 33px; right: 75px; }

Let me know if that works for you.

Thanks, Pascal. Download the development version and then what? Upload using FileZilla? Upload to what file? The download file is unzipped…should I zip it before uploading.

Re: Jetpack Custom CSS, assuming I can find this file, do I add the code anywhere?

The Plugin description made it seem so simple. “Just download from the WP Directory.” Is the above only necessary to place the Plugin in the Header? Where else would suggest it go to simply just download per your intention?

Thanks for your help.

Hi Steve

The plugin is already working on your site, as you can see here: https://cloudup.com/c0UKhWSAAX8

If you can’t see it, then you’re probably not using Safari or Chrome as noted in the FAQs. Can you tell me which browser you are using?

Step 2 above is to fix the button’s positioning. As I saw you have Jetpack installed, you can use that for it. Please have a look at their support site at how the Custom CSS module works: https://jetpack.me/support/custom-css/

Forget about step 1, and just update to version 1.1.0 of the plugin inside your WordPress dashboard. The update notice should appear soon.

Hi Pascal,

Thanks for your help.

Cheers
Luke

Thanks, Pascal. I am using Safari. I updated the plugin and pasted .voice-search-button { top: 33px; right: 75px; }, with and without the . before voice, into the Jetpack CSS Editor as you instructed (it populated lines 1-4.) Still not seeing the microphone in the search box. ??

Hi Stephen

After having a closer look it appears that Safari has changed something on their end and doesn’t seem to support speech recognition anymore ??
That means no plugin relying on that web standard will work on Safari at the moment; only on Chrome.

I’m marking this thread as resolved. However, I’m keeping an eye open on the progress of this standards and will update the plugin as soon as Safari supports speech input again.