How to Add Voice Input to Your Bubble App (Step-by-Step Tutorial) – ratio.dev

Ever wished your bubble apps could listen instead of just read? In this video, I'm going to show you exactly how we built our voice input component that transforms spoken words into text instantly. We've seen this feature boost user engagement by 40% in our apps, and I'll walk you through every step so you can implement it today. But first, if you're keen on upping your bubble game, you really should get free access to our no Code Resource guide. It's updated weekly with vetted plugins, how to videos, tools we use, books and stuff that's going to help you get better at building bubble applications. There's a link in the description below, so let's get started.

The most powerful thing about this voice input reusable element isn't just the cool factor, and it does have cool factor, it's that it dramatically lowers the barrier for user input. Think about it. There are many people who hate typing on their mobile phones. While they'll happily talk to their phone. And by adding voice capability, you're making your app more accessible to a whole new segment of users who prefer speaking over typing. So before we dig into the details, let me just show you how the element works. This is the structure of the element. It's got the text here. Can your bubble application do this? Going to click on the microphone. I just love the reusable Voice element that Ratio.dev has built in bubble. It makes user input. So cool. Click the stop button, it's going to quickly process the audio. And there we have it. It's in the text input. Also, if you're wondering, is there a cool way to make it easier for your users to know what they need to say, then you can just incorporate a help text to this reusable element. This is really great if you're using this for AI applications, because sometimes people want or need an example prompt for the question so that you actually can get the best information in and give them the best response back out. So that is a quick demo of how the reusable element looks like for the user experience. Now let's dig in and see how it's built. So first we need to set up our tools. The first thing you're going to need is a Audio Recorder plugin for bubble. So let's jump over to the plugins tab and you will see that we are using this plugin called Audio Recorder Possible. It is by Lindsay at no Code. He makes great plugins. This one works great, by the way. The link will be in the resource center. We will also Need a simple transcription tool that in our case we have built in Relevance AI. So I'll show you there the exact setup. All it does is it goes into the API connector. In this case we're using ChatGPT to transcribe the audio. But you could use any other tool that you want, Deepgram or any of the other audio specific APIs that are out there. I have a API called Transcribe Audio. It calls my Relevance tool and it passes in a URL for the audio file that we've recorded via the plugin. So all I need to do is record, put in the URL here. I send it off to ChatGPT, it will transcribe the audio and send me back the text. So that is the workings of the actual AI part of getting this to work inside your application. Now what we need to do is set up our reusable element inside bubble. So I have a reusable element called audio input. And here it takes two input parameters. The caption text, which is the text that shows up here above the input, which is telling them what they need to put in. And it takes the help text caption. Text is not optional, but help text is optional. If the help text is empty, it won't show the help button. But you do need the caption text. Here is our audio recorder element. It's just pasted in here. We can click this. You can set the colors and the width and the number of bars for it to show as the person is recording. So it gives it that cool recording animation. You can change the colors, the different intensities of volume so that they can really get a feel for how well it's recording. And then when they've clicked here on the right, we have a text indicator which is just showing the recording time formatted as minutes and seconds. And we have an icon for the microphone to start the recording. And we also have another icon which is not visible on page load for stopping is visible when it's recording. And when the microphone is recording, then it's not visible. So that's how we get that effect where it switches the icons between each of them. You can see here on the help button, if the text is empty, this element isn't visible. And now all we need to do is jump in and look at the workflows that this reusable element uses. One other thing that I do want to show you is on the reusable element we have created two custom states. One is updated. This is going to be the yes, no. And when we've actually change the value of the transcribed text. And then we have another one called transcribe text, where we store the text. This is going to be important because these two custom states are what we use to communicate back to the page where the reusable element has been embedded. And we'll see that in just a few minutes. So now we go into the workflows. We have two workflows here just to show the help text if it's visible or if it isn't visible, to hide it. We have the microphone when it is clicked. So this is going to start the recording. We have another.

Workflow for when they hit the stop button. This will show the text. This is processing audio, and it will stop the recording. We have an event that fires when the recorder file has been uploaded. So that means that they've hit stop, it stopped recording, and it's uploaded the file to bubble. Because we don't want to do anything until that file is actually inside bubble. And that's when we fire the custom event to transcribe the audio and we hide the processing audio. First it's going to call our Relevance AI tool, send it the URL and it will receive back the text. Then it is going to set the state of transcribed text, the custom state of our reusable, to the return value that we've gotten from relevance. And it's also going to change the value of updated to yes. It will also hide the help text and that will send the signal back to the page that this audio text has been completed. And then the last one we have is that remember that they can type into that text box as well. So if they do type text in there, then we will also save the text into transcribed text. So just in case they decide not to record, they just want to write. We want to make sure that we also send that text back to the page. So that's what this workflow does. So now you've seen all of the workflows in the reusable element. And all we need to look at now is how do we embed this into a page. On the page we just have a logo here, a text, and here we have the reusable element. And I'm sending it the caption. Can your bubble application do this? And I'm sending it the help text. I really believe that voice inputs are the next big thing. And you could pull these from a database or whatever you want to do in your application. The only other thing that we need to take into account is that we do need a workflow on the page that handles what happens when the reusable receives the information. The last thing we need is look at the workflow that is just a conditional that runs every time this audio input's updated custom state is flagged as yes. What it will do here in this case, it's not doing anything because there's no logic in this demo. But here's where you would take the value of the transcribed text and store it into your database, into whatever data type it needs to be, or do whatever else you might want to do in your application. But it is important that you have this conditioned event so that whenever we get a response back from the reusable, we know what to do with it. Also for mobile users, this works beautifully, but they'll need to be using a modern browser. We've tested this on both iOS and Android and it works flawlessly. But you might want to add a little note for users with older devices, here's something we discovered that wasn't obvious at first. Voice input dramatically improves the quality of user feedback. When people type, they tend to be brief. They have to stop and think about what words do I want to put into this box. But when they speak, they give more detailed, thoughtful responses. And for applications that rely on user input for insights, this is a game changer. And so there you have it. A powerful reusable AI powered voice input tool for your Bubble application. Let's just recap what we've covered. We installed the Audio Recorder plugin. We set up a simple transcription tool in Relevance AI. We set up the API call inside Bubble. I showed you how the Bubble application communicates with the Relevance tool. We created a reusable element with customizable parameters and two custom states. We built the workflows that make everything work together. And I showed you how to embed it into your applications page. And be sure to receive the information and put it in your database. Remember to sign up for our no Code Resource Center. That's where you're going to find more videos like this one that will keep you on your toes in your Bubble application development. Hope you've enjoyed this video. If you want help implementing voice implementation in one of your Bubble applications, feel free to reach out to us here@ratio.dev we'd be glad to work with you and hope you enjoyed this and see you on the next video.