How to add voice commands in a Bubble app

To add voice commands in a Bubble app, the simplest and most reliable method is using the browser’s built‑in Web Speech API through a small piece of JavaScript. Bubble does not have native voice‑recognition actions, but you can trigger JavaScript from Bubble events and then send the recognized text back into Bubble using the “Run JavaScript” action + a custom event or a JavaScript-to-Bubble element. This works on Chrome, Edge, and Android browsers. iOS Safari supports it only with user interaction.

How It Works

You use the browser’s SpeechRecognition feature (part of the Web Speech API). Bubble itself doesn’t process audio; the browser converts speech to text, then you pass the transcription into Bubble to run workflows. This avoids servers, plugins, and backend processing.

Step-by-Step Guide

Below is the cleanest setup that beginners can build:

• Add the plugin called Toolbox. This gives you the “Javascript to Bubble” element and the “Run JavaScript” action.
• Place a Javascript to Bubble element on the page. Give it a name like jsToBubble\_voice. Enable “Publish value” so Bubble can receive text.
• Add a workflow event, for example a button “Start Voice Input”, and inside it add Run JavaScript.

Use this script inside the action:

// Use Web Speech API
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
var recog = new SpeechRecognition();
recog.lang = "en-US";
recog.interimResults = false;
recog.maxAlternatives = 1;

recog.onresult = function(event) {
  var text = event.results[0][0].transcript;
  bubble_fn_jsToBubble_voice(text); // sends text back into Bubble
};

recog.start();

Using the Recognized Text

• Bubble will now trigger the “When Javascript to Bubble’s value is changed” event.
• Inside that workflow, use jsToBubble\_voice’s value as normal text. For example, search the database, fill an input, trigger navigation, or run conditional logic.

This setup gives you real, functioning voice commands with no backend work and no external APIs, fully inside Bubble’s normal workflows.