How to Implement Voice Commands in Your Bubble App

In the Design tab, drag a Button element onto your page and label it 'Start Listening' with a microphone icon. Below it, add a Text element for displaying recognized speech and an Input element for voice-to-text filling. Give each element a descriptive ID: set the Button's ID to 'mic-button', the Text element's ID to 'speech-output', and the Input's ID to 'voice-input'. Enable ID attributes first in Settings → General → 'Expose the option to add an ID attribute to HTML elements'.

Drag an HTML element onto your page and paste the JavaScript code that initializes the Web Speech API. The script starts listening when the microphone button is clicked and sends the recognized text to your Bubble elements by programmatically setting the input value and dispatching an input event.

1<script>
2document.addEventListener('DOMContentLoaded', function() {
3  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
4  if (!SpeechRecognition) {
5    var output = document.getElementById('speech-output');
6    if (output) output.innerText = 'Voice input not supported in this browser.';
7    return;
8  }
9  var recognition = new SpeechRecognition();
10  recognition.continuous = false;
11  recognition.interimResults = false;
12  recognition.lang = 'en-US';
13  var micBtn = document.getElementById('mic-button');
14  var output = document.getElementById('speech-output');
15  var voiceInput = document.getElementById('voice-input');
16  var isListening = false;
17  if (micBtn) {
18    micBtn.addEventListener('click', function() {
19      if (isListening) { recognition.stop(); isListening = false; return; }
20      recognition.start();
21      isListening = true;
22      if (output) output.innerText = 'Listening...';
23    });
24  }
25  recognition.onresult = function(event) {
26    var transcript = event.results[0][0].transcript;
27    if (output) output.innerText = transcript;
28    if (voiceInput) {
29      var inputEl = voiceInput.querySelector('input');
30      if (inputEl) {
31        var setter = Object.getOwnPropertyDescriptor(
32          window.HTMLInputElement.prototype, 'value').set;
33        setter.call(inputEl, transcript);
34        inputEl.dispatchEvent(new Event('input', { bubbles: true }));
35      }
36    }
37  };
38  recognition.onerror = function(event) {
39    if (output) output.innerText = 'Error: ' + event.error;
40    isListening = false;
41  };
42  recognition.onend = function() {
43    isListening = false;
44    if (output && output.innerText === 'Listening...')
45      output.innerText = 'No speech detected. Try again.';
46  };
47});
48</script>

Preview your app in Google Chrome. Click the microphone button. Your browser will ask for microphone permission — click Allow. Speak a phrase clearly. The Text element should update with your spoken words, and the Input element should fill with the recognized text. If you see 'Error: not-allowed', check that your browser has microphone permissions enabled. If you see 'No speech detected', ensure your microphone is working and try speaking louder.

To trigger actions based on specific voice commands, use Bubble's 'Do when condition is true' event combined with the input value. In the Workflow tab, create a new event: Do when condition is true. Set the condition to Input voice-input's value contains 'search' or whatever command word you want. Add actions for that command — for example, triggering a search workflow or navigating to a page. Create multiple events for different commands. After each command is processed, use a Set State action to clear the input field so it is ready for the next command.

The Web Speech API is supported in Chrome, Edge, and Safari but not in Firefox. Display a note below the button informing users about browser requirements. Add visual feedback during listening — change the button color or show an animation while the microphone is active. Always provide a text input alternative alongside voice input so users on unsupported browsers can still complete their tasks.