Installation
Install the Smart Voice Transcriber plugin from the Bubble Plugin Marketplace and drag the element onto your page. The button will appear as a floating element fixed on the screen, independent of where the element is placed on the canvas.

General Setup

2.1 Button Color: sets the microphone button background color. Default is #4f46e5.
2.2 Button Size: sets the button diameter in pixels. Default is 60.
2.3 Wave Color: sets the icon and wave animation color. Default is #ffffff.
2.4 Position: defines where the floating button appears on the screen. Options are bottom-right, bottom-left, top-right and top-left. Default is bottom-right.

Transcription Mode

3.1 Realtime: text appears on screen as the user speaks, word by word.
3.2 Final: text appears only after the user pauses or stops speaking.
Configure the transcription_mode field with realtime or final.

Language

Set the language field with one of the following values: pt-BR for Portuguese, en-US for English, es-ES for Spanish. Default is pt-BR.

Text Accumulation

When accumulate_text is enabled, each new speech segment is added to the existing text. When disabled, each new segment replaces the previous text. Default is enabled.

Tooltips

6.1 Tooltip Start Text: message shown when hovering over the button before recording. Default is Clique para gravar.
6.2 Tooltip Stop Text: message shown when hovering over the button during recording. Default is Clique para parar.

Published States

7.1 transcript_text: full accumulated transcribed text.
7.2 interim_text: partial text being recognized in realtime mode.
7.3 final_text: last completed speech segment.
7.4 is_recording: yes when recording is active, no when stopped.
7.5 recording_duration: elapsed recording time in seconds.
7.6 audio_level: current microphone input level from 0 to 255.
7.7 error_message: description of any error that occurred.
7.8 browser_supported: yes if the browser supports the Web Speech API.
7.9 permission_granted: yes after the user grants microphone access.

Available Events

8.1 recording_started: triggered when recording begins.
8.2 recording_stopped: triggered when recording is stopped.
8.3 transcript_updated: triggered each time new text is recognized.
8.4 transcript_completed: triggered when recording stops and the final text is ready.
8.5 microphone_error: triggered when a microphone or recognition error occurs.
8.6 permission_denied: triggered when the user denies microphone access.
8.7 browser_not_supported: triggered when the browser does not support the Web Speech API.

Available Actions

9.1 Start Recording: starts the microphone and begins transcription.
9.2 Stop Recording: stops the microphone and finalizes the transcript.
9.3 Toggle Recording: starts recording if stopped, stops if recording.
9.4 Clear Transcript: clears all accumulated text and resets all transcript states.
9.5 Set Transcript Text: sets a custom text value directly into the transcript states.

Recommended Workflow

When Smart Voice Transcriber transcript_completed, save the transcript_text state to your database field. Use Clear Transcript action after saving to reset for the next recording session.

Best Practices

11.1 Always display the browser_supported state on page load and show a warning message if the value is no.
11.2 Use the is_recording state to show or hide UI elements while recording is active.
11.3 Use audio_level to build a custom visual volume indicator if desired.
11.4 Keep accumulate_text enabled for long dictation sessions and use Clear Transcript between sessions.
11.5 Always run in HTTPS. The Web Speech API requires a secure connection and will not work on HTTP pages.

Version 1.0

Smart Voice Transcriber Version 1.0 provides floating button interface, real-time and final transcription modes, text accumulation, audio level monitoring, microphone permission handling, browser compatibility detection, three language support and full workflow integration via states, events and actions. Built for Bubble applications that require fast and reliable voice input without external API dependencies.