Adding voice input to your website

Installation snippet

Add this script tag to any page where you want the voice input widget to appear. It contains the complete client loader and requires no build step.

Default loader snippet (replace the key with your own publishable key):

<script src="https://flowmic.app/go/integrator/v1.js" data-publishable-key="fmpk_your_key_here" data-target="focus"></script>

No npm package is required. The loader script fetches the voice component on demand only when a visitor clicks the microphone icon.

Site publishable key

Create your key in the FlowMic console under Website voice input, then set it in the data-publishable-key attribute.

This key is public by design and appears directly in your page source. It is not an API secret. Usage is protected by your allowed website addresses and per-key rate limits.

Target fields (data-target)

The data-target attribute determines which input fields receive spoken text. Three options are supported:

focus (default)

Words land in whichever editable text box the visitor clicked in last. Clicking the microphone icon does not steal focus, and moving to another box while speaking redirects the final sentence there.

Default configuration using the active focused field:

<script src="https://flowmic.app/go/integrator/v1.js" data-publishable-key="fmpk_your_key_here" data-target="focus"></script>

CSS selector list

Provide one or more comma-separated CSS selectors. Voice input is enabled only on matching elements, writing into whichever of them was focused most recently, or the first match if none was selected.

Restricting voice input to specific input selectors:

<script src="https://flowmic.app/go/integrator/v1.js" data-publishable-key="fmpk_your_key_here" data-target="#comment, #title"></script>

self

The widget displays the transcript inside its own panel and does not inject text into any host field. Use this mode if your application handles transcription text via custom event listeners.

Standalone display mode without automatic field injection:

<script src="https://flowmic.app/go/integrator/v1.js" data-publishable-key="fmpk_your_key_here" data-target="self"></script>

If no eligible input field is focused when speech finishes, text is retained safely inside the widget panel. The visitor can copy the words or click a valid field to insert them.

Password fields, read-only and disabled inputs, and elements marked with data-flowmic="off" are ignored. Rich-text editors are not supported yet.

Allowed website addresses

Your key only accepts requests from exact addresses registered in the console. Each entry must specify the full scheme and host (such as https://example.com). Subdomains like www and bare domains are distinct addresses, and wildcards are not accepted. At least one address is required.

For local testing, you can add a development address marked development only, such as http://localhost:5173

If the script runs on an unlisted address, the widget informs visitors that voice input is unavailable on this page, and an error event is dispatched to your page.

Visitor experience

A small microphone icon appears beside eligible input fields. Clicking the icon opens a compact nonmodal panel anchored next to the field, preserving the surrounding page layout.

Visitors with a computer microphone can click to talk after granting browser permissions for your domain. Clicking again stops recording and finalizes text.

Visitors on devices without a microphone can scan the displayed QR code with a smartphone camera to speak into the phone, with words appearing on the computer.

Visitors do not need a FlowMic account, install no software or browser extensions, and are never asked for payment.

Usage limits

Every site key enforces built-in safety limits to prevent abuse and manage resource consumption:

• Individual recordings automatically stop after 5 minutes.
• A single visitor can record up to 30 minutes per day on your key, measured via privacy-preserving network grouping without tracking personal identity.
• An individual visitor can initiate at most 5 voice sessions per minute.
• All visitors combined can initiate at most 120 sessions per minute on one key.
• At most 20 active recordings may run simultaneously per key. Additional attempts prompt visitors to try again in a moment.

Speaking time draws from your monthly account allowance and any optional per-key cycle limit configured in the console. When minutes are exhausted, visitors see that voice input is temporarily unavailable.

Billing and allowance

Visitor voice input minutes are deducted from the monthly transcription allowance of your FlowMic account. There are no separate widget fees or setup charges.

The Max plan is recommended for website integrations because all site visitors draw from one shared monthly minute pool. Check the pricing page for current plan allowances.

Troubleshooting and error events

The widget dispatches an error event on its container element whenever a setup or runtime fault occurs. You can listen for this event to inspect machine-readable error codes:

Listening for integration error codes:

flowmic.on('error', ({ code }) => {
  console.warn('FlowMic:', code);
});

The microphone icon does not appear on the page.

Confirm that the script tag is present in your HTML, the attribute is spelled data-publishable-key, and the key has not been revoked in your console (code AUTH_TOKEN_INVALID).AUTH_TOKEN_INVALID

Visitors see a notice that voice input is not available on this page.

The current page address is not registered in your key's allowed address list (code WEB_ROOM_ORIGIN_NOT_ALLOWED). Add the exact address in the console, including https://, port numbers, and www if applicable.WEB_ROOM_ORIGIN_NOT_ALLOWED

Voice input works in local development but fails on the production website.

Addresses are verified individually. Make sure both your development address (such as http://localhost:5173) and your production domain are added as separate entries in the console.

The microphone icon is visible, but transcribed words do not appear in the input field.

Ensure the field was focused and is not a password, read-only, disabled, or unsupported rich-text editor. Retained words remain in the widget panel for manual copying.

Visitors are told to try again in a moment.

A per-visitor or per-key rate limit was reached (code WEB_ROOM_RATE_LIMITED). The temporary block automatically clears within approximately one minute.WEB_ROOM_RATE_LIMITED

Voice input stopped working for all visitors simultaneously.

Your key's cycle limit or your account's monthly transcription allowance has been reached. Check the console to verify status and adjust limits or upgrade your plan.